How to properly use svg icon in code?

Question

css

If I want to use an svg icon on the site, then I take the SVG code and put it in the code:

<div>
<svg>...</svg>
</div>

Is it good tone? If not, what is the right way to do it?

Answer 1

It's better to link to the icon:

<div>
<svg pointer-events="none" height="30" width="20">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon"></use>
</svg>
</div>

and then in the footer or in a separate svg file the coordinates:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0px; height: 0px;">
   <symbol id="icon" viewBox="0 0 15 30">
       <path stroke="currentColor" d="M13.5 1.5l-11.5 13.5 11.5 13.5"></path> 
    </symbol>
</svg>

Answer 2

this is the beauty of svg - do it with javascript right inside the html document, and do it in illustrator and use it as a picture
and another good way is to insert it into css as base64 - then the picture does not lather when scaling

Answer 3

Yes, at the moment this is the best way to insert icons, allowing you to change their visualization through CSS. Just make it better in a separate template.