How to embed svg?

Question

css

At popular sites, I saw the insertion of base64, image / svg + xml, svg with a sprite and the insertion of svg with a separate image.
Base64 is not considered because svg+xml is well supported. svg+xml has possibly a minus, it takes the code in the css file. For Yandex, by the way, `background-image: url('data:image/svg+xml;base64,PHN2...')` was 28kb (~28000 characters) in the css file.
I don’t see any cons for the svg sprite, why not insert all svg into it? Request 1, insert in css with `background-position`, in html tag ``. Although, if you need support for browsers that do not support it, you will either have to insert svg via css, or make separate svg images. But if you need to manipulate svg, animate, hide, change the color of individual blocks, inserting svg directly into an html file is a great option, I think.
Storing svg in separate files has a minus - a lot of requests to the server.

PS: Almost all the sites I've looked at embed the svg logo directly into the html. Yandex inserted it sometimes directly, sometimes with the img tag, if the logo is in png, perhaps the svg ate a lot of space. In the overflow stack, the logo is stored in a sprite with all other icons.

Which of these to choose and in what situations? Too many options. Thanks for the answer!

Answer 1

SVG vs bitmap is a balance between image size and image quality.
It all depends on the complexity of the logo