1

I've been using http://www.webgraphviz.com/ to generate some graphs. That page works by dynamically rendering SVG into the HTML of the same page.

I'd like to be able to copy the SVG images from the page and use them in a tool like Inkscape for further editing. But trying the obvious copy/paste doesn't work (in Chrome). It doesn't seem like the browser recognizes the SVG artwork as graphics in the way it would for a PNG or JPEG.

Ideally what I would like to do is copy/paste the SVG image as simply as you can do for bitmapped images.

Note that on the pages I used above, viewing the source doesn't work either because of the dynamic nature of the page. In the source it just shows:

<div id="graphviz_svg_div">
  <!-- Target for dynamic svg generation -->
</div>

But even if it were there, that's really just a workaround. It would be useful to get the SVG text if there was no other approach, but that's not really what I'm looking for.

Improve this question
8
  • What have you tried?
    – Burgi
    Commented Dec 13, 2019 at 10:44
  • @Burgi I already explained that I tried copy/paste and I also looked in the page source for SVG tags, but they were not there. I was not sure what else might be possible.
    – StayOnTarget
    Commented Dec 13, 2019 at 12:40
  • If you are using Firefox, press F12 and the SVG appears in the markup on the dev console. Does that work for you? If it does I'll write up a full answer.
    – Burgi
    Commented Dec 13, 2019 at 13:02
  • @Burgi I generally use Chrome but any solution could be useful. Also might benefit someone else.
    – StayOnTarget
    Commented Dec 13, 2019 at 13:15
  • You should be able to either right-click on the SVG and save it to the PC as an .svg file, or print it to PDF and extract it from there. Granted, neither is likely the efficient process you're likely looking for.
    – JW0914
    Commented Dec 13, 2019 at 14:09

1 Answer 1

Reset to default
4

It should be possible to retrieve the markup for your SVG using the developer console built into most modern browsers.

Chrome & Firefox

After you have generated your SVG, press F12 to launch the developer console. You can also rightclick on the graph and select "Inspect". This will highlight that element in the developer console.

If you navigate up the DOM tree you will find the parent SVG tag. Click on this to select it. Rightclick on the SVG tag and select "Copy" then select "Copy Outer HTML". This will put the entire markup for the SVG into your clipboard, from there you can paste it into your favourite text editor and save it with the SVG file extension.

Improve this answer
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .