Fichiers SVG : guide complet pour développeurs et designers

SVG est l'une de ces technologies qui semblent simples de l'extérieur — c'est juste un format graphique, non ? — mais qui récompensent un apprentissage approfondi plus que presque tout autre format dans la boîte à outils d'un développeur ou d'un designer. Les fichiers SVG s'adaptent infiniment sans aucune perte de qualité, pèsent presque rien pour les graphiques simples, peuvent être mis en style avec CSS, animés avec JavaScript ou les transitions CSS, et intégrés directement dans du HTML. Bien comprendre SVG change la façon dont vous pensez aux graphiques sur le web.

Vous pouvez visualiser, inspecter et optimiser n'importe quel fichier SVG grâce à l'outil SVG BrowseryTools — gratuit, sans inscription, tout s'exécute dans votre navigateur.

Qu'est-ce que SVG ?

SVG signifie Scalable Vector Graphics (graphiques vectoriels évolutifs). Contrairement à JPEG, PNG ou WebP — qui stockent les images sous forme de grilles de pixels colorés (images matricielles) — SVG stocke les images sous forme de descriptions mathématiques de formes. Un cercle est décrit par un point central et un rayon. Un tracé est décrit par une séquence de commandes de dessin : aller à ce point, tracer une ligne jusqu'à ce point, tracer une courbe à travers ces points de contrôle, fermer le tracé.

SVG est un format basé sur XML, ce qui signifie que chaque fichier SVG est du texte brut, lisible par un humain, et structuré comme un arbre d'éléments imbriqués. Ouvrez n'importe quel SVG dans un éditeur de texte et vous voyez du balisage lisible, pas un blob binaire. Cela a des conséquences pratiques significatives : les fichiers SVG peuvent être générés par programmation, modifiés avec des outils de traitement de texte, différenciés dans le contrôle de version, et intégrés directement dans HTML sans aucun traitement supplémentaire.

Le format est un standard du W3C, maintenu aux côtés de HTML et CSS. Chaque navigateur moderne possède un moteur de rendu SVG complet intégré.

Pourquoi SVG surpasse le matriciel pour les icônes et illustrations

L'avantage décisif de SVG sur les formats matriciels pour les icônes, logos et illustrations est l'indépendance à la résolution. Une icône matricielle créée à 32×32 pixels sera floue sur un écran Retina, qui affiche à 2× ou 3× les pixels physiques par pixel CSS. Pour y remédier, vous devez soit exporter plusieurs variantes de résolution (@1x, @2x, @3x), augmenter la résolution source (fichiers plus volumineux, plus de mémoire), soit utiliser image-set en CSS pour servir la bonne résolution. Avec SVG, vous créez le graphique une fois et il est parfait à toutes les tailles, sur tous les écrans, pour toujours.

La taille de fichier est l'autre avantage majeur pour les graphiques simples. Une icône simple — une coche, une flèche, un menu hamburger — peut être décrite dans un fichier SVG de 200 à 500 octets. Le PNG équivalent en 2× Retina peut peser 2 à 5 Ko. En 3×, encore plus. Quand une interface compte 50 icônes, la différence entre 50 SVG optimisés (totalisant ~20 Ko) et 50 ensembles PNG (totalisant ~300 Ko ou plus) est significative.

Les images matricielles l'emportent pour les contenus photographiques et les illustrations très détaillées avec des dégradés lisses et des textures. Un SVG vectoriel d'une photographie serait énorme et semblerait stylisé plutôt que photographique. Le bon format dépend entièrement de la nature du contenu.

Anatomie SVG : les éléments fondamentaux

Un fichier SVG minimal a cette structure :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
  <path d="M8 12 L12 16 L16 8" stroke="white" stroke-width="2" fill="none" />
</svg>

Les éléments et attributs clés à comprendre :

• viewBox — Définit le système de coordonnées interne. viewBox="0 0 24 24" signifie que l'espace de dessin s'étend de (0,0) à (24,24). Le SVG peut ensuite être rendu à n'importe quelle taille réelle — 16×16, 32×32, 200×200 — et le navigateur adapte le système de coordonnées en conséquence. C'est le mécanisme derrière l'indépendance à la résolution.
• path — L'élément SVG le plus puissant. Un attribut d contient des commandes de dessin : M (déplacer vers), L (ligne vers), C (courbe de Bézier cubique), A (arc), Z (fermer le tracé). Presque toute forme peut être exprimée comme un tracé.
• circle, rect, ellipse, line, polygon — Éléments pratiques pour les formes courantes. Un <circle> prend cx, cy et r. Un <rect> prend x, y, width et height, plus rx optionnel pour les coins arrondis.
• text — SVG peut rendre du texte typographique qui s'adapte à l'image et reste sélectionnable et accessible, contrairement au texte intégré dans une image matricielle.
• g (groupe) — Regroupe les éléments enfants pour qu'on puisse appliquer des transformations, styles et opacités à l'ensemble du groupe d'un coup.
• defs et use — Définissez des éléments réutilisables une fois et référencez-les plusieurs fois avec <use>. Indispensable pour les systèmes d'icônes qui utilisent un seul sprite SVG.

Styliser SVG avec CSS et l'animer

Les éléments SVG font partie du DOM quand SVG est intégré dans HTML. Cela signifie que CSS peut les cibler directement en utilisant les mêmes sélecteurs que pour les éléments HTML. Vous pouvez modifier les couleurs de remplissage, les épaisseurs de contour et l'opacité au survol, en mode sombre ou en réponse à tout changement d'état :

/* Target SVG elements with CSS */
.icon-check circle {
  fill: #22c55e;
  transition: fill 0.2s ease;
}

.icon-check:hover circle {
  fill: #16a34a;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .icon-check circle { fill: #4ade80; }
}

Les animations et transitions CSS fonctionnent sur les propriétés SVG. L'astuce stroke-dasharray et stroke-dashoffset — animer un tracé de invisible à visible en manipulant la quantité de tirets affichée — crée l'effet de « dessin » visible sur de nombreux indicateurs de chargement et illustrations d'onboarding. SVG possède également ses propres éléments <animate> et <animateTransform> (animation SMIL), bien que l'animation CSS et JavaScript soit généralement préférée pour la maintenabilité.

Utiliser currentColor comme valeur de remplissage fait hériter à une icône SVG la couleur du texte de son élément parent automatiquement, permettant à une seule icône de s'adapter à n'importe quel contexte de couleur sans modification.

Optimisation SVG avec SVGO

Les fichiers SVG exportés depuis des outils de design comme Figma ou Illustrator contiennent beaucoup de surplus inutile : métadonnées de l'éditeur, attributs redondants, groupes sans effet, coordonnées en virgule flottante avec huit décimales, attributs id générés par le système de nœuds interne de l'outil. Pour une icône simple, cette surcharge peut tripler ou quadrupler la taille du fichier par rapport à une version optimisée à la main.

SVGO (SVG Optimizer) est l'outil standard pour supprimer ce surplus. Il applique un ensemble configurable de transformations : effondrement des groupes imbriqués, suppression des éléments invisibles, arrondi des coordonnées à une précision raisonnable, fusion des tracés redondants, suppression des métadonnées et commentaires, et plus encore. Une passe SVGO typique réduit la taille des fichiers SVG d'icônes de 30 à 60 % sans aucun changement visuel.

L'outil SVG BrowseryTools applique l'optimisation SVG dans votre navigateur, vous donnant le résultat optimisé sans avoir à installer d'outils en ligne de commande.

SVG intégré vs fichier externe vs arrière-plan CSS

Il existe trois façons principales d'inclure un SVG dans une page web, chacune avec ses compromis :

• SVG intégré — Le balisage SVG est intégré directement dans le HTML. Donne un accès CSS et JavaScript complet à chaque élément à l'intérieur du SVG. Idéal pour les icônes nécessitant des effets de survol, des changements de couleur ou des animations. Ne peut pas être mis en cache séparément par le navigateur.
• Fichier SVG externe via <img> — Le SVG est un fichier séparé référencé avec <img src="icon.svg">. Le navigateur peut mettre le fichier en cache. Simple à utiliser. Mais CSS de la page parente ne peut pas accéder à l'intérieur du SVG, et JavaScript ne peut pas manipuler son contenu.
• background-image CSS — Le SVG est référencé comme arrière-plan CSS. Fonctionne pour les graphiques purement décoratifs. Le SVG peut également être intégré sous forme d'URI de données en CSS, utile pour les petites icônes dans les feuilles de style de composants. CSS ne peut pas restyliser les éléments à l'intérieur du SVG.

Les feuilles de sprites SVG — un seul fichier SVG contenant toutes les icônes définies dans des blocs <defs>, référencées avec <use href="sprite.svg#icon-name"> — offrent un bon équilibre : une seule requête réseau mise en cache pour toutes les icônes, avec une manipulation DOM par icône possible dans la plupart des navigateurs modernes.

Pièges courants : XSS via SVG

SVG prend en charge les scripts intégrés, les gestionnaires d'événements et les références à des ressources externes, ce qui en fait un vecteur d'attaque viable pour le cross-site scripting (XSS) si des fichiers SVG téléversés par des utilisateurs sont affichés dans un contexte navigateur. Un fichier SVG contenant <script>alert(document.cookie)</script> exécutera ce script si le navigateur rend le SVG dans le cadre d'une page.

Les règles pour gérer en toute sécurité les SVG téléversés par des utilisateurs :

• N'intégrez jamais directement dans votre HTML un SVG téléversé par un utilisateur. Intégrez uniquement les SVG que vous contrôlez.
• Si vous devez afficher des SVG téléversés par des utilisateurs, servez-les depuis une origine séparée et sandboxisée et affichez-les dans une balise <img> ou dans un <iframe> sandboxisé. La balise <img> n'exécute pas les scripts dans le SVG.
• Nettoyez les SVG téléversés par des utilisateurs en les passant par un outil de nettoyage (DOMPurify avec la configuration SVG) avant de les stocker ou de les afficher.
• Définissez l'en-tête Content Security Policy pour restreindre les sources de scripts sur les pages qui affichent des SVG.

Convertir SVG en PNG

Certains contextes ne prennent pas en charge SVG : les anciens clients de messagerie, certaines plateformes CMS, certains pipelines de traitement d'images, les exigences d'icônes d'applications pour iOS et Android, et les images de prévisualisation Open Graph. Dans ces cas, vous devez exporter le SVG sous forme de PNG rastérisé.

Comme SVG se redimensionne sans perte, vous pouvez exporter en PNG à n'importe quelle taille. Pour les icônes d'applications, cela signifie exporter une source SVG unique à 1024×1024 et en dériver toutes les tailles plus petites. Pour l'usage web Retina, exportez à 2× ou 3× la taille d'affichage CSS.

L'outil SVG BrowseryTools peut rendre un SVG en PNG à la résolution de votre choix, gérant la conversion dans le navigateur sans aucun upload vers un serveur. Utile quand vous avez un SVG depuis un outil de design et que vous avez besoin d'un PNG pour un contexte qui n'accepte pas SVG.