Format SVG : tout savoir sur le Scalable Vector Graphics
Guide complet du format SVG — .svg — Cree en 2001 par W3C (World Wide Web Consortium)
Qu'est-ce que le format SVG ?
Le format SVG (Scalable Vector Graphics) est fondamentalement different de tous les autres formats d'image. Alors que le JPEG, le PNG, le WebP et les autres formats stockent des images sous forme de grilles de pixels (images raster), le SVG decrit des images sous forme de formes geometriques definies par du code XML.
Cree en 2001 par le W3C (World Wide Web Consortium), le SVG permet de definir des lignes, des courbes, des rectangles, des cercles, du texte et des chemins complexes via un langage de balisage lisible par un humain. Cette approche vectorielle offre un avantage decisif : un SVG peut etre agrandi a l'infini sans aucune perte de qualite, contrairement aux images raster qui deviennent floues et pixelisees.
C'est pourquoi le SVG est le format de choix pour les logos, les icones, les illustrations simples et tous les elements graphiques qui doivent s'adapter a differentes tailles d'ecran (responsive design). Un logo en SVG sera parfaitement net sur un ecran de smartphone comme sur un ecran 4K de bureau, sans avoir besoin de fournir plusieurs versions en differentes resolutions.
Le SVG possede egalement des capacites interactives uniques : on peut le styler avec du CSS, l'animer avec CSS ou SMIL, et le manipuler avec JavaScript. C'est a la fois un format d'image et un langage de programmation graphique, ce qui le rend extremement puissant pour le design web moderne.
Fiche technique du format SVG
| Nom complet | Scalable Vector Graphics |
| Extension | .svg |
| Annee de creation | 2001 |
| Createur | W3C (World Wide Web Consortium) |
| Type | Image vectorielle |
| Compression | Sans perte (lossless) |
| Transparence | Oui |
| Animation | Oui |
| Couleurs | Illimité (défini par code, pas par pixels) |
| Taille typique | 1 à 50 Ko pour un logo, potentiellement plus pour des illustrations complexes |
| Support navigateurs | Tous les navigateurs modernes. Support natif universel. |
Avantages du format SVG
- +Redimensionnement infini sans perte : un SVG reste parfaitement net quelle que soit la taille d'affichage. Ideal pour le responsive design ou une meme image doit fonctionner du mobile au 4K.
- +Fichiers ultra-legers pour les graphiques simples : un logo en SVG pese typiquement 1 a 10 Ko, contre 10 a 100 Ko en PNG. Moins de poids = chargement plus rapide.
- +Modifiable avec CSS et JavaScript : vous pouvez changer les couleurs, animer les elements, ajouter de l'interactivite directement depuis le code de votre page web.
- +Responsive natif : un SVG s'adapte automatiquement a son conteneur sans aucune perte de qualite. Parfait pour les mises en page fluides.
- +Indexable par les moteurs de recherche : le SVG etant du code XML, les moteurs de recherche peuvent en lire et indexer le contenu textuel.
Inconvenients du format SVG
- -Totalement inadapte aux photographies : le SVG ne peut pas representer efficacement les millions de nuances d'une photo. Le fichier resultant serait astronomiquement volumineux.
- -Complexite technique : creer un SVG optimise necessite des connaissances techniques ou un logiciel specialise (Illustrator, Inkscape, Figma). Ce n'est pas aussi simple que d'enregistrer une photo.
- -Illustrations complexes = fichiers lourds : un SVG avec des milliers de chemins complexes peut devenir plus lourd qu'une image raster equivalente.
- -Risques de securite : le SVG pouvant contenir du JavaScript, un fichier SVG malveillant peut potentiellement executer du code. Les SVG uploades par les utilisateurs doivent etre sanitises.
- -Rendu variable entre navigateurs : les SVG tres complexes (filtres, masques, animations) peuvent s'afficher differemment selon les navigateurs.
Quand utiliser le format SVG ?
- • Logos de sites web et d'applications : un logo en SVG est net a toutes les tailles, modifiable en CSS et ultra-leger. C'est le standard pour les logos web.
- • Icones et elements d'interface (UI) : les icon sets comme Lucide, Heroicons ou Font Awesome utilisent le SVG pour des icones nettes a toutes les resolutions.
- • Infographies et graphiques : diagrammes, graphiques, schemas, cartes — tout ce qui est base sur des formes geometriques est mieux rendu en SVG.
- • Animations web : les animations SVG (via CSS ou SMIL) sont legeres, fluides et ne necessitent pas de fichier video.
Comment fonctionne le format SVG ?
Le SVG est un langage de balisage XML qui definit des graphiques 2D. Le format dispose de plusieurs types d'elements :
Les formes primitives (rect, circle, ellipse, line, polyline, polygon) permettent de creer des formes de base avec des attributs simples (position, taille, couleur). Les chemins (path) utilisent un mini-langage de commandes (M pour deplacer, L pour ligne droite, C pour courbe de Bezier cubique, Q pour quadratique, A pour arc, Z pour fermer) qui permet de dessiner n'importe quelle forme.
Le SVG supporte les transformations geometriques (translate, rotate, scale, skew), les degradees (lineaire et radial), le clipping, le masquage, les filtres (flou, ombre, etc.) et le texte avec polices personnalisees. Les animations peuvent etre definies via des elements SMIL integres au SVG ou manipulees via CSS transitions/animations et JavaScript.
Le SVG peut etre integre dans une page web de plusieurs facons : inline dans le HTML, via une balise img, en background CSS ou via un element object/iframe.
SVG vs autres formats
Decouvrez nos comparatifs detailles pour choisir le bon format selon vos besoins :
Convertir depuis ou vers SVG
Utilisez nos outils gratuits pour convertir vos fichiers SVG :
Questions frequentes sur le format SVG
Quand utiliser SVG plutot que PNG ?
Utilisez le SVG pour les logos, icones, illustrations simples et tout graphique vectoriel. Utilisez le PNG pour les photos, captures d'ecran et images raster complexes.
Comment creer un fichier SVG ?
Utilisez un editeur vectoriel comme Adobe Illustrator, Inkscape (gratuit), Figma ou Canva. Vous pouvez aussi ecrire du SVG directement en code XML dans un editeur de texte.
Comment convertir un PNG en SVG ?
Utilisez notre outil de vectorisation sur heictojpg.fr/convertir-png-en-svg. L'outil trace automatiquement les contours de votre image pour creer un SVG. Le resultat depend de la simplicite de l'image source.
Le SVG est-il bon pour le SEO ?
Oui, le SVG est excellent pour les performances web (fichiers legers = chargement rapide). De plus, le texte dans un SVG est lisible et indexable par les moteurs de recherche.
Formats similaires
Besoin de convertir vos fichiers SVG ?
Plus de 50 outils gratuits de conversion et d'edition d'images, sans inscription.
Voir tous les outils