External svg file is loaded but doesn't show up

Question

I want to load an external svg file into my Html document at runtime. As discussed here, I use an <object type="image/svg+xml"></object> and change the data attribute via Javascript.

My html looks like this (pasted the cross.svg file in below for reference):

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <object id="svg_verified" type="image/svg+xml" data="cross.svg"></object>
        <svg>
            <circle cx="50" cy="50" r="50" fill="#111"/>
            <rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
            <rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
        </svg>
    </body>
</html>

The loaded page looks like this:

However, I can see in the inspector that the svg file is loaded:

How do I make the SVG file in the object render correctly?

score 1 · Accepted Answer · answered Dec 10 '19 at 14:10

You are missing xmlns="http://www.w3.org/2000/svg". The xmlns attribute is required for image/svg+xml MIME type.

Are SVG parameters such as 'xmlns' and 'version' needed?

<object type="image/svg+xml" data="https://svgshare.com/i/GhM.svg"></object>
<!---->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="50" fill="#111"/>
  <rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
  <rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
</svg>

External svg file is loaded but doesn't show up

1 Answers1