Format SVG, c’est quoi ? Le guide qui va plus loin que la définition
Vous êtes tombé sur l’extension .svg en cherchant un logo, une icône ou en configurant un thème WordPress, et personne ne vous a vraiment expliqué de quoi il s’agit. Le format SVG (Scalable Vector Graphics) est un format d’image vectoriel basé sur le langage XML, qui décrit une image avec des lignes de code plutôt qu’avec des pixels.
Concrètement, un SVG ne « photographie » pas une image, il la décrit mathématiquement : des points, des courbes, des couleurs. Résultat, vous pouvez l’agrandir à l’infini sans jamais voir apparaître le moindre pixel flou. C’est pour cette raison que la quasi-totalité des logos d’entreprise sont livrés en SVG aujourd’hui.
Mais s’arrêter à « c’est un format vectoriel qui ne se pixellise pas » ne vous dit rien de ce qui compte vraiment quand vous gérez un site : comment l’intégrer, quand l’éviter, et surtout un point que la plupart des articles sur le sujet passent sous silence — le risque de sécurité que ce format représente sur WordPress.
SVG vs PNG vs JPEG : ce qui les différencie vraiment
Pour comprendre l’intérêt du SVG, il faut le comparer aux formats matriciels (ou « bitmap ») que sont le PNG, le JPEG et le WebP. Ces derniers stockent une couleur pour chaque pixel de l’image. Plus l’image est grande, plus le fichier est lourd, et plus vous zoomez, plus la qualité se dégrade.
Le SVG fonctionne à l’inverse : il stocke une formule, pas une grille de pixels. Le format est un standard ouvert publié par le W3C, le même organisme qui définit les standards HTML et CSS — ce n’est donc pas une norme propriétaire dépendante d’un éditeur logiciel.
Voici un aperçu comparatif pour clarifier les usages de chaque format.
| Format | Type | Redimensionnement | Cas d’usage typique |
|---|---|---|---|
| SVG | Vectoriel | Illimité, sans perte | Logos, icônes, pictogrammes |
| PNG | Matriciel | Perte de qualité en agrandissant | Images avec transparence, captures d’écran |
| JPEG | Matriciel | Perte de qualité + compression | Photographies |
| WebP | Matriciel | Perte de qualité | Photos optimisées pour le web |
En clair : le SVG est fait pour les formes simples et répétées (logo, icône de panier, pictogramme de service), pas pour une photo de votre équipe ou de vos locaux. Utiliser un SVG pour une photographie n’a aucun sens techniquement, et inversement, un PNG pour un logo est presque toujours une erreur de débutant qui alourdit inutilement le site.
À lire aussi : QA Quality : l’assurance qualité logicielle comme levier de rentabilité
Pourquoi le SVG est-il particulièrement adapté au web ?
Trois raisons expliquent pourquoi les développeurs et les webmasters privilégient ce format dès qu’ils le peuvent.
- Un poids de fichier très réduit : un logo en SVG pèse souvent quelques kilo-octets, contre plusieurs dizaines pour l’équivalent en PNG.
- Une netteté parfaite sur tous les écrans, y compris les écrans Retina ou 4K où un PNG standard paraît flou.
- Un contenu lisible par Google, puisque le fichier est écrit en XML et non « dessiné » en pixels : le moteur de recherche peut techniquement lire le texte contenu dans le SVG.
Sur un site WordPress construit avec un thème comme Newspaper, ce dernier point compte double : chaque kilo-octet économisé sur les images d’en-tête, les icônes de réseaux sociaux ou les pictogrammes de catégorie contribue directement au temps de chargement du site, un critère que Google surveille de près pour le classement.
Comment créer ou obtenir un fichier SVG
Vous n’avez pas besoin d’un logiciel professionnel pour manipuler des SVG au quotidien. Plusieurs options existent selon votre niveau et votre budget.
- Utiliser une bibliothèque d’icônes gratuites : des sites comme Flaticon, Iconscout ou Feather Icons proposent des milliers d’icônes en SVG prêtes à l’emploi.
- Faire vectoriser un logo existant par un graphiste, si vous n’avez que la version JPEG de votre logo actuel.
- Créer soi-même avec un outil comme Figma ou Inkscape (gratuit), qui exportent nativement en
.svg. - Ouvrir un SVG dans un éditeur de texte : contrairement à un PNG, un fichier SVG reste lisible et modifiable avec un simple éditeur, puisqu’il s’agit de code XML.
Un fichier SVG mal exporté peut cependant contenir des métadonnées inutiles (commentaires, calques cachés, styles redondants) qui alourdissent le fichier sans raison. Un outil de compression dédié permet de nettoyer ce code avant mise en ligne.
À lire aussi :Certificat SSL pour votre site : ce que ça change vraiment (et comment choisir)
Le point que peu de guides mentionnent : le risque de sécurité
C’est ici que la plupart des articles sur le SVG s’arrêtent trop tôt. Parce qu’un fichier SVG est en réalité du code XML, il peut contenir des balises <script> exécutables. Un fichier SVG malveillant, déguisé en simple icône, peut donc injecter du JavaScript dans votre site si vous l’affichez sans précaution.
C’est précisément pour cette raison que WordPress bloque par défaut l’upload de fichiers SVG dans la médiathèque, un choix que la communauté WordPress.org confirme être lié à ce risque de sécurité et non à un bug. Beaucoup de webmasters contournent ce blocage avec un plugin, sans comprendre pourquoi il existait au départ — et ouvrent ainsi une porte d’entrée à des scripts malveillants sur un site qu’ils pensaient sécurisé.
Si vous devez absolument autoriser les SVG sur votre WordPress, trois précautions s’imposent :
- N’autoriser l’upload de SVG qu’aux administrateurs, jamais aux contributeurs ou auteurs.
- Utiliser un plugin qui nettoie le code SVG à l’upload (suppression des scripts), pas un plugin qui se contente de débloquer le format.
- Ne jamais accepter de fichier SVG envoyé par un tiers externe sans l’avoir inspecté au préalable — cette vigilance s’inscrit dans une démarche plus large de sécurisation de votre site WordPress, qui ne se limite pas aux seuls fichiers SVG.
Ce compromis entre légèreté et sécurité est souvent ignoré dans les comparatifs qui présentent le SVG comme une solution sans inconvénient. Ce n’en est pas une : c’est un excellent format, à condition de le traiter avec la même vigilance qu’un plugin ou qu’un thème tiers.
À lire aussi : Migration WordPress : le guide complet pour déplacer votre site sans perdre de données
Optimiser un SVG avant de le mettre en ligne
Un SVG mal optimisé peut, à l’usage, peser plus lourd qu’un PNG compressé correctement. L’export par défaut d’un logiciel comme Illustrator ajoute souvent des balises et des identifiants inutiles. Le principe rejoint celui que nous détaillons dans notre guide sur la compression d’images pour le web : chaque kilo-octet superflu ralentit inutilement votre site.
Avant publication, l’idéal est de passer le fichier dans un outil comme SVGOMG (gratuit, en ligne), qui retire automatiquement le superflu tout en conservant le rendu visuel identique. Un logo SVG bien nettoyé descend fréquemment sous 5 Ko, contre 15 à 20 Ko pour un export brut.
SVG, votre site plus léger sans sacrifier la netteté
Le format SVG n’est pas un gadget technique réservé aux développeurs : c’est un levier concret de vitesse de chargement et de netteté visuelle, dès lors qu’il est utilisé pour ce qu’il fait bien — logos, icônes, pictogrammes — et sécurisé correctement sur WordPress. Retenez surtout ceci : léger et net ne veut pas dire sans risque, et un SVG mérite la même vigilance qu’un plugin que vous installeriez sur votre site.