Qu'est-ce que le SVG ? Guide du format vectoriel

Le SVG est un format d'image composé d'instructions de dessin plutôt que de pixels. Lorsqu'un logo, une icône ou un graphique est enregistré en SVG, le fichier contient des commandes du type « trace une courbe de ce point à ce point et remplis-la de cette couleur ». C'est pourquoi le SVG reste net à toutes les tailles, pèse souvent très peu et peut s'ouvrir et se modifier dans un éditeur de texte. Cet article présente la place du SVG parmi les standards du W3C, la structure du fichier, sa prise en charge par les navigateurs et les logiciels, ses risques de sécurité et la conversion entre SVG et PNG ou JPG.

Qu'est-ce que le SVG ?

Le SVG (Scalable Vector Graphics) est un standard du W3C fondé sur XML qui décrit des graphismes vectoriels en deux dimensions. Son extension est .svg et son type MIME image/svg+xml. Une variante compressée en gzip utilise l'extension .svgz.

Les formats matriciels (JPG, PNG, WebP) stockent une image sous forme de grille fixe de pixels ; quand on l'agrandit, les pixels deviennent visibles. Le SVG décrit les formes de manière mathématique, et le navigateur ou le logiciel les redessine à la résolution de l'écran, quelle qu'elle soit. Le guide des formats d'image de MDN qualifie le SVG de choix idéal pour les images qui peuvent être représentées par des commandes de dessin, en particulier quand la taille d'affichage est inconnue ou variable, et précise qu'il n'est généralement pas adapté aux photos.

Historique : SVG 1.0, 1.1 et SVG 2

• 4 septembre 2001 : le SVG 1.0 est publié en tant que Recommandation du W3C.
• 14 janvier 2003 : le SVG 1.1 devient Recommandation. La version 1.1 découpe le langage en modules, ce qui facilite la définition de sous-ensembles comme les profils mobiles.
• 16 août 2011 : publication du SVG 1.1 Second Edition. C'est la version stable sur laquelle s'appuient aujourd'hui les navigateurs.
• SVG 2 : selon l'historique des publications du W3C, des brouillons de travail paraissent à partir de 2012 et le premier Candidate Recommendation Snapshot est publié le 15 septembre 2016. Le dernier snapshot est daté du 6 octobre 2026 ; le document en est toujours au stade de Candidate Recommendation.

Le SVG 2 s'appuie sur le SVG 1.1 Second Edition et vise une meilleure intégration avec HTML et CSS. Certains sujets, comme les filtres, le masquage et les polices, ont été déplacés dans des modules CSS et FX distincts. Dans la pratique, les navigateurs n'implémentent qu'une partie du SVG 2 : ne partez donc pas du principe que chaque fonctionnalité marche partout.

Structure d'un fichier SVG

Un fichier SVG simple ressemble à ceci :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Système de coordonnées : viewBox, width et height

viewBox définit le système de coordonnées interne du dessin (de 0 à 100 ici). width et height fixent la place occupée par le dessin sur la page. Un SVG doté d'un viewBox s'adapte proportionnellement à n'importe quelle taille définie en CSS. Les fichiers sans viewBox peuvent être rognés lors d'un redimensionnement : c'est l'une des erreurs les plus fréquentes sur les logos.

Éléments de base

• Formes : rect, circle, ellipse, line, polyline, polygon et path, qui permet de tout dessiner.
• Texte : text et tspan. Le texte reste sélectionnable et indexable, mais si la police manque sur l'appareil de lecture, une police de remplacement est utilisée.
• Regroupement et réutilisation : g, defs, symbol, use. Les jeux d'icônes sont souvent regroupés dans un seul fichier sous forme d'éléments symbol.
• Remplissage : couleurs unies, dégradés linéaires et radiaux, motifs, tracés de détourage, masques et filtres (flou, ombre portée).
• Style et animation : le CSS peut styliser le SVG ; les animations CSS et les éléments d'animation SMIL ajoutent du mouvement.
• Contenu intégré : image pour les images matricielles, foreignObject pour le HTML et script pour le JavaScript.

Couleurs, transparence, calques et pages

La transparence est native en SVG : tout ce qui n'est pas dessiné est vide, et opacity et fill-opacity définissent la semi-transparence. Les calques sont représentés par des groupes g ; Inkscape et Illustrator enregistrent leurs calques de cette façon. Les couleurs sont en sRGB par défaut, et il n'existe pas de limite de profondeur de couleur au sens habituel, puisque les couleurs sont écrites sous forme de nombres. Le SVG n'est pas un format de document multipage ; pour des dessins sur plusieurs pages, le PDF convient mieux.

Prise en charge par les navigateurs, les systèmes et les logiciels

Selon MDN, Chrome, Edge, Firefox, Opera et Safari prennent tous en charge le SVG. On peut l'utiliser via <img>, comme background-image en CSS, directement dans le HTML, ou avec <object> et <iframe>. Les outils vectoriels comme Inkscape, Adobe Illustrator, Affinity Designer et Figma lisent et écrivent le SVG, et les versions actuelles de Microsoft Office permettent d'insérer des graphismes SVG.

Ailleurs, la prise en charge est faible : de nombreux réseaux sociaux, clients de messagerie, applications de messagerie instantanée et formulaires d'envoi refusent le SVG ou n'en affichent pas d'aperçu. Cela tient en partie au risque de sécurité décrit ci-dessous.

Sécurité : traitez le SVG comme un document

Le SVG est un document XML et peut contenir un élément script, des attributs d'événement (comme onload) et des références externes. La page « SVG as an image » de MDN explique que lorsqu'un SVG est utilisé via <img> ou en arrière-plan CSS, les navigateurs désactivent le JavaScript et ne chargent pas les ressources externes comme les images ou les feuilles de style. Ces restrictions ne s'appliquent pas lorsque le fichier est ouvert directement ou intégré avec <iframe>, <object> ou <embed>.

Conséquence pratique : si un site permet à ses utilisateurs d'envoyer des fichiers SVG et les sert directement depuis son propre domaine, un script intégré au fichier peut s'exécuter dans le contexte de ce site (XSS stockée). Les parades habituelles :

• Faire passer les SVG reçus par un outil de nettoyage qui supprime script, les attributs d'événement, foreignObject et les liens externes.
• Servir les fichiers des utilisateurs depuis un domaine séparé, avec une Content-Security-Policy stricte, ou en téléchargement (Content-Disposition: attachment).
• Si vous n'avez pas besoin du vectoriel, convertir les SVG reçus en PNG sur le serveur et ne publier que la version matricielle.

Usages courants

• Logos et éléments de marque : un seul fichier reste net de la carte de visite au panneau d'affichage.
• Icônes d'interface : on peut les colorer en CSS et elles ne sont jamais floues sur les écrans haute densité.
• Graphiques, cartes et diagrammes : des bibliothèques comme D3.js dessinent les données directement dans des éléments SVG.
• Favicons : les navigateurs actuels acceptent les favicons SVG via <link rel="icon" type="image/svg+xml">.
• Découpe et impression : les découpeuses laser, les plotters de découpe vinyle et les machines à broder travaillent avec des tracés vectoriels.

Points forts et points faibles

Problèmes courants et solutions

Un site ou une application refuse le SVG

Le plus simple est d'en faire une copie PNG. Notre convertisseur SVG en PNG transforme le dessin en PNG transparent dans votre navigateur, à la largeur en pixels de votre choix. Votre fichier n'est pas envoyé et ne quitte jamais votre appareil.

Le texte s'affiche dans une autre police

Par défaut, le SVG n'intègre pas les polices ; si le système de lecture ne dispose pas de la police, une police de remplacement est utilisée. Dans un contexte d'image, les polices externes ne sont pas chargées non plus. Vectorisez le texte (conversion en contours) dans votre outil de conception, ou intégrez la police.

Le SVG n'a pas la bonne taille ou est rogné sur la page

Sans viewBox, ou avec des valeurs width/height fixes, le redimensionnement ne se comporte pas comme prévu. Ajoutez à l'élément racine svg un viewBox qui couvre tout le dessin et définissez la taille en CSS.

Le fichier est plus lourd que prévu

Les outils de conception écrivent dans le SVG des métadonnées d'éditeur, des décimales superflues et des calques masqués. Un optimiseur comme SVGO les supprime. Une compression gzip ou Brotli côté serveur réduit encore la taille du SVG, qui est un format texte.

J'ai besoin de mon logo PNG en SVG

Une image matricielle ne peut pas vraiment être « convertie » en vectoriel ; ce que font les outils, c'est de la vectorisation par tracé : les formes sont détectées puis redessinées sous forme de contours. Nos outils PNG en SVG et JPG en SVG vectorisent avec 2 à 8 couleurs. Le résultat est bon pour les logos et dessins simples, approximatif pour les photos. Avec ces outils, le fichier est envoyé sur nos serveurs via une connexion sécurisée, vectorisé sur place puis supprimé au plus tard sous 30 minutes.

Conseils de conversion

• Connaître la taille cible : pour convertir un SVG en PNG, choisissez la plus grande taille à laquelle l'image sera affichée, doublée pour les écrans haute densité. Dans notre outil, le plus grand côté peut atteindre 4096 pixels ; si vous laissez la largeur vide, les petits dessins sont mis à l'échelle pour que le plus grand côté fasse 1024 pixels.
• Du JPG pour les contenus photographiques : si le SVG intègre une photo et que vous n'avez pas besoin de transparence, le JPG ou le WebP sera plus léger que le PNG ; vous pouvez ensuite convertir le PNG dans le convertisseur d'images.
• Favicons : si votre logo est un SVG, le générateur de favicon l'accepte et ajoute icon.svg au paquet.
• Une source propre pour la vectorisation : pour créer un SVG à partir d'un PNG, partez d'une image en haute résolution, aux couleurs franches et sans bruit.

Questions fréquentes

Quelle est la différence entre le SVG et le PNG ?

Un PNG compte un nombre fixe de pixels et devient flou quand on l'agrandit. Un SVG décrit des formes et se redessine nettement à toutes les tailles. Le SVG convient aux logos et aux icônes ; le PNG ou le JPG aux photos et aux captures d'écran.

Un fichier SVG peut-il contenir un virus ?

Le SVG n'est pas un programme exécutable, mais il peut intégrer du JavaScript. Les scripts ne s'exécutent pas quand le SVG est affiché comme image (<img>), mais ils peuvent s'exécuter si le fichier est ouvert directement dans un navigateur. Examinez les SVG de provenance inconnue dans une visionneuse, ou convertissez-les en PNG, plutôt que de les ouvrir directement.

Peut-on insérer un SVG dans Word ou PowerPoint ?

Les versions actuelles de Microsoft Office permettent d'insérer des SVG. Pour les versions plus anciennes, ou si vous partagez le fichier avec d'autres logiciels, une copie PNG est plus sûre.

Convertir un SVG en PNG fait-il perdre en qualité ?

Le PNG est sans perte, mais le dessin est figé à une taille en pixels. Choisissez une largeur suffisante et vous ne remarquerez aucune perte ; en revanche, agrandir le PNG par la suite le rendra flou.

Le SVG gère-t-il l'animation ?

Oui. Le mouvement peut provenir des animations CSS, des éléments d'animation SMIL et du JavaScript. Une conversion en PNG ne donne qu'une seule image.

Sources

• W3C : Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C : Scalable Vector Graphics (SVG) 1.0 Specification
• W3C : Scalable Vector Graphics (SVG) 2
• W3C : historique des publications du SVG 2
• MDN : SVG as an image
• MDN : Image file type and format guide