Mobile app version of vmapp.org
Login or Join
XinRu324

: Exporting SVG paths to HTML to animate with JavaScript I have a complex blueprint, which I've traced in Inkscape. I'm going to programmatically animate the path and also add some other effects

@XinRu324

Posted in: #Export #Html #Inkscape #Javascript #Svg

I have a complex blueprint, which I've traced in Inkscape. I'm going to programmatically animate the path and also add some other effects with JavaScript. I can include the file using HTML (e.g. <img src="filename.svg"/>) but then how do I manipulate each path in that SVG file?

So far what I've been doing is manually transferring the values to HTML by copying and pasting (e.g. <svg><path d="x,y x,y x,y..."/>), I can then attribute ids and classes to each path and use those ids and classes to manipulate the paths using JavaScript, but it is extremely time consuming. There has to be a better, faster way to do this.

I've looked everywhere, and I've only been able to find instructions for exporting paths using Python, which I don't have installed on this Windows system.

Are there any ways to do this natively in Inkscape? Or any other ways that you are aware of?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @XinRu324

1 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi706

If your goal is to access the SVG from your HTML (e.g. to animate with JavaScript or style with CSS) then you do need to use the SVG inline (as in paste the raw SVG code in the HTML), if you use your SVG with an <img> tag or as a CSS background-image then you can't access the SVG's DOM from your HTML document.

The easiest way to include your file, if you're using a server-side language like PHP, is to include the file's contents; something like:

<?php echo file_get_contents("my_svg.svg"); ?>


That will literally print the contents of the SVG in the HTML, unlike using an <img> tag which simply renders the image.

If you're working solely with HTML then you do need to copy and paste the SVG code in to your HTML, but you can copy and paste the entire SVG, no need to grab specific path attributes or anything. Since SVG is simply XML, you can open the file in a text editor (e.g. Notepad or TextEdit) or your HTML editor and grab the code.

Inkscape does have an XML editor which may be of use to you, I'm not sure if you can copy the entire code from there though. It's also worth noting that Inkscape, by default, saves files as it's own type of SVG with some Inkscape specific tags and commands (they are appropriately namespaced so it shouldn't cause an issue but you never know) so it may be better to save your file as Plain SVG.

You can read more about using SVG (and accessing the SVG with external JavaScript and CSS) at this CSS-Tricks article (I linked to the relevant part of the article):


CSS-Tricks: Using SVG


And a related question on Stack Overflow:


How do you access the contents of an SVG file in an <img> element?

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme