How to extract svg as file from web page

Question

I want to save SVG as file from this page https://www.lightningdesignsystem.com/icons/ Is there any Chrome extension or other way to do this?

click on the download link on the left and you can download the whole pack. — Syfer, May 05 '17 at 11:51

score 286 · Answer 1 · edited Nov 17 '20 at 21:03

286

When the SVG is integrated as <svg ...></svg> markup directly into the HTML page.

Right click on the SVG to inspect it in developer tools
Find the root of the <svg> element and right click to "Copy element"
Go to https://jakearchibald.github.io/svgomg/ and "Paste markup"
Download your optimized SVG file and enjoy

edited Nov 17 '20 at 21:03

mayersdesign

5,062
4
35
47

answered Nov 28 '19 at 18:34

Em-AK

3,104
2
12
11

11

like @lucidbrot comments in another answer "It's important to realize that the xmlns="..." is required even if it's not there in the inspect element page" – Norfeldt Jan 24 '20 at 21:52
3

I don't think this works if the SVG is styled by external CSS; it only works if the styling is contained within the SVG element. – Merchako Dec 23 '21 at 17:38
1

The xmnls part was crucial for me as well. Add it right after ` – René K Sep 03 '22 at 22:45
3

The tool is amazing, but in case you are using Firefox where in the inspector there's not a "Copy Element" option, you can either use Copy > Inner HTML on the – ManuAlvarado22 Sep 07 '22 at 21:21
Unfortunately very limited tool. Can't seem to handle larger svgs. – Artur Müller Romanov Oct 19 '22 at 14:38
it is error Load failed: SvgoParserError: :1:91: Unbound namespace prefix: "xlink" – huykon225 May 04 '23 at 06:42
Thank you for this! – Rami Jul 21 '23 at 16:33

mayersdesign · Accepted Answer · 2021-06-29T07:10:19.943

51

Unless I am misunderstanding you, this could be as easy as inspecting (F12) the icon on the page to reveal its .svg source file path, going to that path directly (Example), and then viewing the page source code with Control+u. Then just save that code.

To save the code, paste it into a text editor such as google docs. Then save the file as a .txt file. Change the end of that file's name from ".txt" to ".svg", and now you have your file as a .svg. This method does not involve getting any external extensions or downloading any programs, and it functions the same.

Referencing that Salesforce page specifically, you might want to note that their icons are freely available to download here: https://www.lightningdesignsystem.com/icons/ !

edited Jun 29 '21 at 07:10

answered May 05 '17 at 11:51

mayersdesign

5,062
4
35
47

4

Sure...that's easier haha, but doesn't (seem to be!) OP's question – mayersdesign May 05 '17 at 11:53
i have a strange feeling he wants to know how to download one then he will do the rest, i may be wrong :-) – Syfer May 05 '17 at 11:54
2

For some reason it does not work the same as for png or jpeg images. I see blank screen when going to svg directly and if in console there are some errors. – Vladyslav K May 05 '17 at 11:55
1

@VladyslavKushney I think they are coloring the SVG with CSS that's why its showing as white. – Syfer May 05 '17 at 11:57
@Syfer I noticed, indeed they are. luckily there is png in downloaded archive. – Vladyslav K May 05 '17 at 11:59
1

Just Save the elements as svg file – Bishoy Hanna Nov 13 '19 at 23:20
This works fine! You just have to save svg code as `.txt` file and open it in any code editor like VS Code to rename its extension to `.svg`. – akshay_sushir Feb 23 '22 at 05:05
true, legitimate anwer... omgsvg was better. the other answer should be the answer. – pixelfairy Jul 20 '22 at 18:07

score 41 · Answer 3 · answered Jan 11 '21 at 20:03

41

Based on a web search, I just found a Chrome plugin called SVG Export.

Available in the Chrome web store: https://chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp
The home page is https://svgexport.io

answered Jan 11 '21 at 20:03

David J.

31,569
22
122
174

svgexport.io did the trick to me. Thanks! – Phoinx Apr 29 '22 at 14:17
You saved my 2 hours. Thanks Bossman – I AM GROOT Jul 19 '23 at 02:55

score 31 · Answer 4 · edited Nov 17 '20 at 21:07

31

Here's a three step solution:

Copy the SVG code snippet, and paste it into a new HTML page.
Save the HTML page as (for example) "logo.html", and then open that HTML page in Chrome hitting > File > Print > "Save as pdf"
This PDF can now be opened in Illustrator - extracting the vector element.

edited Nov 17 '20 at 21:07

mayersdesign

5,062
4
35
47

answered Sep 07 '18 at 07:35

Pete Mandy

311
3
2

3

This is the only method I could get working. Thanks. You should also be able to use inkscape as described here: https://en.wikipedia.org/wiki/Wikipedia:Graphics_Lab/Resources/PDF_conversion_to_SVG – Robert Lugg Feb 10 '19 at 21:31
Very helpful. I managed to save with firefox a graph originated and manipulated dynamically from d3.js. However, the edges interactions was missing in the pdf. Fortunately, it works in chrome when printing showing all nodes and their edges. – daniel souza Feb 28 '19 at 22:13

score 16 · Answer 5 · answered Sep 04 '19 at 19:50

16

You can copy the HTML svg tag from the website, then paste the code on a new html file and rename the extension to svg. It worked for me. Hope it helps you.

answered Sep 04 '19 at 19:50

Abner Lima

169
2
4

1

This is the best answer, imho. You don't need any 3rd-party apps to convert, just simply rename the file from .html to .svg and your computer will treat it as an image file. – x.g. Feb 25 '20 at 00:31
Any suggestions for how to incorporate CSS that is found outside the ` – mlibby Jun 23 '21 at 13:43

score 6 · Answer 6 · answered May 05 '17 at 12:04

They are all logged under Elements in google chromes developer tools.

page

<svg><path xmlns="http://www.w3.org/2000/svg" d="M18.6 6.8l-4.3-2.2a.8.8 0 0 0-.6 0l-4 2-4.1-2a.7.7 0 0 0-.7.1.7.7 0 0 0-.3.6v10.8a.7.7 0 0 0 .4.6l4.3 2.1a.8.8 0 0 0 .6 0l4-2 4 2a.6.6 0 0 0 .3.1.7.7 0 0 0 .4-.1.7.7 0 0 0 .4-.6V7.4a.7.7 0 0 0-.4-.6zm-1.1 1.4v5.7a.4.4 0 0 1-.6.4c-1.2-.4-.3-2.3-1.1-3.3-.7-.9-1.7 0-2.6-1.4-.9-1.4.3-2.5 1.4-3a.5.5 0 0 1 .4 0l2.2 1.1a.5.5 0 0 1 .3.5zm-6.1 8.3a.5.5 0 0 1-.5-.1 1.6 1.6 0 0 1-.6-1.1c0-.7-1.2-.4-1.2-1.9 0-1.2-1.3-1.5-2.5-1.3a.5.5 0 0 1-.5-.5V7.2a.4.4 0 0 1 .6-.4l2.6 1.3a.1.1 0 0 1 .1 0l.1.1c1.1.6.8 1.1.4 1.9-.5.9-.7 0-1.4-.3s-1.5.3-1.2.8.9 0 1.4.4.5 1.2 1.9.8 1.7-.3 2.2.2a1.5 1.5 0 0 1 0 2.2c-.4.4-.6 1.3-.8 1.9a.5.5 0 0 1-.2.3z"/></svg>

It's important to realize that the `xmlns="..."` is required even if it's not there in the inspect element page — lucidbrot, Oct 18 '18 at 16:36

score 3 · Answer 7 · answered Feb 23 '22 at 05:37

@mayersdesign solution is fine But for me it's not working. You just have to save svg code as a .txt file and open it in any code editor like VS Code / Atom to rename its extension to .svg. Try to open svg in any browser, if it does not work then just add xmlns in svg start tag <svg xmlns="http://www.w3.org/2000/svg" > like this and you have your svg ready.

score 2 · Answer 8 · answered May 05 '17 at 11:59

2

You can download individual ones from their site like @mayerdesign has stated or you can click on the download link on the left and you can download the whole pack.

FULL PACK

answered May 05 '17 at 11:59

Syfer

4,262
3
20
37

score 2 · Answer 9 · answered Aug 06 '19 at 11:37

For me its very easy just install following tool in chrome server :

svg-grabber

Once you're on a web page, click the extension's icon next to the URL bar and a new tab will open showing you all the SVG files it found on the page. You can copy an SVG file to your clipboard, download only the few you need, or click the 'Download all SVGs' button to add them all to a zipped file and download them.

For detail check here

Hope it will helpful.

score 1 · Answer 10 · answered Aug 13 '19 at 21:10

1

On chrome when are in the SVG URL, you can do CTRL+S or CMD+S and it automatically propose you to save the page as an .SVG try it out : https://upload.wikimedia.org/wikipedia/commons/9/90/Benjamin_Franklin-10_Dollar_Bill_Portrait-Vector.svg

answered Aug 13 '19 at 21:10

stan

39
6

score 1 · Answer 11 · answered Jan 07 '21 at 22:05

When you're on a page that doesn't let you reach the SVG via its own URL (e.g. an inline SVG), you can print the page and select PDF as the target output. Once the PDF has been saved, you can open it in an image editor that supports vector (e.g. Adobe Illustrator), select only the vector art you want, and cut and paste it into a new file in the image editor.

score 0 · Answer 12 · answered May 10 '22 at 09:25

I had to get my hands on a svg that was included super weird. Couldn't find the source anywhere. All tips and most tools failed to extract the picture. Finally I found a tool that did the job: https://github.com/rossmoody/svg-gobbler

There is a Chrome and Firefox extension. I used the Chrome extension.

score -1 · Answer 13 · answered Feb 02 '19 at 20:47

I don't know if this already been answered correctly or not. Well. Downloading the file from the source is not the resolution. How to grab *.svg from URL.

I installed 'svg-grabber' add-on to Google Chrome. That only partially resolve my problem, as Google Chrome does not have the shortcut to 'Back' one page.

I was trying to download the files from URL, but I kept getting an error, that there are no svg files on this page when I can see 40 of them. You can click on them, so they will open, but you cannot save it.

The folder within WordPress: .../static/img/icons/

I added 'Go Back With Backspace' add-on to Chrome, as I had to click on each file separately, as if they are white icons (that I am currently looking for), you will not see them. You have to click on the file. Then back. It was taking too long. Now is fine. There is a soft to download specific folder, but I do not want to download half of the internet, to just have get a white .

When you click on a white icon, a new tab opens, but it is all white. Then you click on svg-grabber icon in Chrome and it will open it in a new window on a black background with a button download all svg.

score -1 · Answer 14 · answered May 28 '20 at 08:49

-1

1. Inspect the page with the svg on.

2. Click on the link that displays the imagine in full resolution.

3. Do CMD/CTRL+S

4. You are done!

answered May 28 '20 at 08:49

1

This does not work when there is no link. Some SVGs are created using ` – Diriector_Doc Jun 21 '20 at 00:42

score -1 · Answer 15 · answered Oct 02 '20 at 21:02

-1

I just tried it on another website, in firefox. After trying to save the webpage, it gave me a save-file-as dropdown menu with an option called webpage, svg only.

answered Oct 02 '20 at 21:02

score -1 · Answer 16 · answered Apr 28 '23 at 13:10

-1

CTRL+P hit print command in destination chose Save As PDF you are done

answered Apr 28 '23 at 13:10

iCodeCrew

115
1
9

How to extract svg as file from web page

16 Answers16

Linked

Related