SVG loaded in an img tag

In many cases it is probbably better to separate the SVG content from the HTML itself with all the usual pro and contra reasons.

Pro:

separating the SVG file allows the developer to vide and edit it separately
browsers can cache the svg image and this if the same image is reused on multiple page the browser does not need to load the data several times.

Contra:

Browsers need to make a separate request to load each SVG file.

Move the SVG part to a separate file with .svg extension:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="rgb(230, 230, 230)" />
  <circle cx="200" cy="120" r="40" fill="rgb(0, 255, 0)" />
  <text x="200" y="50" font-size="30"
     text-anchor="middle" fill="blue">SVG loaded via img tag</text>
</svg>

In the HTML document refer to the file via an img tag:

<html>
    <head>
        <title>SVG loaded via img</title>
    </head>
<body>

<h1>SVG loaded via img</h1>

<img src="load-svg-via-img-tag.svg">

<img src="book-cover.svg">

</body>
</html>

The page is rendered like this:

Keyboard shortcuts

SVG - Scalable Vector Graphics

SVG loaded in an img tag