DEV Community

Cover image for How to get svg from the site
Max Bantsevich for dev.family

Posted on

How to get svg from the site

If you see the use tag inside the svg - it means that the picture is used by reference, i.e. it is rendered once in the house and then in all other places it is used by reference, how to pull it out:

1. Open the DOM tree

DOM tree

2. Find the link that uses the image (in our case xlink:href="#svg-icon-logo")

svg-icon-logo

3. Press ctrl+f and paste this #svg-icon-logo ID into it
4. Find the symbol tag with the same id, expand it and see the part of our svg

guts of our svg

5. Copy this element

copy

6. Create a file with the extension .svg, open it with Notebook
7. Take a standard svg tag from any other svg

standard svg tag

8. Plug in the data from symbol, replace the properties width="16" height="17" viewBox="0 0 16 17" in the svg tag with those specified in symbol, in our case it is viewBox="0 0 0 465 146", the last two digits are width and height.

9. Get svg

get svg

10. Be sure to check that all quotation marks in tags are not inverse, but regular "".

fin

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (1)

Collapse
 
respect17 profile image
Kudzai Murimi

Thanks a lot!

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay