¿Por qué se mueven mis elementos después de exportarlos a svg?

Soy bastante nuevo en Adobe Illustrator, pero estoy acostumbrado a PS.

Quería experimentar con Illustrator para crear SVG que luego se puedan manipular con JavaScript.

Creé una especie de capa de fondo y la llené con un rect. Que tenga un patrón como imagen de fondo (Adobes Waffelmuster - Doppelt ).

Luego creé una segunda capa y le agregué varios caminos rellenos. Traté de alinear estos caminos lo mejor que pude con el patrón de fondo de mi primera capa.

Cuando exporto mi gráfico como SVG, mis rutas no están alineadas con el fondo como en Illustrator. Parece que se movieron un poco hacia la derecha. Además, si hago zoom en Firefox (STRG,+), la falta de coincidencia se vuelve aún mayor.

¿Por qué es eso y cómo se puede prevenir? ¿Existe algo así como posicionamiento relativo y absoluto?

Intente colocar un rectángulo sin estilo ("invisible") (las dimensiones y ubicación exactas como el objeto de la capa de fondo) en la misma capa que la segunda capa. Quizás el origen y el tamaño de la ventana de los dos archivos SVG sean los mismos.

Respuestas (3)

Intente marcar "Conservar las capacidades de edición de Illustrator" mientras guarda, debería solucionar el problema.

Además, asegúrese de que:

  • "sensible" no está marcado
  • tu obra de arte no es más grande que tu lienzo
  • el tamaño de su lienzo no contiene valores decimales

Uso Illustrator para generar .svg para la web y funciona bastante bien.

Illustrator guardar como ventana emergente

Como alguien que tuvo bastante trabajo con la codificación de SVG exportados desde AI( Un ejemplo ), puedo decir que el problema es que AI no exporta SVG en un formato adecuado para la web. No completamente al menos.

Cuando usaba archivos SVG generados con IA, siempre tenía que masajear un poco las posiciones para mantener las proporciones que se veían originalmente mientras dibujaba con IA. En cuanto a cualquier cosa relacionada con la ruta/el gradiente, no encontré ninguna forma de exportar eso desde AI para imitarlo en un navegador.

Al final, el único beneficio REAL para desarrollar sus SVG en IA es obtener sus coordenadas. Lo siento si esto no es lo que quería escuchar, pero pasé casi 2 semanas tratando de modificar el proceso de exportación con usuarios profesionales de IA (más de 5 años) y lo mejor que obtuvimos: polígonos/líneas/círculos/etc. rellenos de color sólido. Es decir, estructuras alámbricas SVG, que eran consistentes (con cierto margen de error) con lo que había en la IA.

¿Se suponía que esa última oración no terminaría?
@Johannes tienes toda la razón... Arreglado.
Simplemente me hizo reír cuando lo leí, ¡no hay problema!
Si mi error involuntario te hizo reír, entonces me alegro de haberlo hecho: D. ¡Salud!

En lugar de guardar como .svg, intente exportar como .svg. ¡Funcionó para mí!