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.
Exemples SVG Shape Cheatsheet · SVG Tutorial pas à pas
Tout le dessin vectoriel tient dans l'attribut d. Attrapez les deux points violets pour voir la courbe cubique (C) se former.
Exemples Bézier cubique expliquée · Éditeur de courbe + code
Un seul dessin défini une fois (symbol), réutilisé à trois tailles et trois couleurs. Aucune perte de netteté.
Exemples Sprite symbol + variables CSS · Sprite et currentColor au survol · Mise à l'échelle avec viewBox
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.
Exemples Tracé animé en CSS pur · Logo qui se dessine
À 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.
Exemples spreadMethod pad / reflect / repeat · Dégradés SVG, les bases
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.
Exemples pattern, l'exemple minimal · Motif de fond animé
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.
Exemples Marqueurs sur tracé animé · Variations de marqueurs
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.
Exemples Texte animé sur tracé (responsive) · Vague de texte avec startOffset
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.
Exemples Texte rempli d'un dégradé · Texte rempli d'un motif animé
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).
Exemples Transform SVG vs transform CSS · Comment fonctionne skew
Le texte sert de fenêtre : seul ce qui passe à travers les lettres reste visible. Le contenu derrière continue de s'animer.
Exemples Image découpée par du texte · Remplissage de texte animé
Contrairement au clip, un masque est progressif : une image en niveaux de gris décide de la transparence, pixel par pixel.
Exemples Fondu de texte par masque · Image révélée par un dégradé
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.
Exemples Masque interactif plein écran · Projecteur qui suit la souris
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.
Exemples Méduse ondulante · Turbulence, matrice, déplacement
Le bruit brut, rendu opaque. fractalNoise (gauche) donne des nuages doux, turbulence (droite) des veines plus contrastées, comme du marbre.
Exemples baseFrequency et numOctaves en direct · Texture de marbre
Original, flou, ombre portée colorée. feDropShadow est le raccourci d'une chaîne flou + décalage + couleur + fusion.
Exemples feDropShadow vs flou dupliqué · Lueur externe (glow)
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.
Exemples Bouton gooey · Filtre goo, version simple
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.
Exemples Filtres bichromie (duotone) · Effet de postérisation
erode amincit, dilate épaissit. On obtient un axe de graisse continu sur du texte ordinaire, sans police variable. Pratique pour prototyper.
Exemples Comparaison erode / dilate · Contour sauvage (morphology + turbulence)
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.
Exemples Texture de papier froissé · Bump mapping à la souris
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.
Exemples Collection de filtres SVG · Filtres SVG sur une vidéo
| 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.
Exemples Motion path en SVG · Atome en SMIL
Deux animations superposées sur le même élément : une rotation continue et un arrondi de coins qui va et vient.
Exemples Spinner Material en SMIL pur · Loaders SVG en SMIL
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).
Exemples Blob qui se déforme (SMIL + CSS) · Loader en morphing
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.Exemples SVG dans le HTML et le CSS · Mise à l'échelle avec viewBox · Filtres SVG sur une vidéo HTML
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. |