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?
17 Answers
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
-
12like @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"– NorfeldtJan 24, 2020 at 21:52
-
3I 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.– MerchakoDec 23, 2021 at 17:38
-
1The xmnls part was crucial for me as well. Add it right after
<svg
, e.g.<svg xmlns="http://www.w3.org/2000/svg" viewBox=...
– René KSep 3, 2022 at 22:45 -
3The 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 <SVG>'s parent, or just left click on the <SVG> element and press ctrl + c on your keyboard. That will copy the whole <SVG> to the clipboard and it does work with SVGOMG tool. Sep 7, 2022 at 21:21
-
Unfortunately very limited tool. Can't seem to handle larger svgs. Oct 19, 2022 at 14:38
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/ !
-
4Sure...that's easier haha, but doesn't (seem to be!) OP's question May 5, 2017 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 :-)– SyferMay 5, 2017 at 11:54
-
2For 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. May 5, 2017 at 11:55
-
1@VladyslavKushney I think they are coloring the SVG with CSS that's why its showing as white.– SyferMay 5, 2017 at 11:57
-
1
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
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.
-
3This is the only method I could get working. Thanks. You should also be able to use inkscape as described here: en.wikipedia.org/wiki/Wikipedia:Graphics_Lab/Resources/… Feb 10, 2019 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. Feb 28, 2019 at 22:13
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.
-
1This 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, 2020 at 0:31
-
Any suggestions for how to incorporate CSS that is found outside the
<svg>
tag?– mlibbyJun 23, 2021 at 13:43
They are all logged under Elements in google chromes developer tools.
<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>
-
11It's important to realize that the
xmlns="..."
is required even if it's not there in the inspect element page Oct 18, 2018 at 16:36
@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.
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.
For me its very easy just install following tool in chrome server :
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.
Currently, in the chrome browser:
-
The OP's question was about extracting svg (retaining the vector svg data) and not about capturing an DOM element as png. Oct 11 at 0:55
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
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.
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.
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.
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!
-
1This does not work when there is no link. Some SVGs are created using
<svg>
tags. Jun 21, 2020 at 0:42
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.