Inline svg vs svg sprite?

Question

css

Good afternoon! How relevant is it to use sprites these days?
SVG INLINE:
+ As far as I know, there are a lot of options for manipulating icons.
You can change the color to whatever you want, you can animate it, practically it does not load the server when the page is loaded.
- A lot of code
- There is no way to insert icons if the icon depends on the class. Here, background-image is indispensable. For example, hot news has its own icon . For example, new news has its own icon , etc. SVG SPRITE: + Didn't check it, but it seems that the speed of loading the site with sprites is not bad.news -hot
.news -new
- If we insert icons through background-image, that is, through sprites, then we have limitations. Change the color of the icon only if there is a duplicate icon with a different color and replace the image on hover. As for me, this is not very practical and sometimes there are bugs with glare. When a user enters the page for the first time and hovering over the icon, it has a glare/bug, and only when the user re-hover is the image replaced.
- If the client wants to add a new icon or replace the old one, but you have to re-assemble the sprite on the front, which is not very convenient.
If I missed something, please add it and I want to hear your opinions =) Thank you.

Answer 1

For many icons, I usually use sprites in an external file. Benefit: Cached and somewhat manageable from styles, doesn't litter markup. The sprite is generated by a gallp task from a folder with individual svgs. For IE polyfill.

Answer 2

inline svg is better ....
but if, for example, svg has a large code ... you can put it in a separate file and include it as img, it will actually be better

Answer 3

If you insert as inline, then you need to make sure that there are no id conflicts. If you want to animate in js, then only inline.
If the animation is on css, or on svg, or it is not there at all, then you can simply insert a picture. Animation can be implemented inside the svg file itself.
<img src="image.svg">