SVG, le couteau suisse du web

Il y a un format qui est à la fois une image, un document, une feuille de style et un programme. Qui pèse trois fois rien, reste net du smartwatch à l'écran 8K, se stylise en CSS et s'anime en JavaScript. Le SVG a trente ans d'avance depuis 2001, et la plupart des sites l'utilisent comme un PNG qui aurait fait des études.

C'est du texte, et ça change tout

Un SVG est un document XML lisible : des formes, des chemins, des groupes. Conséquences directes :

• Éditable à la main : corriger une couleur dans un logo = ouvrir le fichier, changer un hexa. Pas de « il faudrait rouvrir le fichier source, mais il est sur l'ancien disque ».
• Compressable à l'extrême : du texte répétitif, gzip adore. Un logo complexe tient en 2 ko.
• Versionnable : un diff Git sur un SVG montre ce qui a changé. Essaie ça avec un PNG.

Et surtout : vectoriel. Une seule ressource pour toutes les densités d'écran. Pendant que d'autres exportent des @2x et @3x, toi tu as déjà fini.

Inline, la superpuissance ignorée

Le vrai déclic, c'est le SVG inline, collé directement dans le HTML. Là, il entre dans le DOM, et tout s'ouvre :

<svg viewBox="0 0 24 24" class="icone">
  <path d="M12 21C7 17 2 13 2 8.5 2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.4 22 8.5c0 4.5-5 8.5-10 12.5z"></path>
</svg>

.icone { fill: currentColor; width: 1.2em; }
.icone:hover { fill: crimson; }

currentColor fait hériter l'icône de la couleur du texte : une seule icône s'adapte au thème clair, au thème sombre, au hover, sans dupliquer un fichier. Tes 40 variantes d'icônes de couleurs différentes viennent de devenir 1 icône et 3 lignes de CSS.

Ce qu'on peut construire avec

• Icônes et logos : le cas évident, avec l'accessibilité en bonus (title dans le SVG, ou aria-hidden s'il est décoratif).
• Graphiques et dataviz : des rectangles pour un bar chart, un path pour une courbe. Générés côté serveur en PHP, ce sont des graphiques sans une ligne de JS client.
• Illustrations et décors : blobs, vagues de séparation, motifs de fond en 'background-image' encodé.
• Animations : 'stroke-dasharray' + 'stroke-dashoffset' pour l'effet " tracé qui se dessine ", transitions CSS sur les formes, ou SMIL/CSS animations pour le reste. Le tout sans lib de 200 ko.
• Filtres : flous, textures, grain, distorsions via 'filter'. Un territoire entier de la direction artistique (voir les effets gooey ou de turbulence) dans une balise que peu de gens ouvrent.

Les pièges du quotidien

Trois classiques à connaître :

• Le 'viewBox' manquant : sans lui, le SVG refuse de se redimensionner proprement. C'est LA première chose à vérifier sur un export.
• Les exports sales : Illustrator et consorts exportent des SVG pleins de métadonnées, d'IDs générés et de décimales à rallonge. Passe-les dans SVGO : 60 % de poids en moins, zéro différence visuelle.
• La sécurité : un SVG peut contenir du script. Ceux que TU crées, aucun souci ; ceux uploadés par des utilisateurs, on assainit ou on sert avec les bons en-têtes, jamais inline. Un fichier image qui exécute du code, c'est charmant en démo de sécurité, moins dans ton back-office.

Le réflexe à installer

À chaque élément graphique, pose la question dans cet ordre : CSS pur ? SVG ? Et seulement ensuite : image bitmap ? Tu seras surpris du nombre de fois où la réponse s'arrête à SVG. C'est l'outil qui fait le café graphique du web, et contrairement au couteau suisse de ton tiroir, celui-là sert tous les jours.

FAQ

SVG inline ou en fichier séparé ?

Inline pour tout ce qui doit se styler ou s'animer (icônes, décors interactifs) ; fichier séparé pour les illustrations statiques mises en cache.

Comment optimiser un SVG exporté d'Illustrator ?

Le passer dans SVGO : suppression des métadonnées, arrondi des décimales, nettoyage des IDs. Gain typique de moitié sans perte visuelle.

Un SVG peut-il poser un problème de sécurité ?

Oui s'il vient d'un utilisateur : il peut embarquer du script. On assainit le fichier ou on le sert comme image, jamais inline.