Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extracting SVG HTML paths back to SVG files from a website

Is there any way to quickly extract SVG assets on a website including SVG HTML paths back to SVG files. Any apps, dev tools, extensions that lets you do this?

like image 722
Steven Mancera Avatar asked Jan 07 '18 11:01

Steven Mancera


People also ask

How do I save an HTML file as SVG?

You can use the Save As feature to save to the SVG format directly. Choose File > Save As from the Menu Bar. You can create a file and then choose File > Save As to save the file. In the save window, change the Format to SVG (svg) and then click Save.

How do I copy an SVG file?

Rightclick on the SVG tag and select "Copy" then select "Copy Outer HTML". This will put the entire markup for the SVG into your clipboard, from there you can paste it into your favourite text editor and save it with the SVG file extension.

How do I paste an SVG code?

Is it possible to paste the SVG code directly in illustrator get the artwork from the code. SVG code (from other source) > Copy > Open Illustrator Document > Paste the code > Get the artwork.


1 Answers

Given an svg element you'd like to save:

Edge

  1. Right Click > Save Picture As

Chrome, Firefox, etc.

  1. Inspect Element (Make sure you've selected the root svg element you'd like to save).
  2. Right Click > Edit as HTML
  3. Copy the outer HTML
  4. Paste in your favorite text editor (VS Code), and save as a .svg
like image 94
Austin Brunkhorst Avatar answered Sep 29 '22 14:09

Austin Brunkhorst