Tengo un plano complejo, que tracé en Inkscape. Voy a animar la ruta mediante programación y también agregaré algunos otros efectos con JavaScript. Puedo incluir el archivo usando HTML (p. ej <img src="filename.svg"/>.), pero luego, ¿cómo manipulo cada ruta en ese archivo SVG?
Hasta ahora, lo que he estado haciendo es transferir manualmente los valores a HTML copiando y pegando (por ejemplo <svg><path d="x,y x,y x,y..."/>), luego puedo atribuir identificadores y clases a cada ruta y usar esos identificadores y clases para manipular las rutas usando JavaScript, pero es extremadamente pérdida de tiempo. Tiene que haber una forma mejor y más rápida de hacer esto.
Busqué en todas partes y solo pude encontrar instrucciones para exportar rutas usando Python, que no tengo instalado en este sistema Windows.
¿Hay alguna forma de hacer esto de forma nativa en Inkscape? ¿O alguna otra forma que conozcas?
Si su objetivo es acceder al SVG desde su HTML (por ejemplo, para animar con JavaScript o diseñar con CSS), entonces necesita usar el SVG en línea (como para pegar el código SVG sin procesar en el HTML), si usa su SVG con una <img>etiqueta o como una imagen de fondo CSS, entonces no puede acceder al DOM de SVG desde su documento HTML.
La forma más fácil de incluir su archivo, si está utilizando un lenguaje del lado del servidor como PHP, es incluir el contenido del archivo; algo como:
<?php echo file_get_contents("my_svg.svg"); ?>
Eso literalmente imprimirá el contenido del SVG en el HTML, a diferencia de usar una <img>etiqueta que simplemente muestra la imagen.
Si está trabajando únicamente con HTML, entonces necesita copiar y pegar el código SVG en su HTML, pero puede copiar y pegar todo el SVG, sin necesidad de obtener pathatributos específicos ni nada. Dado que SVG es simplemente XML, puede abrir el archivo en un editor de texto (p. ej., Notepad o TextEdit) o su editor de HTML y obtener el código.
Inkscape tiene un editor XML que puede serle útil, aunque no estoy seguro de que pueda copiar el código completo desde allí. También vale la pena señalar que Inkscape, de forma predeterminada, guarda los archivos como su propio tipo de SVG con algunas etiquetas y comandos específicos de Inkscape (tienen el espacio de nombres apropiado, por lo que no debería causar un problema, pero nunca se sabe), por lo que puede ser mejor guardar su archivo como SVG simple .
Puede leer más sobre el uso de SVG (y el acceso a SVG con JavaScript y CSS externos) en este artículo de CSS-Tricks (enlacé a la parte relevante del artículo):
Y una pregunta relacionada sobre Stack Overflow:
inkscapeespacio de nombres, que es un SVG perfectamente válido. La mayoría de las aplicaciones (y navegadores) no tienen problemas con eso y lo ignorarán. El SVG simple elimina toda esa información adicional y, por lo general, solo se necesita cuando una aplicación no funciona bien con el espacio de nombres adicional.
Vicente