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?

Answer 1

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

Answer 2

Currently, in the chrome browser:

• Open developer tool
• Find the svg element
• Right click on it and u will see on option: capture node screenshot, it will save the svg as png file

Answer 3

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.

Answer 4

@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.

Answer 5

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/ !

Answer 6

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

Answer 7

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.

Answer 8

Here's a three step solution:

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

Answer 9

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

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

Answer 10

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.

Answer 11

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!

Answer 12

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.

Answer 13

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

Answer 14

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.

Answer 15

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.

Answer 16

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>

Answer 17

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