¿Cómo puedo analizar esta imagen SVG descargada de la web?

Mientras miraba algunos diseños de algunos sitios web, me encontré con un hermoso fondo SVG:

https://www.algolia.com/lp/img/hero/hero-magento.svg

Quería inspeccionarlo, así que lo descargué. De ninguna manera quiero usarlo en mis propias obras. Solo me gustaría ver cómo se hace técnicamente, así que tal vez pueda usar la misma técnica.

Sin embargo, tan pronto como lo abrí en Inkscape, no veo la imagen original, sino solo el fondo azul:

ingrese la descripción de la imagen aquí

¿Por qué aparece el fondo azul cuando lo abro con Inkscape? ¿Cómo puedo verlo como lo veo en el navegador? ¿Existe algún tipo de protección de la que no tenga conocimiento? Si es así, ¿cómo funciona? (Tal vez pueda usarlo también para mis propios archivos SVG...)

Repito, no quiero robar nada; Solo quiero echar un vistazo y ver cómo se hace para aprender algo nuevo.

Asegúrese de tener instalada la última versión de InkScape
Lo comprobaré ahora, ¿lo ves correctamente en tu Inkscape?

Respuestas (2)

Podría hacer que el patrón sea visible de esta manera:

  • Cargué el svg en Inkscape 0.92.4 y solo vi esa forma de fondo azul oscuro.
  • Establecí la vista en Contorno. Eso hizo que las formas fueran visibles.
  • Inkscape dijo que el dibujo era un grupo de dos objetos, así que seleccioné todo y desagrupado.
  • Inkscape dijo que las formas irregulares eran un grupo de 5 objetos, enmascarados en raíz.
  • Me quité la máscara y me desagrupé.
  • La forma regular obviamente estaba delante de las irregulares, así que la envié atrás.

Y ahora todo estaba bien.

Gracias por su explicación. ¡Funcionó!

Análisis de archivos SVG

Los archivos SVG finalmente son texto sin formato. Una persona que tiene el pensamiento y el conocimiento de un programador puede leerlo, por ej. con editor de texto. me lo salto

Analizar el código SVG y saber cómo los diferentes programas de aplicación interpretan el código es la única forma de entenderlo correctamente. Verificar el árbol de estructura de capas y objetos en un programa gráfico no es información primaria, ya se interpreta una vez.

Inkscape, Affinity Designer e Illustrator presentaron su archivo de manera diferente en sus paneles de capas y objetos. También lo interpretaron de manera diferente. Inkscape hizo solo un rectángulo distorsionado oscuro como en su captura de pantalla, otros también muestran algunas formas azules, pero de manera diferente.

Compruébalo en el panel de objetos de Inkcape. Tiene una agrupación oscura. Elimínelo con Extensión > Organizar desagrupación profunda. El color deseado se vuelve visible, pero la máscara de recorte desaparece.

Después de desagrupar, su imagen contiene rutas parcialmente transparentes rellenas de degradado y una ruta con relleno sólido.

La estructura parece simple, pero el relleno de degradado está de alguna manera fijo en la ubicación del grupo original, no se mueve cuando uno mueve las formas rellenas de degradado. Redefinir el degradado en Inkscape lo corrige. La desagrupación no arregló la imagen correctamente.

Apuesto a que ha encontrado algo que está definido en las especificaciones de SVG de forma ambigua. Esto es solo una suposición de un no programador.

¿Cómo puedo analizar esta imagen SVG descargada de la web?
RespuestasAquíPolítica de privacidad1y, 0v