Format de fichier SVG
Un SVG n'est pas une image mais un jeu d'instructions de dessin écrites en XML : il reste parfaitement net à n'importe quelle taille et se modifie dans un éditeur de texte.
ou glissez-les ici · images, vidéo, audio et documents · jusqu'à 2 Go
Qu'est-ce que SVG ?
SVG est devenu recommandation du W3C en 2001 et, sous le capot, c'est du texte brut. Au lieu d'une grille de pixels, il enregistre des formes : ce tracé, cette épaisseur de trait, cette couleur de remplissage, ces coordonnées. Le navigateur exécute ces instructions à la taille demandée par la mise en page, et c'est pourquoi un logo en SVG est impeccablement net sur un téléphone, sur un écran 5K et sur une affiche imprimée, à partir des mêmes quelques kilo-octets.
Être du texte a des conséquences au-delà de la mise à l'échelle. Un SVG produit des différences lisibles dans Git, les changements de design se relisent donc ligne à ligne. Ses éléments se stylent en CSS et s'animent ou se manipulent en JavaScript comme n'importe quel nœud du DOM. Et il se compresse si bien en gzip qu'un jeu d'icônes complexe coûte souvent moins de bande passante qu'un seul sprite PNG.
Cette même ouverture pose une question de sécurité. Comme SVG peut contenir des éléments <script>, des références externes et des gestionnaires d'événements, un fichier envoyé par un utilisateur et servi depuis votre domaine devient un vecteur de cross-site scripting. Tout ce qui vient de l'extérieur doit être assaini ou servi depuis une origine séparée, précaution qu'aucun format matriciel n'exige.
| Extension | .svg |
|---|---|
| Catégorie | Image |
| Type MIME | image/svg+xml |
| Année de sortie | 2001 |
| Développé par | W3C |
| Compression | Vectoriel (pas de compression pixel) |
| Transparence | Oui |
| Animation | Oui |
SVG : questions fréquentes
- Pourquoi mon SVG affiche-t-il la mauvaise police ?
- Parce que le fichier référence une police par son nom et suppose que le lecteur la possède. Si elle manque, le moteur de rendu en substitue une autre et la mise en page se décale. Convertissez le texte en courbes avant l'export, ou incorporez la police, et le dessin devient autonome.
- Puis-je convertir un JPEG ou un PNG en SVG ?
- Uniquement par vectorisation, qui est une approximation et non une conversion. Les vectoriseurs détectent les contours et y ajustent des courbes, ce qui fonctionne bien pour les logos et le dessin au trait. Les photographies ressortent en milliers de taches mal ajustées : plus lourdes que l'original et moins belles.
- Pourquoi un SVG n'apparaît-il pas dans Photoshop ou Word ?
- Beaucoup d'éditeurs matriciels et de suites bureautiques anciennes rastérisent le fichier à l'import ou le refusent purement et simplement, et la prise en charge des filtres, masques et polices incorporées est inégale. Exporter un PNG à la taille réellement nécessaire est le moyen fiable de confier du vectoriel à ces outils.
- Est-il sûr d'accepter des envois SVG d'utilisateurs ?
- Pas sans assainissement. SVG peut porter du JavaScript, des gestionnaires d'événements et des références externes : un fichier malveillant servi depuis votre domaine exécute du script dans la session de vos utilisateurs. Retirez le scriptage avec un assainisseur, ou servez le contenu utilisateur depuis une origine distincte.
- Comment alléger un fichier SVG ?
- Passez-le dans un optimiseur comme SVGO : les éditeurs laissent des calques masqués, leurs propres métadonnées, une précision de coordonnées absurde et des définitions inutilisées. Arrondir les coordonnées à une ou deux décimales et fusionner les tracés divise souvent le fichier par deux sans changement visible, et gzip côté serveur fait le reste.
- Des icônes en SVG ou en PNG ?
- En SVG dans presque tous les cas. Un seul fichier couvre toutes les densités d'écran sans exports @2x et @3x distincts, les couleurs se changent en CSS, et le poids est généralement moindre. Ne prenez PNG que là où le SVG n'est pas rendu, comme les clients de messagerie et certaines applications héritées.