javascript - Save Grab svg from website to local machine or convert to image - Stack Overflow

admin管理员组

文章数量:1289541

Is there a way how I can grab html svg from a webpage using js console in Chrome e.g.? Svg code is wrapped with svg tag. And is it possible to save svg to local machine? or convert it to the image? and is it possible to import svg data ( e.g. charts/ graphs ) to google docs or excel?

Is there a way how I can grab html svg from a webpage using js console in Chrome e.g.? Svg code is wrapped with svg tag. And is it possible to save svg to local machine? or convert it to the image? and is it possible to import svg data ( e.g. charts/ graphs ) to google docs or excel?

• javascript
• svg

Share Improve this question Follow asked Sep 10, 2013 at 14:35 NGixNGix 2,66299 gold badges3030 silver badges4040 bronze badges 1

• 3 It is possible to use the web inspector to copy the SVG element. Within web inspector click on the SVG node, copy, paste into a text document and save with SVG extension. Then you can convert it with desktop software (Illustrator, Inkscape and others). – methodofaction Commented Sep 10, 2013 at 14:57

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You have access to the plete dom and the js objects provided by the browser ( eg. a xpath processor) as well as external libraries.

so all you need is a unique identification of the svg element in question.

start off importing jquery on the fly and selecting all svg elements on the page. this assumes that you have loaded the page you are investigating and have opened the console. the following statements should be entered at the mand prompt:

var e = document.createElement('script');
e.setAttribute('type','text/javascript'); 
e.setAttribute('src','http://code.jquery./jquery-1.10.2.min.js'); 
(document.getElementsByTagName('head'))[0].appendChild(e);

$('svg');

the last mand will provide you with a dom fragment containing the svg element.

the preceding vanilla javascript mands add a script element referencing the jquery library to the current web page. jquery simplifies the dom handling substantially, however, it is not necessary strictly speaking (see fr32c's answer).

if you're done, choose the 'reveal in elements panel' entry of the context menu of the console output just generated. you'll be redirected to the element inside a folding hierarchy representation of the page dom. choose 'copy as html' from the context menu of the svg element selected. save the clipboard data as a svg file.

Note

in chrome (29) and opera (12), jquery is imported in the console, which reduces the element query to $('svg') (thanks to Ir0nm for this information).

Answering part one of your question :

If you're trying to locate the svg tag by the console, you can get it with : document.getElementsByTagName('svg')[0] if you have multiple svgs embedded on the page, change the [0] (or remove it) to catch the right part. From there, you could right click to view that svg element in the elements panel, and from there copy as xhtml. (i tried that line with this page : http://www.w3schools./html/html5_svg.asp )

In webkit browsers you can right click on SVG element and choose "Inspect Element". this will open the Web Inspector tool. Typically from there you can right click on the svg node and "Copy As HTML", or from the console type $0.outerHTML

Then paste SVG into a local document. You could then use phantomjs to rasterize it.

Old versions of Opera (v12 and older) had the unique ability to right click the SVG image, and "Copy Image"; this would put a raster image on your clipboard - (I abused this feature back in the day.) - disclaimer: i use a mac, may be different on windows.

Just been looking at this and came across svg-crowbar - a chrome specific bookmark. You put it on your bookmark bar, and on a page with SVG you click on the bookmark. A box will hover over each SVG with a download button.

The downloaded SVG also includes the relevant style information, in case the SVG has been styled using CSS.

Solutions that work for me (on a Mac):

1 - Drag the Logo to your desktop (any browser)

In some cases, the code of the page allows you to drag the .SVG file from the website directly onto your desktop or chosen folder. Super easy!

2 - Print to PDF (Safari, Firefox)

This requires a little more work and might now always work. On the Print dialog, go to PDF > Save as PDF. The preview should allow you to see if the logo will be exported or not (sometimes, it doesn't work). After export, you can open the file in the vector editing app of your choice.

3 - Drag and drop from Chrome's Inspector

This one might work in desperate cases. Inspect the logo element, and hover over its name. A little window with a thumbnail will appear with the logo inside. Click the small logo, drag it to a folder.

There might be other solutions like mentioned above (copy the code and convert it somehow - in the third website example I showed this didn't work because the code looks like this, or SVG Crowbar also works sometimes (and sometimes not - like when the download boxes are overlapping).

本文标签： javascriptSave Grab svg from website to local machine or convert to imageStack Overflow