CODEWITHSUNDEEP
htmlsvg
user1873582
user1873582

Reputation: 41

How to reference a jpg in a svg?

I have a simple example of a svg that just wraps a jpg. Here is the HTML:

<html>
<head>
</head>
<body>
    <div id="theimageholder">
        <img id="theimage" src="Images/simplepng.svg"></img>
    </div>
</body>
</html>

And here is the SVG for simplepng.svg:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="410" height="340"
         viewBox="0 0 200 200"
         zoomAndPan="enable"
         preserveAspectRatio="xMidYMin meet" >
<image x="0" y="0" width="200px" height="200px" xlink:href="earth.jpg"/>
</svg>

This works in IE9, but not in Chrome or Firefox. They both display nothing. Does xlink:href work in those browsers?

Upvotes: 4

Views: 1803

Answers (1)

Matthew Bystedt
Matthew Bystedt

Reputation: 41

The SVG file looks 100% correct: http://apike.ca/prog_svg_images.html

If you switch the image tag to an embed or an object tag, it will work:

<embed src="Images/test.svg" type="image/svg+xml" width="410" height="340" />
<object data="Images/test.svg" type="image/svg+xml" width="410" height="340" />

It's probably just a limitation of those browsers. I confirmed it's also a problem in Safari. I couldn't find a reference or a bug number for this.

Upvotes: 4

Related Questions