La exportación SVG de Illustrator CC distorsiona las rutas

Estoy tratando de crear algunos íconos para agregar a la biblioteca Glyphicons.

Los he creado usando la herramienta pluma (formas) en Adobe Illustrator CC, son ultrabásicos. Como PNG o EPS se exportan bien. Desafortunadamente, necesito la exportación SVG para usar con Glyphicons.

Cuando exporto a SVG, las formas parecen moverse. Por lo menos no quedan como aparecen en mi pantalla.

¿Cómo puedo hacer que aparezcan como lo hacen en Illustrator?

Este es un PNG del ilustrador interno.ingrese la descripción de la imagen aquí

Este es un PNG de la vista previa, este es el SVG.Las formas están claramente dispuestas de manera diferente.

Claramente, las formas se desalinean después de la exportación, ¿hay alguna razón obvia para esto? Todas mis configuraciones de exportación están configuradas como predeterminadas.

¿Podría darnos información detallada sobre cómo se crea la geometría? ¿Alguna posibilidad de una imagen en la que se seleccionen todos los objetos para ver los anclajes? También para números redondos use cuadrícula
¡Gracias por plantear la pregunta! yo sufría lo mismo

Respuestas (6)

Cambie "Posiciones decimales" a 3 en el cuadro de diálogo "Opciones de SVG" que aparece al guardar como SVG:

captura de pantalla

¡Es un trabajo como el encanto! Hombre genial
¡¡¡GRACIAS!!! ¿Por qué diablos Adobe pensaría que 1 decimal era todo lo que necesitabas?

Este es un error común en el archivo .SVG... eso se debe a que las curvas duras (curvas hechas con solo dos anclajes y manijas largas) no pueden ser procesadas correctamente por el navegador.

Lo mejor que puedes hacer es dividir tu camino en segmentos más pequeños, especialmente alrededor del ancla que tiene el problema.

solo ve aObject > Path > Add Anchor Points

Eso no pareció tener ningún efecto en absoluto. Además, leí en alguna parte que debería intentar mantener el mínimo número posible de puntos de anclaje para ayudar con los tiempos de carga para la representación móvil de SVG. ¿Es eso una tontería total o es una especie de acto de equilibrio?

Tiendo a obtener los mejores resultados de mis guardados SVG cuando las coordenadas de mis objetos tienen valores decimales limpios. Por ejemplo, un objeto en X = 100,452 se movería a X = 100,5. He experimentado ligeros movimientos similares a su problema al dejar objetos en coordenadas con partes fraccionarias desordenadas.

Interesante, como se logra eso. ¿Debe ser un verdadero dolor colocar cosas con tanta precisión?
@AndrewPeachey No es muy difícil. Simplemente haga clic en el objeto y haga clic en las flechas hacia arriba o hacia abajo junto a la posición para redondearlo al siguiente número.
ah Por supuesto. Tiene sentido. Saludos, investigare.
Si está animando un SVG, esto acelera las cosas, manteniéndolos en un píxel. Es más difícil para las computadoras procesar números de punto flotante. Y más difícil para las pantallas adivinar si debería estar 1 píxel a la izquierda o a la derecha.

Solución encontrada.

Claramente, esta no es la solución mejor, más limpia y más hermosa, pero funciona excepcionalmente bien.

Mi proceso:
1. Dibujar el icono en Illustrator
2. Guardar como archivo .ai
3. Abrir .ai en OSX iDraw
4. Exportar a SVG desde iDraw

Solución simple:
1. Dibujar el icono en iDraw
2. Exportar a SVG desde iDraw

Espero que esto ayude a otras personas

También he tenido problemas para exportar e intenté:

File>Save as

en vez de:

File> Export> Export as.

¡Y eso pareció funcionar!

Como descubro, este problema aparece solo si exporta "solo seleccionado". Cuando el exportador no ve los bordes (página), algo falla con las curvas.