2

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?

Improve this question
1
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Vincent
    Jan 24, 2017 at 13:57

1 Answer 1

Reset to default
5

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):

And a related question on Stack Overflow:

Improve this answer
9
  • ok, let me see if i understand this correctly. by using that php function i can print out the list of nodes to the browser and then simply copy and paste all of them?!?!
    – oldboy
    Jan 18, 2017 at 10:35
  • No, there's no need to copy/paste anything, you literally use that in your file (assuming you're site is using PHP).
    – Cai
    Jan 18, 2017 at 10:36
  • 1
    That PHP literally prints the SVG in the HTML so it is inline. Or you copy/paste directly in to your HTML, just open the SVG in a text editor (e.g. notepad), select all, copy, paste. There's no need to copy individual nodes.
    – Cai
    Jan 18, 2017 at 10:38
  • 2
    @user2230470 hit ctrl+a, then ctrl+c and ctrl+v?
    – joojaa
    Jan 18, 2017 at 11:13
  • 1
    Re: Plain SVG vs Inkscape SVG, Inkscape appropriately puts all non-standard information in the inkscape namespace, which is perfectly valid SVG. Most applications (and browsers) have no trouble with that, and will ignore it. Plain SVG remove all that extra information, and is usually only needed when an application isn't playing nice with the additional namespace.
    – Scribblemacher
    Jan 18, 2017 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.