How do we insert svg images?

Answer 1

As html image element, simply:

<img src="url_of_my_image.svg" alt="description">

... or use it as well in css background image definition:

#anyID { background-image: url("url_of_my_image.svg"); }

... or embed your source file in html with the <svg> container ;)

Answer 2

Well, each case is different...

It can be interesting to embed svg in html, as so it is accessible through the DOM and JavaScript, can be stylable by same CSS rules as your HTML. Even if it's a large file ( that's even relative for vector drawing, or that's you embed bitmap inside ), it's probably the main content of the page, so don't make any difference for the time of loading/waiting of the user before displaying something ( or in benefits of embeding svg :P but very slightly ^^ )

Answer 3

@LDK wrote: "avg are usually small and used to be scalable so htlm embedding is not the first thing I would do"

It was my last option in the list ;)
Anyway, for a lot of small files, it becomes benefit to size up a little your html and reduce the number of file requests ^^
But I'm agree that if it's in illustrative/content usage as other bitmaps, standalone files is preferable, less for decorative/accessory usage ( bullets, icones, separators, borders... ), in which case context will probably be decisive in the final choice of implementation.

... And it's good to know that other solutions exists even for particular case, as you know that there's something to find by right searching the day where you encounter such a particular case :)