Dégradé maillé en SVG : ce qui fonctionne aujourd’hui

Un vrai dégradé maillé SVG ne fonctionne pas dans les navigateurs aujourd’hui. L’élément <meshgradient> 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é, 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.

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 <img> 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.

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <defs>
    <filter id="soften" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="120" />
    </filter>
  </defs>
  <rect width="1200" height="800" fill="#0f0b1e" />
  <g filter="url(#soften)">
    <circle cx="260" cy="200" r="260" fill="#7c3aed" />
    <circle cx="900" cy="160" r="240" fill="#f472b6" />
    <ellipse cx="760" cy="640" rx="360" ry="220" fill="#0ea5e9" />
    <circle cx="200" cy="700" r="200" fill="#312e81" />
  </g>
</svg>

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.

Méthode 2 : des dégradés radiaux empilés

Chaque <radialGradient> 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.

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <defs>
    <radialGradient id="a" cx="0.2" cy="0.25" r="0.6">
      <stop offset="0" stop-color="#7c3aed" />
      <stop offset="1" stop-color="#7c3aed" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="b" cx="0.8" cy="0.2" r="0.55">
      <stop offset="0" stop-color="#f472b6" />
      <stop offset="1" stop-color="#f472b6" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="c" cx="0.6" cy="0.85" r="0.65">
      <stop offset="0" stop-color="#0ea5e9" />
      <stop offset="1" stop-color="#0ea5e9" stop-opacity="0" />
    </radialGradient>
  </defs>
  <rect width="1200" height="800" fill="#0f0b1e" />
  <rect width="1200" height="800" fill="url(#a)" />
  <rect width="1200" height="800" fill="url(#b)" />
  <rect width="1200" height="800" fill="url(#c)" />
</svg>

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 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.

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 <image> 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.

Choisir la bonne méthode

1. 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.

2. 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. 3

   Laissez une zone calme

   Gardez une zone proche de la couleur de fond, là où se placera un titre.

4. 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 sont l’étape suivante.