: 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

@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?

Vote Up Vote Down