SVG

SVG (Scalable Vector Graphics) est un format d’image vectorielle basé sur XML. Au lieu de stocker des pixels, SVG stocke des instructions : « dessine un cercle de rayon 50 en (100, 100), rempli en bleu. » Le navigateur rastérise au moment de l’affichage, de sorte que le même fichier s’affiche nettement à toute taille, de 16×16 à un panneau 4K.

Propriétés :

• Indépendant de la résolution — même fichier pour les écrans retina et standard.
• Petites tailles de fichier pour les formes simples — une icône typique fait de 500 octets à 5 Ko. Surpasse tous les formats matriciels en taille pour le même contenu.
• Éditable comme du texte — ouvrez dans n’importe quel éditeur, ajustez les données de chemin, enregistrez. Aucun outil propriétaire requis.
• Stylisable par CSS — le remplissage, le contour et la transformation peuvent provenir d’un CSS externe.
• Animable via les transitions CSS et SMIL (bien que SMIL soit en cours de dépréciation au profit de CSS + WAAPI).

Où SVG gagne : logos, icônes, illustrations, diagrammes, visualisations de données. Où il perd : les photographies (pas de moyen efficace de représenter des millions de pixels subtilement différents comme des vecteurs), les dégradés complexes (la taille du fichier gonfle), le rendu 3D (utiliser canvas/WebGL).

SVG en ligne (intégré dans HTML) est la meilleure pratique moderne pour les icônes — pas de requête séparée, stylisable par CSS, accessible via aria-label. SVG externe (dans un fichier séparé) convient aux ressources moins critiques.

La surface d’attaque XSS dont personne ne vous parle : SVG est du XML et peut contenir des balises <script>. Un SVG téléchargé sur un forum, une photo de profil ou un CMS devient un vecteur d’exécution de code arbitraire s’il est servi avec Content-Type: image/svg+xml depuis la même origine que l’application. L’atténuation consiste à assainir les SVG téléchargés par les utilisateurs (DOMPurify fonctionne) ou à les servir depuis une origine sandbox. Certains hébergeurs rastérisent simplement les SVG des utilisateurs en PNG au téléchargement pour éliminer le risque.

Optimisation de la taille des fichiers SVG : SVGO est l’outil standard en ligne de commande — il exécute ~40 plugins qui suppriment les métadonnées, simplifient les chemins, fusionnent les transformations et arrondissent la précision numérique. Les économies typiques sur les exports Sketch/Figma sont de 50-80 %, parfois 95 %+ pour les designs chargés de calques cachés. Le SVG compressé sur disque se compresse également bien en gzip (contenu texte), donc un SVG de 5 Ko finit souvent sous 1 Ko sur le fil. Référence : W3C — Scalable Vector Graphics (SVG) 2.

Exemple concret

Une icône de bouton de fermeture « X » circulaire en SVG : <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> — soit ~150 octets non compressés, ~80 octets gzippés, et se rend identiquement à 16 px, 24 px, 48 px, ou comme une décalque vinyle de 2 mètres. L’attribut currentColor du SVG permet à une seule icône d’hériter de la couleur du texte pour les états de survol sans produire deux fichiers image. Considérez maintenant un SVG avec un maillage de dégradé complexe et 5 000 nœuds de chemin (une illustration détaillée exportée depuis Illustrator) : le fichier gonfle à ~400 Ko, et le rastériser au moment du dessin coûte un CPU mesurable par image. À ce stade, un WebP de 25 Ko est le meilleur choix — le vecteur gagne pour la géométrie simple, le matriciel gagne pour la complexité.

Quand et pourquoi cela est important

Le bon choix de format modifie le poids de la page et les performances de rendu de plusieurs ordres de grandeur. Utilisez SVG pour : les logos (indépendants de la résolution sur les points de rupture), les icônes monochromes (sprite ou en ligne), les graphiques et infographies simples (D3 produit du SVG), et toute image devant être stylisée par CSS. Utilisez le format matriciel (PNG/WebP/AVIF) pour : les photographies, les captures d’écran, les dégradés avec de nombreux arrêts de couleur, et toute image avec plus de complexité visuelle. L’avantage caché de SVG est l’accessibilité : un SVG bien balisé avec des éléments <title> et <desc> est compatible avec les lecteurs d’écran d’une façon qu’aucune image matricielle ne peut être sans texte alt séparé. Référence : MDN — SVG.