# Degradados de malla en SVG: lo que funciona hoy [Canonical HTML page](https://gradiently.design/es/guide/mesh-gradient-svg) Puedes escribir un elemento meshgradient, e Inkscape incluso te lo genera, pero los navegadores no dibujarán nada. Estas son las técnicas que dan el mismo aspecto suave y multicolor y que sí se renderizan. ## The short version - El elemento meshgradient se propuso en los borradores de SVG 2, pero ningún navegador importante lo implementó y no forma parte del estándar publicado que siguen los navegadores. - Inkscape puede crear degradados de malla, y sus exportaciones dependen de un polyfill de JavaScript para renderizarse en los navegadores. - La forma más fiable de conseguir un aspecto de malla en SVG son unas pocas formas de color suavizadas con feGaussianBlur, o varios degradados radiales apilados con bordes transparentes. - Una imagen rasterizada exportada desde una herramienta de diseño es la opción más sencilla cuando el degradado nunca tiene que cambiar, y WebP o PNG la mantienen ligera. - Elijas el método que elijas, añade un grano ligero sobre el resultado para ocultar las bandas en las transiciones suaves. Un **degradado de malla SVG** de verdad no funciona hoy en los navegadores. El elemento `` 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](https://gradiently.design/es/guide/mesh-gradients), 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. ### No se renderiza en navegadores - `` con `` y `` - Mallas de degradado de Illustrator guardadas como SVG editable - Malla de Inkscape exportada sin su polyfill - Patrones ``, del mismo borrador ### Se renderiza en todas partes - Formas desenfocadas con `feGaussianBlur` - Varios rellenos ``, apilados - Una imagen PNG o WebP incrustada - Pilas de radiales en CSS o un canvas WebGL 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 `` 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. ```html ``` Amplía la región del filtro para que el desenfoque no se corte en los bordes de las formas. Un stdDeviation de alrededor de una décima parte del ancho del lienzo da sensación de malla. - Violeta, rosa y celeste sobre tinta: `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)` - Brasa, rosa y mantequilla sobre crema: `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)` - Esmeralda, verde azulado e índigo: `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)` Vistas previas de tres composiciones de manchas desenfocadas. La primera es el SVG de arriba; los colores están donde están las manchas. 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](https://gradiently.design/es/guide/blurry-gradient). ## Método 2: degradados radiales apilados Cada `` 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. ```html ``` Funde hacia el mismo color con opacidad cero en lugar de hacia `transparent`, lo que mantiene limpios los bordes en todos los renderizadores SVG, incluidos los antiguos. Esto se traduce casi uno a uno a CSS, que a menudo es su mejor sitio. [Degradados de malla en CSS](https://gradiently.design/es/guide/css-mesh-gradient) 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](https://gradiently.design/es/guide/svg-gradients). Radiales apilados, versión 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)` El SVG de arriba escrito como un único fondo CSS. Cópialo si el degradado solo vive en una página web. ## 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 `` o usarla como fondo CSS. Pierdes la independencia de resolución, pero conservas cada curva de la malla original. > **Añade grano antes de exportar** Las transiciones suaves de una malla forman bandas con facilidad al comprimirse. Una capa ligera de ruido, como la de [feTurbulence en SVG](https://gradiently.design/es/guide/svg-noise-filter), oculta los escalones y mantiene un tamaño de archivo razonable. ## Cómo elegir el método adecuado | Método | Archivo | Escala | Ideal para | | --- | --- | --- | --- | | Formas desenfocadas | SVG mínimo | Sí | Manchas orgánicas, fondos estáticos | | Radiales apilados | SVG o CSS mínimo | Sí | Fondos web rápidos y nítidos | | Exportación ráster | Imagen mediana | No | Mallas exactas de herramientas de ilustración | | Inkscape más polyfill | SVG y script | Sí | Usuarios de Inkscape que necesitan parches reales | | Shader WebGL | Script | Sí | Superficies animadas, iluminadas, interactivas | Los cinco dan un aspecto de malla. Solo el polyfill renderiza parches de malla reales, y solo el shader se mueve con poco coste. 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](https://gradiently.design/es/guide/muddy-gradients). 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. **Deja una zona tranquila** Reserva una zona cercana al color de fondo donde irá un titular. 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](https://gradiently.design/es/guide/shader-gradients) son el siguiente paso. ## FAQ ### ¿Los navegadores admiten degradados de malla SVG? No. El elemento meshgradient se redactó para SVG 2, pero ningún navegador importante lo implementó, así que no renderiza nada sin un polyfill de JavaScript. ### ¿Cómo hago un degradado de malla en SVG que funcione? Desenfoca unos cuantos círculos de color con feGaussianBlur, o apila varios rellenos radialGradient que se funden a transparente. Ambos se renderizan en todos los navegadores. ### ¿Puedo usar degradados de malla de Inkscape en una web? Sí, si incluyes el polyfill de JavaScript que Inkscape puede añadir al guardar. Sin él, los navegadores ignoran la malla, y no funcionará dentro de una etiqueta img. ### ¿Es mejor un degradado de malla en CSS que en SVG? Para un fondo que solo vive en una página web, las pilas de radiales en CSS son más sencillas. SVG es mejor cuando el degradado tiene que existir como archivo independiente. ### ¿Por qué mi degradado SVG desenfocado tiene bordes duros? La región del filtro está recortando el desenfoque. Amplíala con x="-50%" y="-50%" width="200%" height="200%" en el elemento filter.