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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   quot logo html quot   and then open that HTML page in Chrome hitting  gt  File  gt  Print  gt   quot Save as pdf quot  This PDF can now be opened in Illustrator - extracting the vector element

User · Answer

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

User · Answer

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

User · Answer

They are all logged under Elements in google chromes developer tools   page  x000D   x000D   lt svg gt  lt 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   gt  lt  svg gt  x000D   x000D   x000D

User · Answer

When the SVG is integrated as  lt svg     gt  lt  svg gt  markup directly into the HTML page   Right click on the SVG to inspect it in developer tools Find the root of the  lt svg gt  element and right click to  quot Copy element quot  Go to https   jakearchibald github io svgomg  and  quot Paste markup quot  Download your optimized SVG file and enjoy

User · Answer

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

User · Answer

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

[html] How to extract svg as file from web page

Examples related to html

Examples related to svg