Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

SVG loaded in an object

Certain features do not work when using the HTML img tag to display an SVG file. Specifically the embedding of other images in the SVG file using the image tag of SVG does not work. Nor can one link using the a SVG tag.

Using object solves these problems.

In this example we have embedded the SVG file from the previous example.

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

<h1>SVG loaded via object</h1>

<object data="load-svg-via-object.svg" type="image/svg+xml"></object>

</body>
</html>

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

  <image x="10" y="200" width="300" href="load-svg-via-img.svg" />
</svg>