¿Es posible recrear este tipo de gradiente borroso en un SVG?
Implementación de gradiente SVG
Respuestas:
Si y no.
Es posible crear una malla de degradado en Inkscape y guardarla como 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 para el presente no.
Otro método que funciona en los navegadores es agregar varios objetos sólidos, desenfocarlos y ponerlos en una máscara de recorte. Esta sigue siendo una solución de vector puro, no está rasterizada.
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?
—
Jared Garcia
@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
—
Billy Kerr
Ah, lo estaba viendo en el navegador de mi móvil directamente desde ese enlace de descarga. Lo abriré en Inkscape y lo comprobaré.
—
Jared Garcia
@JaredGarcia publica eso como una nueva pregunta en su lugar para que pueda ser respondida adecuadamente.
—
Andrew T.
El desenfoque en los navegadores es realmente costoso. Puede obtener el mismo efecto aplicando capas de gradientes de fondo. Estos son incluso animables. Y puede usar el modo de mezcla de fondo para obtener un efecto adicional en los navegadores modernos.
—
PieBie
Se puede hacer en Illustrator e Inkscape como malla de degradado. Cuando se guarda como SVG en Illustrator heredado, se transforma en 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 Inkscape SVG, permaneció como malla de degradado y al abrir el archivo SVG con un editor de texto reveló que hay un comando de gradiente de malla. Ver el fragmento de código
Entonces, sin conocer los estándares, puedo decir "Al menos está implementado en el SVG simple de Inkscape".
Con suerte, alguien programador consciente del estado de desarrollo de SVG dice algo exacto.
Puede incluir el código directamente aquí con el formato de código adecuado. No es necesario publicar una captura de pantalla.
—
Wrzlprmft
Lamentablemente, las mallas de degradado de Inkscape aún no son compatibles con Google Chrome o Firefox.
—
Billy Kerr
¿Puedes publicar el código svg
—
Jared Garcia
@JaredGarcia No lo tengo. Llené solo 10 nodos de 25 para ver que da el aspecto correcto. Puedes hacerlo tú mismo. Importe la imagen a Inkscape, haga un cuadrado del mismo tamaño, configure su tipo de relleno = malla de degradado, agregue 3 filas y columnas más con la herramienta de malla, con la herramienta de nodo seleccione uno por uno los nodos y con el selector de color tome el color de la imagen importada. Guardar como SVG simple, abrir en el Bloc de notas de Win para ver el código.
—
user287001
Si su objetivo es tener un gradiente de malla ligero y escalable, puede probar este método:
https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html
No es un vector, pero podría serlo ya que el tamaño del archivo es súper pequeño y la imagen se escala infinitamente.
Bienvenido a GDSE - ¡Glaf para tenerte aquí! Por favor, eche un vistazo al recorrido y tenga una idea de cómo nos gusta preguntar cómo preguntar y responder cómo responder preguntas. Probablemente sea una buena idea mirar también los códigos de comportamiento generales mientras está mirando 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?
—
GerardFalla