Geek Answers Handbook

How to link to jpg in svg?

I have a simple svg example that just wraps 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. Both of them show nothing. Does xlink: href work in these browsers?

+4
source share
1 answer

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

If you switch the image tag to the built-in or the 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" />

This is probably just a limitation of these browsers. I also confirmed this in Safari. I could not find the link or error number for this.

+4
source

More articles:


All Articles