There are several ways to render an SVG on a webpage:

• Inline SVG
• Image
• Data URI
  • Image
  • CSS
  • Base64

Inline SVG

Given an SVG of a magenta square:

To inline SVG, all you need to do is to insert it into the HTML:

<svg>
  <rect width="50" height="50" style="fill: #b0b;" />
</svg>

Image

If the SVG is a file:

https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/svg.svg

It can be loaded as an image:

<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/svg.svg" />

Data URI

Inlining an SVG in the data URI is another way to render it. The advantage is it loads faster (since there’s no request). The disadvantage is it can’t be cached and the size is larger than the original.

Image

To embed an SVG in an image data URI:

<img
  src="data:image/svg+xml,<svg xmlns='https://www.w3.org/2000/svg'><rect width='50' height='50' /></svg>"
/>

The data URI scheme is as follows:

data:[<media-type>][;charset],<data>

Note: I left charset blank in my example.

As a result, the following is required for the image to render correctly:

data:image/svg+xml,<svg xmlns='https://www.w3.org/2000/svg'><!-- content --></svg>

However, there’s a catch.

CSS

To embed an SVG in a CSS background-image:

.square {
  background-image: url('data:image/svg+xml,<svg xmlns="https://www.w3.org/2000/svg"><rect width="50" height="50" /></svg>');
}

However, there’s a catch.

Encoding

The one catch with data URI is that certain characters need to be encoded.

For example, the following image will fail to load:

<img
  src="data:image/svg+xml,<svg xmlns='https://www.w3.org/2000/svg'><rect width='50' height='50' style='fill: #b0b;' /></svg>"
/>

The reason is because of the reserved # character. If # is replaced with %23, the image will render.

Base64

Converting the SVG to base64 is one way to go around encoding issues:

<img
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxyZWN0IHdpZHRoPSc1MCcgaGVpZ2h0PSc1MCcgc3R5bGU9J2ZpbGw6ICNiMGI7JyAvPjwvc3ZnPg=="
/>

Here, we had to specify the base64 charset in the data URI scheme.

The one disadvantage of base64 is that the data becomes more than 2x larger.

Demo