Clever Geek Handbook

How to extract svg as file from webpage

enter image description here

enter image description here

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

+10


source to share


8 answers


If I just misunderstand you, it could be as simple as inspecting ( F12) the icon on the page to find the path to the original .svg file, navigating that path directly ( Example ), and then viewing the source code of the page with Control+ u. Then just save this code.



+11


source


Three-step solution Copy the SVG code snippet and paste it into a new HTML page. Save the HTML page as logo.html and then open that HTML page in Chrome. File> Print "Save as PDF" PDF can now be opened in Illustrator by extracting the vector element.



+7


source


They all logged into 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>
Run codeHide result


+4


source


You can download individual files from your site as pointed out in @mayerdesign's post, or you can click the download link on the left and you can download the entire package.

FULL PACK

+2


source


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

+1


source


I don't know if this has already been answered correctly or not. Well. Loading a file from source is not a permission. How to get * .svg from url.

I have installed the 'svg-grabber' addon for google chrome. This only partially solves my problem as Google Chrome doesn't have a One Page Back shortcut.

I tried to download files from url but kept getting the error that there are no SVG files on this page when I see 40 of them. You can click on them to open them, but you cannot save them.

Folder in WordPress: ... / static / img / icons /

I added a "Back with Backspace" add-on to Chrome, since I had to click on each file separately as if they were the white icons (which I'm looking for now), you won't see them. You have to click on the file. Then back. It took too long. Now everything is all right. There is software for downloading a specific folder, but I don't want to download half the internet just to get white.

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

0


source


It is very easy for me to install the following tool on a Chrome server:

SVG grabber

While on a webpage, click the extension icon next to the URL bar and a new tab will open displaying all the SVG files found on the page. You can copy the SVG file to the clipboard, download only the ones you want, or click the Download All SVGs button to add them to the compressed file and download them.

For details here

Hope this will be helpful.

0


source


In Chrome, when there is a URL in the SVG you can do CTRL + S or CMD + S and it will automatically prompt you to save the page as .SVG try this: https://upload.wikimedia.org/wikipedia/commons/9/90 /Benjamin_Franklin-10_Dollar_Bill_Portrait-Vector.svg

0


source






More articles:


All Articles