Skip to main content

Command Palette

Search for a command to run...

How to get svg from the site

Updated
1 min read
How to get svg from the site
D

Hi! We're dev.family or family of developers. It doesn't mean that we're all blood kin, but we are all united by the love of cool projects, complex and interesting tasks and technologies.

dev.family is outsourcing company with a huge background and team of 30 wonderful peolple.

We are focused on Custom Web & Mobile. Our main focus: e-commerce & food tech.

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

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