Extracting SVG Tag to SVG image file

When surfing some websites, you see some cool icons and want to save them to use in the future but you recognize that they were created by HTML SVG tags. How to save it to an SVG file?

It is not difficult or costs much time. 30 seconds will be enough to get a cool icon. Getting started…!

Step 1: Inspecting which element contains image/ icon

We have a sample: opening web URL roadwork dot io and scrolling to the middle of the page, something will be like below.

SVG Icon

Pressing F12 to open DevTools function of your browser. Click through 1, 2, 3 to locate the element (icon image) exactly.

Inspecting icon image

Step 2: Copy the element to the clipboard

As the figure 3 above at Step 1, we have a right-click to the first line, a pop-up window will appear.

Copy element to the clipboard

Through 1, 2, 3 as the above illustration, we get code lines in our clipboard.

Step 3: Converting it to an image and saving it to your directory

Visit SVGOMG

Click and paste your code

An image will be shown at the center of the window. Having no more thing to do. Look at the below image, you get what you want.

Save SVG file to your computer

The image is ready to use now.

That’s all!

Leave a Reply