# Dégradé maillé en SVG : ce qui fonctionne aujourd’hui [Canonical HTML page](https://gradiently.design/fr/guide/mesh-gradient-svg) Vous pouvez écrire un élément meshgradient, et Inkscape en crée même un pour vous, mais les navigateurs n’afficheront rien. Voici les techniques qui donnent le même rendu doux et multicolore et qui s’affichent vraiment. ## The short version - L’élément meshgradient a été proposé dans des brouillons de SVG 2, mais aucun grand navigateur ne l’a implémenté, et il ne fait pas partie du standard publié que suivent les navigateurs. - Inkscape sait créer des dégradés de filet, et ses exports s’appuient sur un polyfill JavaScript pour s’afficher dans les navigateurs. - Le moyen le plus fiable d’obtenir un rendu maillé en SVG consiste à adoucir quelques formes colorées avec feGaussianBlur, ou à empiler plusieurs dégradés radiaux aux bords transparents. - Une image raster exportée depuis un outil de design est l’option la plus simple quand le dégradé n’a jamais besoin de changer, et WebP ou PNG la gardent légère. - Quelle que soit la méthode, ajoutez un léger grain sur le résultat pour masquer le banding dans les transitions douces. Un vrai **dégradé maillé SVG** ne fonctionne pas dans les navigateurs aujourd’hui. L’élément `` est apparu dans des brouillons de SVG 2, où les couleurs se placent aux coins d’une grille de patchs et se fondent à travers chacun d’eux, mais Chrome, Safari et Firefox ne l’ont jamais livré. Pour obtenir le rendu doux et multicolore que l’on appelle [dégradé maillé](https://gradiently.design/fr/guide/mesh-gradients), on le construit avec ce qui s’affiche vraiment : formes floutées, dégradés radiaux empilés, image raster ou shader. ## Ce qu’est devenu meshgradient L’élément mesh a fait partie des brouillons de travail de SVG 2 pendant plusieurs années. Il décrivait une surface comme des rangées de patchs de Coons, chacun avec quatre couleurs aux coins et des bords courbes, comme les filets de dégradé des logiciels d’illustration. Les éditeurs de navigateurs ne l’ont pas implémenté, et la fonction a été retirée de la version de SVG 2 qui a avancé. Si vous collez un balisage mesh dans une page, le navigateur l’ignore et ne remplit la forme avec rien, ou avec une couleur de repli si vous en avez défini une. ### Ne s’affiche pas dans les navigateurs - `` avec `` et `` - Les filets de dégradé Illustrator enregistrés en SVG modifiable - Un filet Inkscape exporté sans son polyfill - Les motifs ``, issus du même brouillon ### S’affiche partout - Des formes floutées avec `feGaussianBlur` - Plusieurs remplissages `` empilés - Une image PNG ou WebP intégrée - Des radiaux CSS empilés ou un canvas WebGL Inkscape est l’exception notable côté création. Son outil de filet produit un vrai balisage mesh, et à l’enregistrement pour le web, il peut inclure un petit polyfill JavaScript qui dessine le filet au chargement. Cela fonctionne, mais vous livrez du script pour peindre un fond, et il ne s’affichera pas là où les scripts ne s’exécutent pas, comme dans une balise `` ou dans beaucoup de clients e-mail. ## Méthode 1 : des formes floutées C’est ce qui se rapproche le plus d’un filet en SVG pur. Placez trois à cinq cercles ou ellipses remplis là où vous voulez chaque couleur, puis floutez fortement le groupe. Le flou fond les couleurs voisines les unes dans les autres exactement comme le fait un filet, et vous pouvez déplacer chaque tache indépendamment. ```html ``` Agrandissez la zone du filtre pour que le flou ne soit pas rogné aux bords des formes. Un stdDeviation d’environ un dixième de la largeur du canevas donne un rendu maillé. - Violet, rose et ciel sur encre: `radial-gradient(circle at 22% 25%, #7c3aed 0%, transparent 45%), radial-gradient(circle at 75% 20%, #f472b6 0%, transparent 40%), radial-gradient(ellipse at 63% 80%, #0ea5e9 0%, transparent 50%), linear-gradient(#0f0b1e, #0f0b1e)` - Braise, rose et beurre sur crème: `radial-gradient(circle at 20% 30%, #fb923c 0%, transparent 45%), radial-gradient(circle at 80% 25%, #f43f5e 0%, transparent 40%), radial-gradient(ellipse at 50% 85%, #fde68a 0%, transparent 55%), linear-gradient(#fff7ed, #fff7ed)` - Émeraude, bleu canard et indigo: `radial-gradient(circle at 25% 75%, #10b981 0%, transparent 45%), radial-gradient(circle at 70% 30%, #0891b2 0%, transparent 45%), radial-gradient(circle at 85% 85%, #6366f1 0%, transparent 40%), linear-gradient(#071a1a, #071a1a)` Aperçus de trois dispositions de taches floutées. Le premier correspond au SVG ci-dessus ; les couleurs se trouvent là où sont les taches. Le flou a un coût. Un grand `feGaussianBlur` est recalculé à chaque fois que le SVG est redessiné : réservez-le aux fonds statiques plutôt qu’à ce qui défile ou s’anime. Pour la même idée entièrement en CSS, voyez [les dégradés flous](https://gradiently.design/fr/guide/blurry-gradient). ## Méthode 2 : des dégradés radiaux empilés Chaque `` peut passer d’une couleur à la transparence. Remplissez plusieurs rectangles pleine taille, un par dégradé, et ils se superposent en un filet. Aucun filtre n’intervient : le rendu est plus léger que le flou et reste net à tous les niveaux de zoom. ```html ``` Faites un fondu vers la même couleur à opacité nulle plutôt que vers `transparent`, ce qui garde des bords propres dans tous les moteurs de rendu SVG, y compris les plus anciens. Cette méthode se transpose presque telle quelle en CSS, qui est souvent le meilleur endroit pour elle. [Les dégradés maillés en CSS](https://gradiently.design/fr/guide/css-mesh-gradient) montrent la même superposition avec `radial-gradient()` et expliquent comment contrôler où les couleurs se chevauchent. La version SVG se justifie quand le fond doit voyager sous forme de fichier, comme un téléchargement ou une ressource d’un design system. Plus d’informations sur les éléments de dégradé dans [les dégradés SVG](https://gradiently.design/fr/guide/svg-gradients). Radiaux empilés, version CSS: `radial-gradient(circle at 20% 25%, #7c3aed 0%, transparent 48%), radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 44%), radial-gradient(circle at 60% 85%, #0ea5e9 0%, transparent 52%), linear-gradient(#0f0b1e, #0f0b1e)` Le SVG ci-dessus écrit sous forme d’un seul fond CSS. Copiez-le si le dégradé ne vit que sur une page web. ## Méthode 3 : exporter un raster Si vous avez dessiné un vrai filet de dégradé dans un outil d’illustration et qu’il n’a jamais besoin de changer, exportez-le en image. Un filet en 1920×1080 se compresse bien en WebP et reste lisse en PNG ; vous pouvez l’intégrer avec un élément SVG `` ou l’utiliser comme fond CSS. Vous perdez l’indépendance vis-à-vis de la résolution, mais vous gardez chaque courbe du filet d’origine. > **Ajoutez du grain avant d’exporter** Les transitions douces d’un filet forment facilement des bandes une fois compressées. Une légère couche de bruit, comme celle de [feTurbulence en SVG](https://gradiently.design/fr/guide/svg-noise-filter), masque les paliers et garde des fichiers de taille raisonnable. ## Choisir la bonne méthode | Méthode | Fichier | Redimensionnable | Idéal pour | | --- | --- | --- | --- | | Formes floutées | SVG minuscule | Oui | Taches organiques, fonds statiques | | Radiaux empilés | SVG minuscule ou CSS | Oui | Fonds web rapides et nets | | Export raster | Image moyenne | Non | Filets exacts issus d’outils d’illustration | | Inkscape avec polyfill | SVG et script | Oui | Utilisateurs d’Inkscape qui ont besoin de vrais patchs | | Shader WebGL | Script | Oui | Surfaces animées, éclairées, interactives | Les cinq donnent un rendu maillé. Seul le polyfill affiche de vrais patchs de filet, et seul le shader bouge à moindre coût. 1. **Choisissez trois à cinq couleurs** Les teintes voisines se fondent proprement. Les opposées se rencontrent dans un milieu boueux, comme l’expliquent [les dégradés ternes](https://gradiently.design/fr/guide/muddy-gradients). 2. **Placez des couleurs, pas des arrêts** Décidez où vit chaque couleur sur le canevas. C’est toute la différence entre un filet et un dégradé linéaire. 3. **Laissez une zone calme** Gardez une zone proche de la couleur de fond, là où se placera un titre. 4. **Terminez par du grain** Un peu de bruit donne à la surface un air voulu et masque le banding. Quand vous voulez un fond de style maillé sans le construire à la main, un Mark Gradiently est une recette de couleurs, de lumière, de matière et de grain qui se rend en direct à toute taille, garde sa zone la plus calme derrière vos mots et s’exporte avec Pro en PNG, SVG ou PDF. Pour des filets animés sur un site web, [les dégradés shader](https://gradiently.design/fr/guide/shader-gradients) sont l’étape suivante. ## FAQ ### Les navigateurs prennent-ils en charge les dégradés maillés SVG ? Non. L’élément meshgradient a été rédigé pour SVG 2 mais aucun grand navigateur ne l’a implémenté : il n’affiche rien sans polyfill JavaScript. ### Comment faire un dégradé maillé en SVG qui fonctionne ? Floutez quelques cercles colorés avec feGaussianBlur, ou empilez plusieurs remplissages radialGradient qui s’estompent vers la transparence. Les deux s’affichent dans tous les navigateurs. ### Peut-on utiliser les dégradés de filet Inkscape sur un site web ? Oui, si vous incluez le polyfill JavaScript qu’Inkscape peut ajouter à l’enregistrement. Sans lui, les navigateurs ignorent le filet, et il ne fonctionnera pas dans une balise img. ### Un dégradé maillé CSS vaut-il mieux qu’un SVG ? Pour un fond qui ne vit que sur une page web, les radiaux CSS empilés sont plus simples. Le SVG est préférable quand le dégradé doit exister comme fichier autonome. ### Pourquoi mon dégradé SVG flouté a-t-il des bords nets ? La zone du filtre rogne le flou. Agrandissez-la avec `x="-50%" y="-50%" width="200%" height="200%"` sur l’élément filter.