How and where is it correct to save svg?

Question

css

I will say right away that in the design all the icons are vector.
Saving svg with Avocode. What are the problems.
The icon does not match the original a bit, sometimes the edges of the icon are slightly cut off, and the outline can be 2 times larger.
My goal is to switch to svg because the bitmap does not display well on phones and tablets, I don't like it. I want either svg in base 64 or in a sprite in general, but it's optimal to use svg. It also has many advantages. One of them is like filters. You can also recolor the icon using css and not make a separate hover icon. I also know that, for example, if you have 3 products with different colors in your store, you don’t need 3 pictures, but you can recolor it using svg.
Tell me how you save svg and how do you use it? And how do you get rid of the above problems?

Answer 1

They are saved as a standard, as a file :))), but I use it inline or as a sprite (if there are a lot of them)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220px" height="140px" viewBox="0 0 220 140">............
</svg>