User Tools

Site Tools


inkscape

Inkscape

Tips

Importing an SVG from an HTML document

Dunno if there's an easier way to do this, but there is a potentially tedious way!

  1. First you want to grab the markup from the HTML document. either grab everything in the <svg> element, or just everything in the <g> element.
  2. Then in Inkscape you want to open the XML Editor: either
    • Edit > XML Editor … or
    • Ctrl+Shift+X
  3. The leftmost button in the XML Editor creates a 'new element node'; press that, and call the node svg:path - With that element/node selected, select the 'id' attribute in the window to the right. You can change the name if you wish, but either way press 'set' to fill out more details.
  4. There should now be a 'd' element, select this, and insert all the info. from the d attribute of the markup you've grabbed from the web. It'll be inside the path element. Then click 'set'.
  5. Repeat this process of creating nodes, setting the ids, and pasting in the d (lol) stuff for all paths you're importing.
  • If your path has other attributes (for example fill or fill-rule) you can add that i nthe usual way you would in Inkscape, or create a style attribute where the 'id' and 'd' ones are.
inkscape.txt · Last modified: 2020/11/02 16:42 by rjt