CODEWITHSUNDEEP
htmlsvg
user1035795
user1035795

Reputation: 93

SVG inline works but only shows <text> content when loaded inside <object>

The 2 <div>s inside the html show a different result why? The same SVG code is used but the first is referenced inside an <object> element where as the second is declared inline.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SVG Inline Issue</title>
</head>
<body>
SVG inside &lt;object&gt;
<div>
<object type="image/svg+xml" data="test.svg">My Image</object>
</div>
SVG inline
<div>
<svg height="600" width="600">
    <g>
        <circle cx="100" cy="100" r="20" fill="yellow"></circle>
        <text x="100" y="100"> Hello World</text>
    </g>
</svg>
</div>
</body>
</html>

SVG in the same folder as the html in a file called test.svg

<svg height="600" width="600">
    <g>
        <circle cx="100" cy="100" r="20" fill="yellow"></circle>
        <text x="100" y="100"> Hello World</text>
    </g>
</svg>

The resulting page looks like this enter image description here

Upvotes: 0

Views: 77

Answers (1)

Robert Longson
Robert Longson

Reputation: 124089

The SVG is being loaded as an html file when you reference it externally. You must put in valid namespaces on standalone SVG files so that the browser can recognise that your markup really is SVG. So what you want is

<svg xmlns="http://www.w3.org/2000/svg" height="600" width="600">
    <g>
        <circle cx="100" cy="100" r="20" fill="yellow"></circle>
        <text x="100" y="100"> Hello World</text>
    </g>
</svg>

And you'd need to make sure the mime type is correct if you're loading the pages via a web server.

Upvotes: 1

Related Questions