> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Grain SVG : garde le bruit à l’intérieur de ton dessin > Ajoute du grain SVG avec feTurbulence, confine le bruit monochrome dans SourceAlpha, règle-le à deux tailles et conserve un maître de chemins propre pour les autres destinations. Source: https://perfectvector.com/fr/blog/svg-feturbulence-grain Language: fr Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Pour ajouter du grain à une illustration SVG, génère du bruit avec `feTurbulence`, transforme-le en une légère superposition monochrome, puis compose cette superposition à l’intérieur de `SourceAlpha`. Fusionne-la au-dessus de `SourceGraphic` pour que le fond d’origine reste visible. Tu ajoutes ainsi une texture rendue tout en conservant la géométrie des chemins du dessin. Une primitive de bruit seule donne un autre résultat : elle remplit sa sous-région de primitive de filtre au lieu de suivre le contour de la forme. C’est pourquoi une feuille peut devenir une zone rectangulaire de bruit. La [référence de feTurbulence de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) documente ce comportement. Pour une illustration web, les livrables utiles sont une version d’affichage texturée et un maître propre. Le grain produit par ce filtre n’est pas un ensemble de points modifiables ni de contours de découpe. ## Sépare la forme du traitement de surface Commence avec un chemin rempli simple dont l’aspect est déjà correct sans grain. Corrige son contour, ses ouvertures et sa couleur avant d’ajouter l’effet. Un filtre ne réparera pas cette géométrie. Les trois états ci-dessous expliquent le problème de délimitation : | Version | Ce que produit le filtre | Quand l’utiliser | | ------------- | --------------------------------------------------------- | ------------------------------------------------------ | | Forme simple | Le chemin rempli d’origine | Modification et maître propre | | Bruit seul | Une image rectangulaire générée dans la région du filtre | Examiner la source de bruit plutôt que livrer le motif | | Grain contenu | Dessin d’origine et bruit monochrome limité par son alpha | Version texturée pour l’affichage dans le navigateur | **La délimitation compte** ![Illustration d’une feuille corail propre, de grain débordant d’une feuille et de grain contenu dans une silhouette de feuille nette](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *Illustration : la forme reste propre tandis que le bruit est confiné à sa silhouette. Ce schéma conceptuel n’est ni une capture d’un moteur de rendu SVG ni un résultat de vectorisation.* `SourceGraphic` fournit l’élément auquel le filtre est appliqué. `SourceAlpha` fournit son canal alpha. Le filtre agit sur une image du dessin ; il ne réécrit pas les commandes de chemin. Ces entrées et le graphe de filtre sont définis dans la [spécification Filter Effects du W3C](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree). Si ton dessin de départ possède déjà des zones transparentes, elles influent aussi sur la délimitation. SourceAlpha suit l’opacité réellement rendue, pas une boîte englobante extérieure supposée. ## Copie un exemple complet de grain SVG Enregistre ceci dans un fichier `.svg` et ouvre-le dans un navigateur. Il contient un chemin de feuille original, une graine de bruit déterministe, une superposition sombre et l’étape explicite de confinement. L’ouverture diagonale fait partie du chemin : elle reste donc transparente dans la version texturée. ```xml ``` Le filtre accomplit quatre tâches : 1. `feTurbulence` crée le bruit et le nomme `noise`. 2. La matrice fixe le rouge, le vert et le bleu à zéro. Sa dernière ligne multiplie l’alpha du bruit par `0.28`, créant une légère superposition noire nommée `ink`. 3. `feComposite` avec `operator="in"` garde cette superposition là où `SourceAlpha` existe. 4. `feMerge` dessine d’abord l’illustration d’origine, puis la superposition contenue au-dessus. La [référence de feColorMatrix de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) explique comment la matrice à cinq colonnes transforme la couleur et l’alpha. Ici, elle change l’image de bruit, pas le fond de la feuille. La [référence de feComposite de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) explique l’opération `in` utilisée pour limiter la superposition à la seconde entrée. La valeur `0.28` est un point de départ pour cette feuille corail, pas un réglage de grain universel. Réduis-la si la texture ternit le dessin ; augmente-la si le grain disparaît à la taille d’affichage prévue. Le grain en superposition noire assombrit le fond. Il ne crée pas de mouchetures claires visibles sur un motif noir. Pour les opérations de couleur et d’alpha servant à recolorer un dessin existant, consulte le [guide de feColorMatrix](https://perfectvector.com/fr/blog/svg-fecolormatrix). Pour durcir un bord transparent existant, consulte les [seuils alpha SVG](https://perfectvector.com/fr/blog/svg-alpha-threshold). Aucune de ces opérations ne fournit la source de bruit généré utilisée ici. ## Vérifie le résultat à la taille que les gens verront Nous avons créé trois versions de ce chemin original : sans filtre, avec un filtre contenant uniquement la primitive de bruit, et avec le graphe complet de grain contenu ci-dessus. Nous avons examiné les versions rendues dans Chrome à **120 × 120** et **360 × 360 pixels CSS**, avec le même viewBox `0 0 200 200`. | Vérification | Version de 120 pixels | Version de 360 pixels | | ------------- | ------------------------------------------------ | --------------------------------------------------------------------------- | | Maître simple | Feuille corail lisse, ouverture transparente | Même contour et même ouverture | | Bruit seul | Le bruit rectangulaire remplace le motif visible | Le bruit rectangulaire reste visible au-delà de la silhouette de la feuille | | Grain contenu | Texture légère dans la feuille | Texture plus visible, ouverture et zone environnante dégagées | Le DOM du navigateur contenait un chemin dans chaque exemple. Les six attributs `d` étaient identiques. Cela établit la limite de cet exemple : la surface rendue a changé et aucun chemin de moucheture n’a été ajouté. C’est un fichier de test créé pour le navigateur, pas un résultat de PerfectVector ni d’un éditeur vectoriel natif. Un aperçu plus grand aide à examiner l’effet, mais la petite version détermine si le dessin reste lisible. Garde les deux tailles dans ta vérification. Augmenter la taille d’affichage avec le même viewBox change aussi l’échelle apparente de la texture ; ne suppose pas qu’un seul aperçu représente tous les usages. ## Règle le grain un paramètre à la fois Pour une petite illustration de carte web, commence avec les valeurs de l’exemple. Change ensuite un paramètre, compare les deux mêmes tailles d’affichage et garde une copie de la version que tu préfères. | Réglage | Décision à prendre | Vérification pratique | | ---------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | `baseFrequency` | Variation plus grossière ou plus fine en coordonnées SVG | Essaie `0.25` à côté de `0.65` ; examine la taille d’affichage réelle | | `numOctaves` | Nombre de couches de détail de bruit à combiner | Compare `1` et `2` avant d’ajouter du détail | | `seed` | Réalisation du bruit à utiliser | Garde-la fixe pour comparer les autres réglages | | Multiplicateur alpha de la matrice | Intensité avec laquelle la superposition noire assombrit le fond | Compare `0.15` et `0.28` sur le même dessin | | Région du filtre | Rectangle disponible pour le graphe de filtre | Corrige la sortie manquante sans utiliser le rectangle à la place du confinement par alpha | `baseFrequency` accepte une valeur pour les deux axes ou deux valeurs pour les fréquences horizontale et verticale. La [référence de baseFrequency de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) documente cette distinction. Commence avec une seule valeur pour cette feuille ; des valeurs inégales constituent un choix volontaire pour une texture directionnelle. `numOctaves` contrôle le nombre d’octaves du bruit, comme le décrit la [référence de numOctaves de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves). Des octaves supplémentaires ne sont pas des chemins vectoriels supplémentaires. Utilise-les seulement si elles améliorent la surface visible à la taille dont tu as besoin. L’exemple définit explicitement `color-interpolation-filters="sRGB"`. Garde ce réglage inchangé pour comparer tes variantes, afin qu’une modification du traitement des couleurs ne brouille pas la comparaison du grain. ## Corrige un rectangle, un fond manquant ou un bord sale **La texture crée une zone rectangulaire.** Examine la sortie finale du filtre. S’il se termine par `feTurbulence`, il renvoie l’image de bruit. Rétablis la matrice, la composition avec `SourceAlpha` et la fusion. Agrandir le rectangle du filtre donnera seulement plus de place au bruit non confiné. **La couleur de la feuille disparaît.** Vérifie que le premier nœud de fusion utilise `SourceGraphic`. Un résultat final `inside` seul contient la superposition sombre, pas le fond corail d’origine. Vérifie aussi l’orthographe et la casse de chaque `result` nommé et de chaque référence `in`. **Du bruit reste dans une ouverture transparente.** Confirme que la seconde entrée de composition est `SourceAlpha`, et non le bruit rectangulaire ou un arrière-plan opaque. Applique le filtre au dessin que tu veux texturer. Inclure un arrière-plan opaque dans le groupe filtré change l’entrée alpha. **Une partie de la sortie est rognée.** Vérifie `x`, `y`, `width` et `height` sur le filtre. Ces attributs définissent la région disponible, comme le décrit la [référence de filter de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter). L’exemple laisse un peu d’espace supplémentaire. Une région plus large ne répare pas une étape de confinement manquante et ne corrige pas le rognage imposé par un conteneur distinct. **Le petit dessin paraît brouillé.** Réduis d’abord l’alpha de la superposition, puis compare la fréquence et le nombre d’octaves. Si la texture nuit encore à la silhouette, livre la version propre à cette taille. ## Garde un maître propre pour la livraison Pour le maître sans filtre, retire `filter="url(#grain)"` du chemin et supprime la définition du filtre désormais inutilisée. Conserve le `d` du chemin, son fond et le viewBox. Ouvre ce fichier séparément et confirme que la feuille et l’ouverture correspondent à la version propre d’origine. Pour une application web, vérifie la version texturée dans les navigateurs et avec la méthode d’intégration exacte que tu livreras. Si tu répètes ce SVG en ligne sur une page, donne à chaque filtre un ID unique et actualise sa référence `url(#...)`. L’exemple autonome utilise un ID parce qu’il contient une seule instance. Pour une destination qui exige un aspect matriciel exact, exporte un aperçu matriciel à la taille requise et examine-le dans cette destination. Pour un processus nécessitant une géométrie modifiable ou découpable, livre les chemins propres et précise que le grain est un effet d’affichage. Ne décris pas le bruit du filtre comme des mouchetures vectorielles et ne promets pas qu’un éditeur, un exportateur PDF ou une machine de découpe en aval le reproduira. Teste la destination réelle. Si tu as volontairement besoin de mouchetures modifiables individuellement, c’est une tâche géométrique distincte. Elle nécessite aussi de décider du nettoyage ; consulte [pourquoi un SVG a trop de nœuds](https://perfectvector.com/fr/blog/svg-too-many-nodes) avant de vectoriser une texture en une masse de minuscules contours. Conserver le grain d’une peinture matricielle est un autre problème de départ, abordé dans [l’aquarelle en vecteurs](https://perfectvector.com/fr/blog/watercolor-to-vector). ## Quand la vectorisation aide Si le motif propre ne subsiste qu’en PNG ou JPG, [convertis cette source en illustration SVG modifiable](https://perfectvector.com/fr/image-to-vector) avant d’ajouter un filtre de navigateur. Examine d’abord la silhouette et l’ouverture récupérées dans la version propre. PerfectVector fournit l’étape matricielle vers vectorielle ; le graphe de grain procédural de ce guide est un traitement SVG distinct que tu ajoutes ensuite. Tu possèdes déjà le maître à base de chemins ? Utilise-le directement. Une seconde conversion est inutile pour appliquer le filtre. Le [guide de vectorisation d’images](https://perfectvector.com/fr/blog/what-is-image-vectorization) explique cette étape de récupération de la source si tu en as besoin. ## Questions fréquentes **Pourquoi feTurbulence crée-t-il un rectangle au lieu de suivre ma forme ?** Le bruit remplit la sous-région de sa primitive de filtre. Compose-le à l’intérieur de SourceAlpha et fusionne-le au-dessus de SourceGraphic pour confiner la superposition au dessin tout en préservant son fond. **Le grain SVG ajoute-t-il des nœuds à mon chemin ?** Ce filtre n’ajoute pas de chemins de mouchetures. Dans le fichier de test original du navigateur, les six exemples conservaient un chemin avec des données d identiques ; le filtre changeait la surface rendue. **Avec quels réglages de grain commencer ?** Pour l’exemple original de la feuille, commence avec fractalNoise, baseFrequency 0.65, deux octaves, une graine de 8 et un multiplicateur alpha de superposition noire de 0.28. Compare à la taille d’affichage réelle et ajuste un réglage à la fois. **Puis-je utiliser l’effet de grain comme fichier de découpe ?** La texture générée n’est pas une géométrie de coupe modifiable. Garde un maître de chemins sans filtre séparé et vérifie la géométrie dans le processus de découpe réel. ## Sources 1. [MDN : feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Génération de bruit et sous-région de primitive. 2. [W3C : Arbre de primitives de filtre](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha et traitement d’image des filtres. 3. [MDN : feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Opérations matricielles de couleur et d’alpha. 4. [MDN : feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Confinement avec l’opérateur in. 5. [MDN : baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — Valeurs de fréquence sur un ou deux axes. 6. [MDN : numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — Couches de détail du bruit. 7. [MDN : filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Attributs de région du filtre. Si ton illustration web a besoin d’un maître propre récupéré d’une image matricielle, [commence par la conversion d’image en vecteurs](https://perfectvector.com/fr/image-to-vector), examine les chemins et ajoute le grain sur une copie d’affichage distincte. ## Explore - [Read the HTML article](https://perfectvector.com/fr/blog/svg-feturbulence-grain) - [Import SVG FontForge : des dessins aux contours de glyphes](https://perfectvector.com/fr/blog/fontforge-import-svg.md) - [Évaluer la qualité d’une vectorisation : une grille de notation](https://perfectvector.com/fr/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)