Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to get svg from the site
dev.family profile imageMax Bantsevich
Max Bantsevich fordev.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 casexlink: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 propertieswidth="16" height="17" viewBox="0 0 16 17" in the svg tag with those specified in symbol, in our case it isviewBox="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

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
respect17 profile image
Kudzai Murimi
FullStack Developer and Content Writer
  • Location
    Capetown, South Africa
  • Joined

Thanks a lot!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

We develop complex services and solutions for startups

Our capabilities range from product strategy, product design & development, and ongoing product maintenance services.

More fromdev.family

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp