Degradados de malla en SVG: lo que funciona hoy

Un degradado de malla SVG de verdad no funciona hoy en los navegadores. El elemento <meshgradient> apareció en los borradores de SVG 2, donde los colores se sitúan en las esquinas de una cuadrícula de parches y se mezclan a través de cada uno, pero Chrome, Safari y Firefox nunca lo incorporaron. Para lograr el aspecto suave y multicolor al que la gente se refiere con un degradado de malla, lo construyes con cosas que sí se renderizan: formas desenfocadas, degradados radiales apilados, una imagen rasterizada o un shader.

Qué pasó con meshgradient

El elemento de malla formó parte de los borradores de trabajo de SVG 2 durante varios años. Describía una superficie como filas de parches de Coons, cada uno con cuatro colores en las esquinas y bordes curvos, que es como funcionan las mallas de degradado en el software de ilustración. Los fabricantes de navegadores no lo implementaron, y la función se quedó fuera de la versión de SVG 2 que salió adelante. Si pegas marcado de malla en una página, el navegador lo ignora y no rellena la forma con nada, o con un color de reserva si lo has definido.

Inkscape es la excepción destacada a la hora de crear. Su herramienta de malla genera marcado de malla real y, al guardar para la web, puede incluir un pequeño polyfill de JavaScript que dibuja la malla al cargar. Funciona, pero estás enviando un script para pintar un fondo, y no se renderizará en sitios que no ejecutan scripts, como una etiqueta <img> o muchos clientes de correo.

Método 1: formas desenfocadas

Es lo más parecido a una malla en SVG puro. Coloca de tres a cinco círculos o elipses rellenos donde quieras cada color y desenfoca mucho el grupo. El desenfoque mezcla los colores vecinos entre sí exactamente como lo hace una malla, y puedes mover cada mancha por separado.

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

El desenfoque tiene un coste. Un feGaussianBlur grande se recalcula cada vez que el SVG se repinta, así que úsalo para fondos estáticos y no para nada que se desplace o se anime. Para la misma idea hecha por completo en CSS, mira los degradados desenfocados.

Método 2: degradados radiales apilados

Cada <radialGradient> puede pasar de un color a transparente. Rellena varios rectángulos a tamaño completo, uno por degradado, y se superponen formando una malla. No interviene ningún filtro, así que es más ligero de renderizar que el desenfoque y se mantiene nítido a cualquier 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>

Esto se traduce casi uno a uno a CSS, que a menudo es su mejor sitio. Degradados de malla en CSS muestra la misma superposición con radial-gradient() y explica cómo controlar dónde se solapan los colores. La versión SVG tiene sentido cuando el fondo tiene que viajar como archivo, por ejemplo como descarga o como recurso de un sistema de diseño. Más sobre los elementos de degradado en degradados SVG.

Método 3: exportar un ráster

Si diseñaste una malla de degradado real en una herramienta de ilustración y nunca tiene que cambiar, expórtala como imagen. Una malla de 1920×1080 se comprime bien en WebP y se mantiene suave en PNG; puedes incrustarla con un elemento SVG <image> o usarla como fondo CSS. Pierdes la independencia de resolución, pero conservas cada curva de la malla original.

Cómo elegir el método adecuado

1. 1

   Elige de tres a cinco colores

   Los tonos vecinos se mezclan limpiamente. Los opuestos se encuentran en un centro turbio, como explica degradados turbios.

2. 2

   Coloca colores, no paradas

   Decide dónde vive cada color en el lienzo. Esa es toda la diferencia entre una malla y un degradado lineal.

3. 3

   Deja una zona tranquila

   Reserva una zona cercana al color de fondo donde irá un titular.

4. 4

   Termina con grano

   Un poco de ruido hace que la superficie parezca intencionada y oculta las bandas.

Cuando quieres un fondo con estilo de malla sin construirlo a mano, un Mark de Gradiently es una receta de colores, luz, material y grano que se renderiza en vivo a cualquier tamaño, mantiene su zona más tranquila detrás de tus palabras y se exporta con Pro como PNG, SVG o PDF. Para mallas animadas en una web, los degradados con shaders son el siguiente paso.