Qu’est-ce qu’un fichier SVG ?

SVG est un format texte que n’importe quel éditeur ouvre. Il stocke des formes et des coordonnées plutôt que des pixels, donc il reste net à n’importe quelle taille — un logo porté à la taille d’une affiche ne perd rien. Il est utilisé pour le web, les logos et le dessin au trait et la retouche.

L’extension est .svg et le nom complet Scalable Vector Graphics. L’un et l’autre comptent moins que ce que le fichier peut contenir, et c’est le sujet du reste de cette page.

W3C l’a publié en 2001. La spécification est SVG 1.1.

L’âge est utile à connaître pour une raison pratique : plus un format est ancien, plus les programmes ont eu le temps de l’apprendre.

Elle est publiée intégralement : n’importe qui peut l’implémenter à partir du document plutôt qu’en l’observant, et c’est pourquoi ce format apparaît dans tant de programmes et pourquoi des fichiers écrits il y a vingt ans s’ouvrent encore. Une spécification publiée n’est pas pour autant libre de redevances : quand un format enveloppe un codec, les brevets sont une question à part, que la norme ne tranche pas.

SVG enregistre son contenu à l’identique. Le réenregistrer ne change rien : vous pouvez l’ouvrir, le modifier et le réenregistrer autant de fois que vous voulez sans accumuler de dégâts, et c’est ce qui en fait un format de travail plutôt qu’un format de livraison.

SVG porte une couche alpha : un logo garde ses bords doux par-dessus ce qui se trouve derrière, au lieu d’arriver dans un carré blanc.

SVG peut enregistrer une animation plutôt qu’une image fixe. C’est bon à savoir avant de convertir : une cible qui ne tient qu’une image garde la première et laisse tomber le reste, le plus souvent sans le dire.

Il peut travailler en RVB.

Huit bits par canal, c’est ce qu’affiche un écran et ce que porte à peu près tout format de livraison.

SVG range séparément les parties d’une image au lieu de les fondre ensemble, et c’est ce qui en fait un fichier de travail. À peu près tous les formats vers lesquels il se convertit les fondent, et la fusion est sans retour : gardez l’original avec ses calques.

Inkscape, Adobe Illustrator et Figma le lisent, comme la plupart des programmes du même genre.

Quand un fichier ne s’ouvre pas, le format est rarement en cause : le plus souvent, c’est le programme qui est plus ancien que lui. Convertir vers quelque chose de plus ancien est le contournement fiable, et c’est à cela que sert le reste de ce site.

Tous les navigateurs actuels le lisent.

Vous pouvez donc le poser sur une page ou l’attacher à un message sans vous demander ce que le destinataire a installé.

SVG est fait pour être ouvert et modifié. Gardez le fichier dans ce format tant que le travail dure, et exportez depuis lui chaque fois qu’une version finie est nécessaire.

Un SVG est un document XML. Ouvrez-en un dans un éditeur de texte et vous y trouvez des instructions lisibles : dessine un cercle à ces coordonnées avec ce rayon, remplis ce chemin avec cette couleur, place ce texte à cette position. Il n’y a pas un seul pixel dans le fichier.

Cette seule propriété le distingue de tous les autres formats d’image. Il peut être comparé dans un système de gestion de versions, édité à la main, généré par un script, compressé par le même gzip qui compresse HTML, et fouillé. Cela veut aussi dire qu’un SVG cassé se diagnostique en général en le lisant, ce qui n’est pas vrai d’un PNG corrompu.

Le fichier décrit des formes plutôt qu’une grille de valeurs de couleur, donc le moteur de rendu les redessine à la taille demandée. Un logo affiché à 24 pixels sur une barre d’adresse et imprimé à un mètre de large sur une façade vient du même fichier et est exact aux deux tailles.

C’est pourquoi SVG est la bonne réponse pour les logos, les icônes, les diagrammes et les graphiques, et la mauvaise pour les photographies. Une photographie n’a pas de formes à décrire — la convertir en SVG produit soit un fichier énorme de rectangles colorés, soit une approximation postérisée, et ni l’un ni l’autre n’est ce que quiconque voulait.

Deux attributs décident du comportement d’un SVG dans une mise en page. `width` et `height` lui donnent une taille intrinsèque ; `viewBox` définit le système de coordonnées dans lequel les formes sont dessinées. Avec un viewBox présent, le dessin se met à l’échelle de la boîte que la page lui donne.

Quasiment toute plainte à propos d’un SVG qui apparaît à la mauvaise taille remonte à cela. Un fichier avec des dimensions fixes et sans viewBox ignore le dimensionnement CSS et reste à la taille qu’a écrite l’outil de conception. Ajouter un viewBox qui correspond au dessin est en général un correctif d’une ligne et c’est ce qui transforme un fichier exporté en ressource utilisable.

Un SVG qui contient du texte référence ses polices par leur nom, exactement comme le fait une page web. Sur une machine qui n’a pas la police, le moteur de rendu en substitue une autre, les largeurs de lettres changent, et un mot-logo soigneusement positionné se décale ou déborde de ses formes.

La défense standard consiste à convertir le texte en chemins, ce qui transforme chaque lettre en contour. Cela garantit l’apparence partout et rend le texte définitivement non éditable et non cherchable. Pour un logo, c’est le bon compromis ; pour un graphique avec des étiquettes d’axe ou un diagramme à maintenir, ce n’est pas le cas, et garder une version en texte vivant à côté vaut le second fichier.

Quand un SVG est écrit directement dans le HTML plutôt que chargé par une balise `<img>`, ses éléments deviennent partie de la page. Le CSS peut recolorer un chemin au survol, une feuille de style peut adapter une icône au mode sombre, et JavaScript peut animer des pièces individuelles.

Chargé via `<img>` ou en arrière-plan CSS, rien de tout cela ne s’applique — le SVG est rendu en isolation et la page ne peut pas y pénétrer. Cette distinction décide quelle technique utiliser, et c’est pourquoi le même fichier peut être stylable à un endroit d’un site et inerte à un autre.

Parce que c’est un document plutôt qu’une image, un SVG peut contenir des éléments `<script>`, des références externes et des liens. Servi depuis votre propre domaine et ouvert directement, ce script s’exécute avec les privilèges de votre site — ce qui est un vecteur de cross-site scripting qu’aucun PNG ne porte.

C’est pourquoi de nombreux formulaires d’envoi refusent les SVG en bloc, et pourquoi un site qui en accepte depuis l’extérieur devrait les assainir plutôt que leur faire confiance. Cela vaut aussi la peine d’être su en tant que destinataire : un SVG d’origine inconnue est plus proche d’un fichier HTML que d’une image, et l’ouvrir dans un navigateur n’est pas l’acte neutre qu’il a l’air d’être.

Illustrator, Figma, Sketch et Inkscape écrivent beaucoup de fioritures : métadonnées d’éditeur, noms de calques, groupes vides, coordonnées à seize décimales, et définitions que rien ne référence. Une icône qui devrait faire 800 octets en fait couramment huit kilo-octets.

Les optimiseurs retirent tout cela sans changer ce qui est dessiné, et des réductions de 60 à 80 % sont ordinaires. Le format se compresse aussi bien sur le fil parce que c’est du texte — un serveur qui envoie en gzip ou brotli le rétrécit à nouveau — ce qui est pourquoi un jeu d’icônes SVG bien préparé est souvent plus petit qu’un seul PNG.

Un SVG peut embarquer une bitmap en URI base64, et certains chemins d’export le font sans le dire — une forme avec un effet que le format ne peut pas exprimer (ombre complexe, flou gaussien, motif non reproductible) est aplatie en image et emballée dans un SVG.

Le résultat est un fichier avec l’extension `.svg` qui ne se met pas à l’échelle, parce que ce qu’il y a à l’intérieur est une grille fixe de pixels. Si un SVG devient flou quand on l’agrandit, c’est presque toujours la raison, et le correctif est en amont dans le fichier de conception plutôt que dans l’export.