SVG

Le format SVG ( Scalable Vector Graphics ) est un format graphique vectoriel basé sur XML permettant de définir des graphismes bidimensionnels et prenant en charge l'interactivité et l'animation. La spécification SVG est une norme ouverte développée par le World Wide Web Consortium depuis 1999.

Les images SVG sont définies dans un format graphique vectoriel et stockées dans des fichiers texte XML. Elles peuvent ainsi être redimensionnées sans perte de qualité et les fichiers SVG peuvent être recherchés , indexés , utilisés dans des scripts et compressés . Les fichiers texte XML peuvent être créés et modifiés avec des éditeurs de texte ou des logiciels de graphisme vectoriel , et sont compatibles avec la plupart des navigateurs web . Le format SVG peut inclure du JavaScript , ce qui peut potentiellement entraîner des vulnérabilités de type cross-site scripting (XSS) .

Le format SVG est en développement au sein du World Wide Web Consortium (W3C) depuis 1999, après que six propositions concurrentes de langages graphiques vectoriels aient été soumises au consortium au cours de l'année 1998 (voir ci-dessous).

Le premier groupe de travail SVG a décidé de ne développer aucune des propositions commerciales, mais de créer un nouveau langage de balisage qui s'inspirait d'elles sans toutefois s'y baser réellement.

Le format SVG a été développé par le groupe de travail SVG du W3C à partir de 1998, après la réception de six propositions concurrentes de graphiques vectoriels cette année-là :

• Schémas Web, de CCLRC
• PGML , d' Adobe Systems , IBM , Netscape et Sun Microsystems
• VML , par Autodesk , Hewlett-Packard , Macromedia , Microsoft et Vision
• Hyper Graphics Markup Language (HGML), par Orange UK et PRP
• WebCGM , de Boeing , PTC , InterCAP Graphics Systems, Inso Corporation , CCLRC et Xerox
• DrawML, d'Excosoft AB

Le groupe de travail était alors présidé par Chris Lilley du W3C.

L'adoption initiale a été limitée par le manque de prise en charge dans les anciennes versions d'Internet Explorer. Cependant, depuis 2011, tous les principaux navigateurs de bureau prennent en charge le format SVG. La prise en charge native par les navigateurs offre divers avantages : absence de plugins, possibilité d'intégrer le SVG à d'autres contenus et fiabilité accrue du rendu et des scripts. La prise en charge du SVG sur mobile se présente sous différentes formes, divers appareils et navigateurs prenant en charge SVG Tiny 1.1 ou 1.2. Le SVG peut être créé à l'aide d'éditeurs de graphiques vectoriels et converti en formats raster . Dans les applications web, le SVG intégré permet d'incorporer du contenu SVG dans des documents HTML.

La spécification SVG a été mise à jour vers la version 1.1 en 2011. Scalable Vector Graphics 2 est devenu une recommandation candidate du W3C le 15 septembre 2016. SVG 2 intègre plusieurs nouvelles fonctionnalités en plus de celles de SVG 1.1 et SVG Tiny 1.2.

• SVG 1.0 est devenu une recommandation du W3C le 4 septembre 2001.
• La norme SVG 1.1 est devenue une recommandation du W3C le 14 janvier 2003. La spécification SVG 1.1 est modulaire afin de permettre la définition de sous-ensembles sous forme de profils. Hormis cela, il existe très peu de différences entre SVG 1.1 et SVG 1.0.
  • SVG Tiny et SVG Basic (les profils SVG mobiles) sont devenus des recommandations du W3C le 14 janvier 2003. Ils sont décrits comme des profils de SVG 1.1.
• SVG Tiny 1.2 est devenu une recommandation du W3C le 22 décembre 2008. Initialement conçu comme un profil du projet SVG Full 1.2 (abandonné depuis au profit de SVG 2), il a ensuite été remanié en une spécification autonome. Il est généralement peu pris en charge.
• SVG 1.1 Deuxième édition, qui comprend toutes les corrections et clarifications, mais aucune nouvelle fonctionnalité par rapport à la version originale de SVG 1.1, a été publiée le 16 août 2011.
• SVG Tiny 1.2 Portable/Secure, un sous-ensemble plus sécurisé du profil SVG Tiny 1.2, a été introduit comme norme préliminaire de l'IETF le 29 juillet 2020. Également connu sous le nom de SVG Tiny P/S, SVG Tiny 1.2 Portable/Secure est une exigence de la norme préliminaire BIMI .

SVG 2 supprime ou déprécie certaines fonctionnalités de SVG 1.1 et intègre de nouvelles fonctionnalités de HTML5 et du format Web Open Font (WOFF) :

• Par exemple, SVG 2 supprime plusieurs éléments de police tels que glyphet altGlyph(remplacés par le WOFF).
• Cet xml:spaceattribut est obsolète et remplacé par CSS.
• Des fonctionnalités HTML5 telles que translateles data-*attributs ont été ajoutées.
• Les fonctionnalités de gestion de texte de SVG Tiny 1.2 sont annotées comme devant être incluses, mais ne sont pas encore formalisées dans le texte. Certaines autres fonctionnalités de la version 1.2 sont sélectionnées, mais SVG 2 n'est généralement pas un sur-ensemble de SVG Tiny 1.2.

SVG 2 a atteint le stade de recommandation candidate le 15 septembre 2016, et des versions révisées ont été publiées le 7 août 2018 et le 4 octobre 2018. Le dernier brouillon a été publié le 14 septembre 2025.

Le format SVG prend en charge l'interactivité, l'animation et offre de nombreuses possibilités graphiques, ce qui le rend idéal pour les applications web et d'impression. Les images SVG peuvent être compressées avec l' algorithme gzip , ce qui permet d'obtenir des fichiers SVGZ généralement 20 à 50 % plus petits que l'original. Le format SVG prend également en charge les métadonnées, ce qui améliore l'indexation, la recherche et la récupération du contenu SVG.

Le format SVG permet de gérer trois types d'objets graphiques : les formes vectorielles (telles que les tracés composés de lignes droites et de courbes), les images bitmap et le texte. Ces objets peuvent être groupés, stylisés, transformés et intégrés à des objets précédemment rendus . Parmi ses fonctionnalités, on trouve les transformations imbriquées , les masques de détourage , les masques alpha , les effets de filtre et les objets modèles. Les dessins SVG peuvent être interactifs et inclure des animations , définies soit dans les éléments XML SVG, soit par le biais de scripts accédant au DOM ( Document Object Model ) SVG.

Le format SVG utilise CSS pour la mise en forme et JavaScript pour le script. Le texte, y compris l'internationalisation et la localisation , apparaissant en texte brut dans le DOM SVG, améliore l' accessibilité des graphiques SVG.

Bien que la spécification SVG se concentre principalement sur le langage de balisage des graphiques vectoriels , sa conception inclut les fonctionnalités de base d'un langage de description de page comme le format PDF d'Adobe . Elle prévoit la prise en charge de graphiques riches et est compatible avec CSS pour la mise en forme. Le format SVG contient les informations nécessaires pour placer chaque glyphe et image à l'emplacement choisi sur une page imprimée.

Les dessins SVG peuvent être dynamiques et interactifs. Les modifications temporelles des éléments peuvent être décrites en SMIL ou programmées dans un langage de script (par exemple, JavaScript ). Le W3C recommande explicitement SMIL comme norme pour l'animation en SVG.

Un ensemble complet de gestionnaires d'événements tels que « onmouseover » et « onclick » peut être attribué à n'importe quel objet graphique SVG pour appliquer des actions et des événements.

En raison de la demande de l'industrie, deux profils mobiles ont été introduits avec SVG 1.1 : SVG Tiny (SVGT) et SVG Basic (SVGB).

Il s'agit de sous-ensembles de la norme SVG complète, principalement destinés aux navigateurs web aux capacités limitées. Plus précisément, SVG Tiny a été défini pour les appareils mobiles aux fonctionnalités très restreintes, tels que les téléphones portables ; il ne prend pas en charge la mise en forme ni les scripts. SVG Basic a été défini pour les appareils mobiles plus performants, tels que les smartphones .

En 2003, le 3GPP , organisme international de normalisation des télécommunications, a adopté SVG Tiny comme format graphique vectoriel obligatoire pour les téléphones de nouvelle génération. SVGT est le format graphique vectoriel requis, tandis que la prise en charge de SVGB est optionnelle pour le service de messagerie multimédia (MMS) et le service de diffusion en continu par paquets. Il a ensuite été ajouté comme format requis pour les graphiques vectoriels dans le sous-système multimédia IP (IMS) du 3GPP.

Aucun des deux profils mobiles ne prend en charge l'intégralité du modèle DOM (Document Object Model), tandis que seul SVG Basic offre une prise en charge optionnelle des scripts. Cependant, comme il s'agit de sous-ensembles entièrement compatibles de la norme complète, la plupart des graphiques SVG peuvent toujours être rendus par des appareils qui ne prennent en charge que les profils mobiles.

SVGT 1.2 introduit le microDOM (μDOM), la mise en forme et le scripting. SVGT 1.2 inclut également des fonctionnalités absentes de SVG 1.1, comme les traits non mis à l'échelle, pris en charge par certaines implémentations de SVG 1.1, telles qu'Opera, Firefox et WebKit. Avec l'augmentation du partage de code entre les navigateurs de bureau et mobiles, l'utilisation de SVG 1.1 a progressé par rapport à celle de SVGT 1.2.

Les images SVG, étant du XML, contiennent de nombreux fragments de texte répétés et sont donc parfaitement adaptées aux algorithmes de compression de données sans perte . Lorsqu'une image SVG est compressée avec l' algorithme gzip , elle est appelée « SVGZ » et utilise l' .svgzextension de fichier correspondante. Les visionneuses conformes à la norme SVG 1.1 affichent les images compressées. Un fichier SVGZ représente généralement 20 à 50 % de la taille d'origine. Le W3C fournit des fichiers SVGZ pour tester la conformité.

La spécification SVG 1.1 définit 14 domaines fonctionnels ou ensembles de fonctionnalités :

Chemins

Les contours de formes simples ou complexes sont dessinés à l'aide de lignes courbes ou droites qui peuvent être remplies, soulignées ou utilisées comme masque de détourage . Les tracés possèdent un codage compact.

Par exemple, (pour « se déplacer vers ») précède les coordonnéesM numériques initiales x et y , et (pour « tracer une ligne vers ») précède le point vers lequel une ligne doit être tracée. D'autres lettres de commande ( , , , , et ) précèdent les données utilisées pour tracer diverses courbes de Bézier et elliptiques . est utilisé pour fermer un chemin.LCSQTAZ

Dans tous les cas, les coordonnées absolues suivent les commandes en lettres majuscules et les coordonnées relatives sont utilisées après les lettres minuscules équivalentes.

Formes de base

Il est possible de tracer des lignes droites et des chemins composés d'une série de segments de droite connectés (polylignes), ainsi que des polygones fermés, des cercles et des ellipses. Les rectangles et les rectangles à coins arrondis sont également des éléments standard.

Texte

Le texte en caractères Unicode inclus dans un fichier SVG est exprimé sous forme de données de caractères XML . De nombreux effets visuels sont possibles, et la spécification SVG gère automatiquement le texte bidirectionnel (pour composer une combinaison de texte anglais et arabe, par exemple), le texte vertical (comme le chinois ou le japonais) et les caractères le long d'un tracé courbe (tel que le texte autour du Grand Sceau des États-Unis ).

Peinture

Les formes SVG peuvent être remplies et soulignées (peintes avec une couleur, un dégradé ou un motif). Le remplissage peut être opaque ou présenter différents degrés de transparence.

Les « marqueurs » sont des éléments d'extrémité de ligne, tels que des pointes de flèches ou des symboles qui peuvent apparaître aux sommets d'un polygone.

Couleur

Les couleurs peuvent être appliquées à tous les éléments SVG visibles, soit directement, soit via fillles strokepropriétés `color`, `color` et autres. Les couleurs sont spécifiées de la même manière qu'en CSS2 , c'est-à-dire en utilisant des noms comme ` color` blackou `color` blue, en hexadécimal comme #2f0`color` ou `color` #22ff00, en décimal comme `color` rgb(255,255,127)ou `color`, ou sous forme de pourcentages rgb(100%,100%,50%).

Dégradés et motifs

Les formes SVG peuvent être remplies ou contourées avec des couleurs unies comme ci-dessus, ou avec des dégradés de couleurs ou des motifs répétitifs. Les dégradés de couleurs peuvent être linéaires ou radiaux (circulaires) et comporter un nombre quelconque de couleurs et de répétitions. Il est également possible de spécifier des dégradés d'opacité. Les motifs sont basés sur des objets graphiques raster ou vectoriels prédéfinis, qui peuvent être répétés dans xtoutes yles directions. Les dégradés et les motifs peuvent être animés et programmés.

Depuis 2008, des discussions ont eu lieu parmi les utilisateurs professionnels de SVG concernant l'ajout de maillages de dégradés , ou de préférence de courbes de diffusion, à la spécification SVG. Il est avancé qu'une « représentation simple [utilisant des courbes de diffusion] permet de représenter même des effets d'ombrage très subtils » et que « les images de courbes de diffusion sont comparables aux maillages de dégradés en termes de qualité et d'efficacité de codage, mais sont plus simples à créer (d'après plusieurs artistes ayant utilisé les deux outils) et peuvent être extraites automatiquement d'images bitmap » . La version actuelle de SVG 2 inclut les maillages de dégradés

Découpage, masquage et composition

Les éléments graphiques, notamment le texte, les tracés, les formes de base et leurs combinaisons, peuvent servir de contours pour définir des zones intérieures et extérieures qui peuvent être peintes (avec des couleurs, des dégradés et des motifs) indépendamment. Les tracés de détourage totalement opaques et les masques semi-transparents sont combinés pour calculer la couleur et l'opacité de chaque pixel de l'image finale, grâce au mélange alpha .

Effets de filtre

Un effet de filtre consiste en une série d'opérations graphiques appliquées à une image vectorielle source donnée pour produire un résultat bitmap modifié.

Interactivité

Les images SVG peuvent interagir avec les utilisateurs de multiples façons. Outre les hyperliens mentionnés ci-dessous, toute partie d'une image SVG peut être rendue réceptive aux événements de l'interface utilisateur , tels que les changements de focus , les clics de souris, le défilement ou le zoom de l'image, ainsi que d'autres événements liés au pointeur, au clavier et au document. Les gestionnaires d'événements peuvent démarrer, arrêter ou modifier des animations et déclencher des scripts en réponse à ces événements.

Enchaînement

Les images SVG peuvent contenir des hyperliens vers d'autres documents grâce à XLink . En utilisant l' <view>élément `<svg>` ou un identifiant de fragment , les URL peuvent pointer vers des fichiers SVG qui modifient la zone visible du document. Ceci permet de créer des états d'affichage spécifiques pour zoomer/dézoomer sur une zone précise ou limiter l'affichage à un élément particulier. C'est particulièrement utile pour la création de sprites . La prise en charge de XLink , combinée à l' <use>élément `<svg>`, permet également de créer des liens vers des éléments internes et externes et de les réutiliser. Les développeurs peuvent ainsi optimiser leur code en réduisant le nombre de balises.

Scripting

Tous les aspects d'un document SVG sont accessibles et manipulables par script, de la même manière qu'avec HTML. Le langage de script par défaut est JavaScript et des objets DOM ( Document Object Model ) sont définis pour chaque élément et attribut SVG. Les scripts sont encapsulés dans <script>des éléments `<script>`. Ils peuvent s'exécuter en réponse à des événements de pointeur, de clavier et de document, selon les besoins.

Animation

Le contenu SVG peut être animé à l'aide des éléments d'animation intégrés tels que `<img>` <animate>, ` <img> <animateMotion>` et <animateColor>`<img>`. L'animation du contenu peut être réalisée en manipulant le DOM à l'aide d'ECMAScript et des minuteurs intégrés du langage de script. L'animation SVG a été conçue pour être compatible avec les versions actuelles et futures du langage SMIL (Synchronized Multimedia Integration Language ). Les animations peuvent être continues, en boucle et répétitives, et réagir aux événements de l'utilisateur, comme mentionné précédemment.

Polices de caractères

Comme pour HTML et CSS, le texte en SVG peut faire référence à des fichiers de police externes, tels que les polices système. Si les fichiers de police requis sont absents de la machine où le fichier SVG est rendu, le texte risque de ne pas s'afficher correctement. Pour pallier cette limitation, il est possible d'afficher le texte à l'aide d'une police SVG , où les glyphes nécessaires sont définis en SVG comme une police référencée ensuite par l' <text>élément.

Métadonnées

Conformément à l' initiative Web sémantique du W3C , SVG permet aux auteurs de fournir des métadonnées sur le contenu SVG. La principale fonctionnalité est l' élément `<svg>`, où le document peut être décrit à l'aide des propriétés de métadonnées Dublin Core (par exemple, titre, créateur/auteur, sujet, description, etc.). D'autres schémas de métadonnées peuvent également être utilisés. De plus, SVG définit les éléments `<img>` et `<img>` où les auteurs peuvent également fournir des descriptions textuelles au sein d'une image SVG afin de faciliter l'indexation, la recherche et la récupération par différents moyens. <metadata><title><desc>

Un document SVG peut définir des composants tels que des formes, des dégradés, etc., et les réutiliser. Les images SVG peuvent également contenir des graphiques raster , comme des images PNG et JPEG , et d'autres images SVG.

Ce code produira les formes colorées affichées sur l'image, à l'exception de la grille et des étiquettes :

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width= "391" height= "391" viewBox= "-70.5 -70.5 391 391" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" > <rect fill= "#fff" stroke= "#000" x= "-70" y= "-70" width= "390" height= "390" /> <g opacity= "0.8" > <rect x= "25" y= "25" largeur= "200" hauteur= "200" remplissage= "lime" largeur-trait= "4" trait= "pink" /> <cercle cx= "125" cy= "125" r= "75" remplissage= "orange" /> <polyligne points= "50,150 50,200 200,200 200,100" trait= "red" largeur-trait= "4" remplissage= "none" /> <ligne x1= "50" y1= "50" x2= "200" y2= "200" trait= "blue" largeur-trait= "4" /> </g> </svg>

L'utilisation du format SVG sur le web était limitée par son incompatibilité avec les anciennes versions d' Internet Explorer (IE). De nombreux sites web proposant des images SVG les fournissent également au format raster , soit automatiquement par négociation de contenu HTTP , soit en permettant à l'utilisateur de choisir directement le fichier.

Konqueror a été le premier navigateur à prendre en charge le format SVG avec sa version 3.2, sortie en février 2004. En 2011, tous les principaux navigateurs de bureau, ainsi que de nombreux navigateurs moins connus, offraient une prise en charge du format SVG. L'implémentation dans les autres navigateurs n'était pas encore complète ; pour plus de détails, consultez la comparaison des moteurs de rendu.

Certaines versions antérieures de Firefox (par exemple, les versions entre 1.5 et 3.6 ), ainsi que quelques autres navigateurs Web, désormais obsolètes, capables d'afficher des graphiques SVG, nécessitaient de les intégrer dans des éléments<object> `<img>` ou `<img>` pour les afficher comme faisant partie intégrante d'une page Web HTML, au lieu d'utiliser la méthode standard d'intégration des images avec `<img>` . Cependant, les images SVG peuvent être incluses dans des pages XHTML à l'aide d'espaces de noms XML . <iframe><img>

Tim Berners-Lee , l'inventeur du World Wide Web , a critiqué les premières versions d'Internet Explorer pour leur incapacité à prendre en charge le SVG.

• Opera (depuis la version 8.0) prend en charge la spécification SVG 1.1 Tiny, tandis qu'Opera 9 inclut la prise en charge de SVG 1.1 Basic et une partie de SVG 1.1 Full. Opera 9.5 prend partiellement en charge SVG Tiny 1.2. Il prend également en charge le format SVGZ (SVG compressé).
• Les navigateurs basés sur le moteur de rendu Gecko (tels que Firefox , Flock , Camino et SeaMonkey ) ne prennent en charge que partiellement la spécification SVG 1.1 complète depuis 2005. Le site de Mozilla propose une vue d'ensemble des modules pris en charge par Firefox et de ceux en cours de développement . Gecko 1.9, inclus dans Firefox 3.0 , étend la prise en charge à davantage de fonctionnalités de la spécification SVG (notamment les filtres)
• Pale Moon , qui utilise le moteur de mise en page Goanna (une version dérivée du moteur Gecko ), prend en charge le format SVG.
• Les navigateurs basés sur WebKit (tels que Safari d' Apple , Google Chrome et OmniWeb de The Omni Group ) ont une prise en charge incomplète de la spécification SVG 1.1 Full depuis 2006.
• Amaya prend partiellement en charge le format SVG.
• Internet Explorer 8 et les versions antérieures ne prennent pas en charge le format SVG. IE9 (publié le 14 mars 2011) prend en charge les fonctionnalités SVG de base. IE10 a étendu la prise en charge du format SVG en ajoutant les filtres SVG 1.1.
• Microsoft Edge Legacy prend en charge SVG 1.1.
• Le navigateur cloud Maxthon prend également en charge le format SVG.

La prise en charge native et complète présente plusieurs avantages : aucun plugin n’est nécessaire, le SVG peut être librement mélangé à d’autres contenus dans un même document, et le rendu et le script deviennent considérablement plus fiables.

La prise en charge du format SVG peut se limiter à SVGT sur les smartphones plus anciens ou moins performants, ou être principalement limitée par leur système d'exploitation respectif. Adobe Flash Lite prend en charge SVG Tiny en option depuis la version 1.1. Lors de la conférence SVG Open 2005, Sun a présenté une implémentation mobile de SVG Tiny 1.1 pour la plateforme CLDC ( Connected Limited Device Configuration ).

Les appareils mobiles utilisant Opera Mobile , ainsi que le navigateur intégré de l'iPhone , prennent également en charge le format SVG. Cependant, bien qu'utilisant le moteur WebKit , le navigateur intégré d'Android ne prenait pas en charge le format SVG avant la version 3.0 (Honeycomb). Avant la version 3.0, Firefox Mobile 4.0b2 (bêta) pour Android était le premier navigateur fonctionnant sous Android à prendre en charge le format SVG par défaut.

Le niveau de prise en charge de SVG Tiny varie d'un appareil mobile à l'autre, selon le moteur SVG installé. De nombreux appareils mobiles récents prennent en charge des fonctionnalités supplémentaires par rapport à SVG Tiny 1.1, comme les dégradés et l'opacité ; on parle parfois de « SVGT 1.1+ », bien qu'il n'existe pas de norme établie à ce sujet.

Le BlackBerry de RIM intègre la prise en charge de SVG Tiny 1.1 depuis la version 5.0. La prise en charge se poursuit pour le navigateur BlackBerry Torch basé sur WebKit dans les systèmes d'exploitation 6 et 7.

La plateforme S60 de Nokia intègre la prise en charge du format SVG. Par exemple, les icônes sont généralement rendues à l'aide du moteur SVG de la plateforme. Nokia a également piloté le groupe d'experts JSR 226 : API graphique vectorielle 2D évolutive, qui définit l'API Java ME pour la présentation et la manipulation des fichiers SVG. Cette API est implémentée dans la plateforme S60 3e édition, Feature Pack 1 et versions ultérieures. Certains téléphones de la série 40 prennent également en charge le format SVG (comme le Nokia 6280 ).

La plupart des téléphones Sony Ericsson, à partir du modèle K700 (par ordre de sortie), prennent en charge SVG Tiny 1.1. Les téléphones à partir du modèle K750 prennent également en charge des fonctionnalités telles que l'opacité et les dégradés. Les téléphones équipés de la plateforme Java 8 de Sony Ericsson sont compatibles avec JSR 226.

Windows Phone prend en charge le format SVG depuis la version 7.5.

Le format SVG est également pris en charge par divers appareils mobiles de Motorola , Samsung , LG et Siemens mobile / BenQ-Siemens . eSVG, une bibliothèque de rendu SVG principalement conçue pour les systèmes embarqués , est disponible sur certaines plateformes mobiles.

Les images SVG peuvent être créées manuellement ou à l'aide d'un logiciel de dessin vectoriel, tel qu'Inkscape , Adobe Illustrator , Adobe Animate ou CorelDRAW , puis converties en formats d'images raster courants, comme le PNG, grâce au même logiciel. De plus, des éditeurs comme Inkscape et Boxy SVG proposent des outils permettant de vectoriser les images raster à l'aide de courbes de Bézier , généralement grâce à des moteurs de vectorisation d'images tels que potrace , autotrace et imagetracerjs.

Il est possible de programmer des logiciels pour afficher des images SVG à l'aide d'une bibliothèque telle que librsvg , utilisée par GNOME depuis 2000, ou par Batik et ThorVG depuis 2020 pour les systèmes légers. Les images SVG peuvent également être converties dans n'importe quel format d'image courant grâce à ImageMagick , un utilitaire en ligne de commande gratuit (qui utilise également librsvg en interne).

Pour les applications web, le mode d'utilisation appelé SVG intégré permet d'incorporer du contenu SVG dans un document HTML à l'aide d'une <svg>balise `<svg>`. Ses capacités graphiques peuvent alors être exploitées pour créer des interfaces utilisateur sophistiquées, car le SVG et le HTML partagent le même contexte, la même gestion des événements et les mêmes styles CSS.

Parmi les autres utilisations du format SVG, on peut citer son intégration dans les logiciels de traitement de texte (par exemple, LibreOffice ) et de PAO (par exemple, Scribus ), la création de graphiques (par exemple, gnuplot ) et l'importation de tracés (par exemple, pour une utilisation dans GIMP ou Blender ). Les services applicatifs Microsoft 365 et Microsoft Office 2019 prennent en charge l'exportation, importation et la modification d'images SVG. L' identificateur de type uniforme (UTI) utilisé par Apple est ` public.svg-imagevsv` et public.image`vsv` public.xml.

En tant que format de document, similaire au HTML, le SVG peut contenir des scripts ou du CSS. Cela pose problème lorsqu'un attaquant télécharge un fichier SVG, comme une photo de profil, sur un site web et que ce fichier est traité comme une image normale, alors qu'il contient un contenu malveillant. Par exemple, si un fichier SVG est utilisé comme image de fond CSS, logo, image de fond sur un site web ou dans une galerie d'images, son chargement dans un navigateur active un script ou un autre contenu. Ceci peut bloquer le navigateur ( attaque du « Billion laughs » ), mais aussi permettre des injections HTML et des attaques de type cross-site scripting (XSS ). Le W3C définit donc certaines exigences lorsque le SVG est utilisé uniquement pour les images : la sécurité SVG.

Le W3C indique que les SVG intégrés (fichiers SVG chargés nativement sur un site web) présentent moins de risques pour la sécurité car leur contenu fait partie d'un document plus vaste, et que la présence de scripts et de CSS n'est donc pas inattendue.

La norme MPEG-4 Partie 20 – Lightweight Application Scene Representation (LASeR) et Simple Aggregation Format (SAF) – est basée sur SVG Tiny. Elle a été développée par le MPEG ( ISO/IEC JTC 1 /SC29/WG11) et publiée sous la référence ISO/IEC 14496-20:2006. Les capacités de SVG sont améliorées dans la norme MPEG-4 Partie 20 grâce à des fonctionnalités clés pour les services mobiles, telles que les mises à jour dynamiques, l'encodage binaire et une représentation des polices de pointe. SVG a également été intégré à la norme MPEG-4 Partie 11 , au format Extensible MPEG-4 Textual (XMT) – une représentation textuelle du contenu multimédia MPEG-4 utilisant XML .

Bien que le format SVG ait été largement adopté sur le marché comme norme de facto pour les graphiques vectoriels évolutifs, les fichiers ne sont toujours pas pris en charge nativement par Windows, les utilisateurs doivent donc télécharger un outil de prévisualisation SVG pour l'explorateur de fichiers ou utiliser un autre explorateur de fichiers avec prise en charge native.