Un fond de page qui ressemble à du papier fait main, un nuage stylisé pour une illustration, un léger grain de film sur une photo : ces textures n'ont besoin d'aucune image téléchargée, elles se calculent.
<feTurbulence> génère du bruit procédural directement dans le navigateur, à partir d'une formule mathématique plutôt que d'un fichier, ce qui donne une texture toujours nette, à n'importe quelle taille d'écran.
Définition
<feTurbulence> est une primitive de filtre SVG qui génère une image de bruit calculée, sans source d'entrée : contrairement à la plupart des autres primitives, elle ne prend rien en in, elle crée sa propre texture à partir de ses attributs.
Le résultat peut être utilisé seul, comme fond, ou servir d'entrée à une autre primitive comme <feDisplacementMap> pour déformer une forme voisine.
Attributs principaux
| Attribut | Rôle | Valeurs typiques |
|---|---|---|
type | Style du bruit | fractalNoise ou turbulence |
baseFrequency | Densité du motif | De 0,005 (grain large) à 0,9 (grain fin) |
numOctaves | Nombre de couches de détail superposées | 1 à 6, souvent 2 à 4 |
seed | Point de départ du calcul aléatoire | N'importe quel entier |
Deux appels à <feTurbulence> avec le même seed et les mêmes attributs produisent exactement le même motif, ce qui rend le résultat reproductible malgré son apparence aléatoire.
Exemple de rendu concret
L'exemple suivant compare les deux valeurs de type sur deux rectangles voisins : fractalNoise donne un grain doux proche d'un papier texturé, turbulence donne des motifs plus contrastés, proches de la fumée ou du marbre.
<svg viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="papier">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" />
</filter>
<filter id="fumee">
<feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="3" />
</filter>
</defs>
<rect x="10" y="10" width="100" height="100" rx="8" filter="url(#papier)" />
<rect x="130" y="10" width="100" height="100" rx="8" filter="url(#fumee)" />
</svg>Aucune des deux zones n'utilise d'image externe : tout le motif est recalculé par le navigateur à partir de deux réglages différents de <feTurbulence>.
Différence avec un élément SVG proche
On confond parfois <feTurbulence> avec <feDisplacementMap>, alors que leurs rôles sont complémentaires plutôt qu'équivalents : <feTurbulence> génère une texture à partir de rien, tandis que <feDisplacementMap> utilise une image existante, souvent ce bruit, pour déformer une autre forme.
Piège classique
<feTurbulence> est l'une des primitives les plus coûteuses à calculer : appliquée sur une grande zone, avec un numOctaves élevé, elle peut ralentir visiblement le défilement de la page ou saccader une animation. Sur une bannière plein écran, mieux vaut générer la texture une seule fois puis l'exporter en image, et réserver <feTurbulence> aux zones réduites ou statiques.
Cas d'usage réel
Believemy, comme la plupart des sites qui l'utilisent, réserve <feTurbulence> à des zones ciblées : un fond de carte façon papier kraft, un nuage stylisé dans une illustration pédagogique, un grain léger ajouté à une photo pour casser un rendu trop lisse, ou une carte de déplacement pour un logo qui semble flotter sous l'eau. Dans tous les cas, le bruit reste purement décoratif et ne vient jamais concurrencer le texte qu'il accompagne.
- Fond de papier ou de tissu texturé
- Nuage ou fumée stylisés dans une illustration
- Grain de film léger ajouté à une photo
- Base pour une déformation par carte de déplacement
- Motif de fond discret derrière un titre, pour éviter un aplat de couleur trop plat
Questions fréquentes
fractalNoise et turbulence ?fractalNoise produit un bruit doux et continu, proche d'un papier ou d'un tissu, tandis que turbulence ajoute une valeur absolue au calcul qui crée des motifs plus marqués et plus contrastés, proches de la fumée ou du marbre veiné.
L'algorithme de bruit de Perlin utilisé par la spécification laisse une petite marge d'interprétation aux moteurs de rendu, donc deux navigateurs avec le même seed peuvent produire un motif très proche mais jamais rigoureusement identique au pixel près.
feTurbulence ?Oui, en animant l'attribut baseFrequency avec <animate>, ce qui fait évoluer le motif dans le temps et donne un effet de fumée ou d'eau qui bouge, au prix d'un calcul répété à chaque image qu'il faut surveiller sur mobile.