Un format texte, des tracés qui restent nets à toute taille, et derrière chaque courbe un moteur de filtres, d'animation et de masques que le navigateur exécute pour vous. Ce guide fait le tour de ce que SVG sait faire, avec des démos vivantes à manipuler, puis rassemble les quatre prototypes de morphing de l'atelier.
le titre est un vrai texte SVG déformé par feTurbulence : bougez le curseur dessus
SVG (Scalable Vector Graphics) est un langage de balisage XML qui décrit des images vectorielles en deux dimensions. Comme c'est du texte, on peut le lire, le chercher, le compresser et le modifier dans n'importe quel éditeur. Et parce qu'il a été conçu pour cohabiter avec CSS, le DOM, JavaScript et SMIL, un dessin SVG peut être stylé, scripté et animé comme le reste d'une page web. Le W3C le développe depuis 1999.
Des formes de base, un langage de tracé très complet (path), et un système de coordonnées (viewBox) qui rend tout indépendant de la taille d'affichage.
Six formes primitives. Chacune se règle avec quelques attributs numériques, donc chacune s'anime facilement.
Tout le dessin vectoriel tient dans l'attribut d. Attrapez les deux points violets pour voir la courbe cubique (C) se former.
Un seul dessin défini une fois (symbol), réutilisé à trois tailles et trois couleurs. Aucune perte de netteté.
Remplissages, contours, dégradés, motifs, marqueurs. Le contour (stroke) a ses propres règles (pointillés, extrémités, jointures) et c'est là que naissent beaucoup d'effets graphiques.
L'astuce du tracé qui s'écrit : un pointillé aussi long que la ligne, décalé progressivement. pathLength="1" évite de calculer la longueur réelle.
À gauche, un dégradé linéaire court qui se réfléchit pour former des bandes. À droite, un dégradé radial dont le foyer est décalé pour simuler un volume.
Un pattern est une tuile dessinée en SVG qui remplit n'importe quelle forme, y compris du texte. On peut la tourner sans redessiner.
Les marqueurs collent des symboles (flèches, points) sur les sommets d'une ligne. paint-order place le contour derrière le remplissage pour un texte plus net.
Le texte SVG reste du vrai texte (sélectionnable, indexable), mais il se comporte comme une forme : il peut suivre une courbe, se remplir d'un motif ou être découpé.
textPath aligne les lettres sur n'importe quel tracé. Ici startOffset glisse doucement le long de la courbe.
Un motif ou un dégradé peut remplir des lettres. textLength force le texte à occuper une largeur exacte, très utile pour composer des titres.
Déplacer, tourner, étirer, incliner. Puis cacher une partie du dessin avec un détourage net (clipPath) ou progressif (mask).
Le carré pointillé est l'original. Les transformations s'empilent et s'appliquent aussi à un groupe entier (g).
Le texte sert de fenêtre : seul ce qui passe à travers les lettres reste visible. Le contenu derrière continue de s'animer.
Contrairement au clip, un masque est progressif : une image en niveaux de gris décide de la transparence, pixel par pixel.
Promenez le curseur : un masque plus un dégradé radial, déplacés en JavaScript. Le mécanisme d'un brouillard de guerre pour un site de jeu.
C'est la partie la plus spectaculaire : un filtre est une chaîne de « primitives » (fe…) qui
transforment une image pixel par pixel, calculée par le navigateur en direct. On peut brancher la sortie
d'une primitive sur l'entrée d'une autre via in et result, ce qui permet de
fabriquer des effets complexes (flou, bruit, éclairage, distorsion) sans aucune image bitmap.
feTurbulence génère un bruit de Perlin (une texture aléatoire mais continue). feDisplacementMap s'en sert comme carte de déplacement : chaque pixel de l'image est décalé selon la couleur du bruit. La fréquence règle la finesse des ondulations, scale leur amplitude. C'est la recette de l'eau, du verre, du papier froissé ou du glitch.
Le bruit brut, rendu opaque. fractalNoise (gauche) donne des nuages doux, turbulence (droite) des veines plus contrastées, comme du marbre.
Original, flou, ombre portée colorée. feDropShadow est le raccourci d'une chaîne flou + décalage + couleur + fusion.
L'effet « goo » : on floute, puis on durcit le canal alpha avec une matrice. Les formes proches fusionnent comme du liquide. Idéal pour un jeu de slimes ou une navigation organique.
Une même illustration, quatre traitements : original, rotation de teinte, bichromie (niveaux de gris remappés entre deux couleurs), postérisation (quelques paliers de couleur seulement). Ce sont les « calques de réglage » de SVG.
erode amincit, dilate épaissit. On obtient un axe de graisse continu sur du texte ordinaire, sans police variable. Pratique pour prototyper.
Le bruit sert de relief, une lumière ponctuelle l'éclaire. Bougez le curseur : la lumière suit. Comme du papier texturé, de la pierre ou du cuir, sans image.
filter: url(#…).
Les filtres SVG ne se limitent pas aux dessins SVG : ils s'appliquent à n'importe quel élément de la page, texte, image ou bouton compris.
| feTurbulence | Génère du bruit procédural (Perlin). Matière première des textures, nuages, marbre, eau. |
| feDisplacementMap | Décale les pixels d'une image selon les couleurs d'une autre. Distorsion, verre, chaleur, glitch. |
| feGaussianBlur | Flou gaussien. Base des ombres, lueurs et de l'effet goo. |
| feDropShadow | Ombre portée en une seule primitive. |
| feOffset | Translate le résultat. Sert à fabriquer ombres et contours décalés. |
| feFlood | Remplit la zone d'une couleur unie. |
| feMorphology | Érode ou dilate les formes. Amincit ou épaissit, crée des contours. |
| feColorMatrix | Recombine les canaux RGBA : niveaux de gris, rotation de teinte, seuillage d'alpha. |
| feComponentTransfer | Remappe chaque canal séparément (feFuncR/G/B/A) : contraste, gamma, bichromie, postérisation. |
| feComposite | Combine deux images avec des opérateurs (in, out, atop, xor, arithmetic). |
| feBlend | Mélange deux images avec des modes (multiply, screen, overlay…). |
| feMerge / feMergeNode | Empile plusieurs résultats intermédiaires. |
| feConvolveMatrix | Convolution : netteté, embossage, détection de contours. |
| feDiffuseLighting / feSpecularLighting | Éclairage diffus (mat) ou spéculaire (brillant) à partir de la transparence d'une image utilisée comme relief. |
| feDistantLight / fePointLight / feSpotLight | Les trois types de sources lumineuses utilisables avec l'éclairage. |
| feImage | Insère une image ou un élément SVG dans la chaîne de filtre. |
| feTile | Répète un résultat en mosaïque. |
Quatre voies : SMIL (balises d'animation dans le SVG lui-même), les animations et transitions CSS, JavaScript, ou une bibliothèque comme GSAP. SMIL est le plus « natif » et se lit comme du HTML, mais il ne réagit pas aux entrées de l'utilisateur.
Un objet suit un tracé et s'oriente automatiquement dans le sens du mouvement.
Deux animations superposées sur le même élément : une rotation continue et un arrondi de coins qui va et vient.
Le navigateur sait déjà interpoler deux tracés, à une condition stricte : même nombre et même type de commandes. Flubber lève cette contrainte (voir les prototypes plus bas).
La façon d'insérer un SVG dans une page change ce qu'on peut en faire. C'est un choix de conception, pas un détail technique.
| Méthode | Ce qu'on gagne | Ce qu'on perd |
|---|---|---|
<svg> inline | Accès total : style CSS, variables et thèmes, JavaScript, animations, événements, filtres partagés avec la page. | Le code alourdit le HTML. Les identifiants (id) sont partagés par toute la page. |
<img src> ou fond CSS | Simple, mis en cache, propre pour un logo ou une illustration figée. | Utilisé comme image, le SVG ne peut pas être scripté ni charger de ressources externes ; le CSS de la page ne l'atteint pas. |
<object> / <iframe> | Document SVG autonome, avec ses propres scripts. | Isolé du reste de la page, plus lourd à faire communiquer. |
<foreignObject> | Insère du HTML à l'intérieur d'un dessin SVG (texte riche, formulaire). | Le HTML ne suit pas toutes les transformations comme une forme vectorielle. |
Petits attributs qui changent tout.
viewBox et preserveAspectRatio : décident comment le dessin s'adapte à son cadre.currentColor et variables CSS : un même SVG suit le thème clair ou sombre de la page.vector-effect="non-scaling-stroke" : garde une épaisseur de trait constante même si on agrandit le dessin.pathLength : normalise la longueur d'un tracé pour animer des pointillés sans calcul.<title> et <desc> : donnent un nom et une description accessibles aux lecteurs d'écran.<switch> et systemLanguage : affichent une variante selon la langue de l'utilisateur.<a> : un élément SVG peut être un lien cliquable.Les grandes familles d'éléments SVG, regroupées par usage. La liste complète (éléments, attributs, interface DOM) est dans la référence MDN.
Organiser, réutiliser, cadrer.
Les briques géométriques.
Du vrai texte, stylable.
Remplir et décorer.
Cacher, révéler.
Effets calculés en direct.
Le mouvement déclaré dans le dessin.
Ponts vers le reste du web.
Pour aller plus loin : page d'accueil SVG (MDN), guide des filtres, animation SMIL.
Ces prototypes utilisent l'animation par JavaScript : celle qui répond aux gestes de l'utilisateur (curseur, glisser, sliders), ce que SMIL ne fait pas. À faire dans cet ordre.
| Ce qui varie | Outil | Pourquoi |
|---|---|---|
| Épaisseur, taille, position, opacité, rotation | lerp ou transformation CSS | Simple nombre à interpoler, aucun besoin de bibliothèque. |
| Une forme décrite par des paramètres (largeur, arrondi…) | Fonction qui génère le tracé | Contrôle exact, aucun calcul d'interpolation, très fluide. |
| Deux dessins de même structure | <animate attributeName="d"> | Natif au navigateur, mais non pilotable par le curseur. |
| Deux dessins de structure différente (rond → étoile) | Flubber | Devine la correspondance entre les points, sans contrainte de structure. |
| Épaisseur d'un tracé existant, sans le redessiner | feMorphology | Filtre SVG : erode et dilate en temps réel. |
| Texture, distorsion, matière | feTurbulence + feDisplacementMap | Aucune image nécessaire, réglable par sliders. |
Chaque fonction de SVG a une « personnalité » qui peut porter l'identité d'un jeu indie. Quelques mariages possibles.
textPath) et tracé qui s'écrit (stroke-dashoffset) pour dessiner l'itinéraire.