¿Cómo crear una ruta SVG a partir de un lineart?

Tengo un dibujo lineal en formato PNG, a partir del cual necesito crear un SVG.

Necesito crear la ruta svg de derecha a izquierda, de izquierda a derecha, del centro a los lados O de los lados al centro. Aquí hay un ejemplo:

Imagen del horizonte

Necesito esto para un complemento jQuery (pintor de líneas perezosas) que anima este dibujo lineal en la secuencia de la ruta proporcionada en el archivo SVG.

Estoy usando Adobe Illustrator CS6 y crea una ruta SVG desordenada en el archivo SVG. Debido a esto, la animación comienza y finaliza abruptamente desde cualquier dirección (según la ruta SVG en el archivo SVG)

También tengo la versión portátil de Inkscape, aunque no sé cómo usar Inkscape para importar el PNG como vector de línea.

Por favor, ¿alguien puede sugerir una forma de hacer esto en Illustrator, Inkscape o cualquier otra utilidad?

Además, ¿cómo disminuir el archivo de salida SVG en Illustrator? Coloqué dos artes lineales PNG en Illustrator y luego las tracé . El archivo SVG de salida es de 470 kb, mientras que necesito menos de 40 kb. ¿Hay alguna herramienta en línea o complemento de Illustrator/Photoshop para optimizar la salida SVG a un tamaño de 40 kb?

Respuestas (1)

Tus problemas radican en los defectos inevitables de los vectorizadores, como el marcador que usaste. Por ejemplo, a continuación se muestra un primer plano de su imagen original y, superpuesto en rojo, el mejor calco que se me ocurrió con Inkscape en un minuto:

ingrese la descripción de la imagen aquí

Puedes ver lo siguiente:

  • La línea no se realiza como línea sino como área. Si bien esto se puede solucionar, podría explicar algunos de sus problemas.
  • En el nivel de píxel, hay muchas imperfecciones en su trazo.
  • Hay muchos más nodos de los realmente necesarios (lo que explica el gran tamaño de su archivo).

Si bien otro programa u otras configuraciones para el rastreador pueden ser mejores que esto, los problemas básicos permanecerán, ya que los algoritmos informáticos son mucho peores que los humanos para reconocer formas y similares.

Por lo tanto, para lograr un resultado satisfactorio, probablemente necesite volver a dibujar ese horizonte usted mismo. Dado que consiste principalmente en formas geométricas simples, esta debería ser una tarea bastante fácil.

A continuación se muestran los resultados de un redibujado rápido de ese primer plano que hice en menos de un minuto (con la advertencia de que tengo algo de experiencia en hacer esto).

ingrese la descripción de la imagen aquí

Tenga en cuenta en particular, cuán pocos nodos usé.

Si intenta esto, no olvide hacer uso de herramientas para alinear nodos entre sí y hacer ángulos rectangulares, si corresponde.

Si lo anterior no es suficiente para reducir el tamaño de su archivo SVG, puede deshacerse de alguna información falsa (es decir, metadatos y otra información que no se requiere realmente para renderizar la imagen o lo que desea hacer) que Inkscape almacena en archivos SVG guardando su archivo como un SVG simple en lugar de Inkscape SVG y por vacío Defs.

No importa cuál sea el programa, también puede identificar información espuria en la fuente XML del SVG a mano y luego escribir un pequeño script para purgarla.

Consulte también esta pregunta sobre Superusuario sobre esto.

"probablemente necesite volver a dibujar ese horizonte usted mismo" - ¿no hay forma de automatizarlo? ¿Podría esto ser de alguna utilidad? github.com/fablabnbg/inkscape-centerline-trace
@Mawg: Dados los estrictos requisitos y la aplicación del OP, diría que no debido a las razones explicadas en la pregunta. Si eres más indulgente con respecto al resultado que aceptas, la situación es, por supuesto, diferente.
¿Cómo crear una ruta SVG a partir de un lineart?
RespuestasAquíPolítica de privacidad1y, 0v