Guide
Format SVG : qu'est-ce qu'un fichier SVG ?
SVG signifie Scalable Vector Graphics, soit graphiques vectoriels adaptables. Un fichier SVG décrit une image avec des formes et des coordonnées plutôt qu'avec des pixels : il reste net à toutes les tailles.
Le format SVG, c'est quoi
Un SVG est un fichier texte écrit en XML. Au lieu d'enregistrer la couleur de chaque pixel, il enregistre des instructions : dessiner un cercle ici, un tracé qui passe par ces points, le remplir avec cette couleur. Votre navigateur ou votre logiciel lit ces instructions et dessine l'image à la taille à laquelle elle est affichée.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Ce fragment est un SVG complet : un cercle vert citron dans une zone de 100 unités sur 100. Comme c'est du texte, un SVG peut être ouvert dans un éditeur de code, faire l'objet d'une recherche, être compressé et modifié à la main.
Le SVG est un standard ouvert du World Wide Web Consortium, publié pour la première fois en 2001 (W3C). Tous les navigateurs récents l'affichent sans module complémentaire.
Fichier SVG : extension et type de média
Les fichiers SVG portent l'extension .svg et le type de média image/svg+xml. Une variante compressée, .svgz, est le même fichier compressé avec gzip. Certains logiciels de machines de découpe et outils de création de polices utilisent aussi le SVG, mais le format reste le même.
À quoi sert le format SVG
- Logos et icônes sur les sites et les applications, car un seul fichier reste net sur tous les écrans, quelle que soit leur densité.
- Illustrations, graphiques et cartes qu'il faut pouvoir zoomer ou imprimer en grand.
- Animations et graphismes interactifs, puisque chaque forme peut être stylée en CSS ou modifiée en JavaScript.
- Machines de découpe et découpeuses laser, qui suivent les contours des formes.
- Favicons dans les navigateurs récents.
Le SVG ne convient pas aux photos. Une photo est faite de tons continus qui demanderaient des millions de minuscules formes ; le JPG et le WebP l'enregistrent bien plus efficacement.
Comment ouvrir un fichier SVG
N'importe quel navigateur ouvre un SVG : faites glisser le fichier dans une fenêtre Chrome, Firefox, Safari ou Edge. Pour voir le code à côté de l'image, utilisez notre lecteur SVG. Pour modifier le dessin, prenez un éditeur vectoriel comme Inkscape (gratuit), Figma ou Adobe Illustrator. Sous Windows, l'Explorateur de fichiers peut afficher les miniatures SVG avec une extension ; sur Mac, l'aperçu rapide les affiche avec la barre d'espace.
Format SVG ou PNG : les différences
| SVG | PNG | |
|---|---|---|
| Composé de | Formes et coordonnées | Pixels |
| Agrandissement | Net à toutes les tailles | Flou quand on l'agrandit |
| Transparence | Oui | Oui |
| Modifiable comme du texte | Oui | Non |
| Idéal pour | Logos, icônes, schémas | Captures d'écran, images détaillées, endroits qui n'acceptent pas le SVG |
Vous pouvez passer de l'un à l'autre : le convertisseur PNG en SVG transforme les pixels en formes, et le convertisseur SVG en PNG transforme les formes en pixels à la taille de votre choix.