Implementación de degradado SVG

¿Es posible recrear este tipo de degradado borroso en un SVG?

ingrese la descripción de la imagen aquí

Respuestas (3)

Si y no.

Es posible crear una malla de degradado en Inkscape y guardarla como un SVG. Sin embargo, los estándares SVG utilizados en los navegadores aún no admiten mallas de degradado. Esto podría cambiar en el futuro, pero por el momento no.

ingrese la descripción de la imagen aquí

Otro método que funciona en los navegadores es agregar varios objetos sólidos, desenfocarlos y colocarlos en una máscara de recorte. Esta sigue siendo una solución vectorial pura, no está rasterizada.

ingrese la descripción de la imagen aquí

Aquí está el SVG para la versión que funciona en los navegadores, si lo desea.

Editar : el enlace anterior al SVG ya no está disponible, así que lo eliminé.

¡Eso es genial! Sin embargo, el SVG en el enlace no se parece en nada al inserto proporcionado en su respuesta ... se ve mucho más claro. ¿Alguna razón para esto?
@JaredGarcia No tengo idea de por qué: mi captura de pantalla coincide exactamente con el SVG en mi computadora en Inkscape, pero asegúrese de estar usando la versión más reciente de Inkscape, ahora en la versión 0.92
Ah, lo estaba viendo en el navegador de mi móvil directamente desde ese enlace de descarga. Lo abriré en Inkscape y lo revisaré.
Ahora, esto está fuera del alcance de esta pregunta, por lo que obviamente entiendo si lo ignora, pero ¿sabría cómo hacer que el gradiente se anime como una especie de movimiento de lámpara de lava?
@JaredGarcia publique eso como una nueva pregunta para que pueda responderse correctamente.
@JaredGarcia: Inkscape no tiene capacidades de animación, pero puede animar SVG codificando. Nunca lo he hecho, pero supongo que podrías buscarlo en Google.
El desenfoque en los navegadores es realmente costoso. Puede obtener el mismo efecto superponiendo degradados de fondo. Estos son incluso animables. Y puede usar el modo de combinación de fondo para obtener un efecto adicional en los navegadores modernos.
Un ejemplo rápido e imperfecto: codepen.io/pieter-biesemans/full/OQgBqV
¿Cómo puedo tomar una malla de degradado y convertirla en algo compatible con SVG 1?

Se puede hacer en Illustrator e Inkscape como malla de degradado. Cuando se guarda como SVG en Illustrator heredado, se transforma en una imagen de mapa de bits. Obviamente, Illustator lo sabía hace unos 6 años, pero el lenguaje SVG no.

Cuando se guardó en Inkscape como SVG simple, no como SVG de Inkscape, se mantuvo como una malla de degradado y al abrir el archivo SVG con un editor de texto reveló que hay un degradado de malla de comando. Ver el fragmento de código

ingrese la descripción de la imagen aquí

Entonces, sin conocer los estándares, puedo decir "Al menos está implementado en el SVG simple de Inkscape".

Con suerte, alguien que sea programador consciente del estado de desarrollo de SVG diga algo exacto.

Puede incluir código directamente aquí con el formato de código adecuado. No es necesario publicar una captura de pantalla.
Lamentablemente, las mallas de degradado de Inkscape aún no son compatibles con Google Chrome o Firefox.
¿Puedes publicar el código svg?
@JaredGarcia No lo tengo. Llené solo 10 nodos de 25 para ver si da el aspecto correcto. Puedes hacerlo tú mismo. Importa la imagen a Inkscape, haz un cuadrado del mismo tamaño, establece su tipo de relleno = malla de degradado, agrega 3 filas y columnas más con la herramienta de malla, con la herramienta de nodo selecciona uno a uno los nodos y con el selector de color toma el color de la imagen importada. Guárdelo como SVG simple, ábralo en Win Notepad para ver el código.

Si su objetivo es tener un degradado de malla ligero y escalable, puede probar este método:

https://peterhrynkow.com/performance/2019/01/13/explotando-imágenes-para-hacerlas-pequeñas.html

No es un vector, pero bien podría serlo, ya que el tamaño del archivo es muy pequeño y la imagen se escala infinitamente.

¡Bienvenido a GDSE - glaf para tenerte aquí! Eche un vistazo alrededor y tenga una idea de cómo nos gusta preguntar Cómo preguntar y responder preguntas de Cómo responder. Probablemente también sea una buena idea mirar los códigos de comportamiento general mientras busca en el centro de ayuda . Su respuesta es una buena respuesta en términos de la aplicabilidad de lo que ha compartido, pero aquí en GDSE preferimos usar enlaces solo como referencia. o para vincular recursos, ya que los enlaces cambian o desaparecen con demasiada facilidad: ¿podría resumir el contenido al que está vinculando en el cuerpo de su respuesta, por favor?
Implementación de degradado SVG
RespuestasAquíPolítica de privacidad1y, 1v