SVG with external images does not load them when pasted with the <img> tag in browsers

Question

I made the following remark:

If I create an svg image that references an external bitmap via xlink:href and tries to load svg in browsers, external images are only displayed if I use the <object> , but not when using <img> .

Rendering with the <object> pretty slow and not as clean as using the img tag for images, so I was wondering if there was a way to make it work with the <img> .

At first I thought that this did not work because of the same origin policy, but even if the link image is in the same directory and I only link to its name, it does not load.

Any ideas?

Answer 1

Do you use IE? IE still does not recognize SVG. Microsoft is always ten years behind, but for some reason they are more popular and much more expensive. Name brand propaganda?

Download SVG in Firefox. And as an XML document that is referenced directly in the URL, and also if you paste it into an XHTML document (fully XML compatible) with the proper namespace, the SVG should display correctly. The great thing about this is that DHTML can manage your SVG. Everything that I said in this paragraph also applies to MathML, if you're interested.

In addition, SVG is not loaded from the image tag. However, I believe Firefox is working on this update. I'm not quite sure.

Using an object or embed tag is reasonable, I suppose ... but one of my previous fixes was to use an iframe. Paste the iframe into your html that references the full SVG file. Using CSS, you can make the iframe look flush with the rest of your document, appearing and acting like an image. Inside a div or span tag, you can have onhover and onclick event handlers.

Using an image tag, your src could be a server side PHP file. If properly encoded with the appropriate cgi applications, you can rasterize your server side SVG and transfer the PNG data back to your image using PHP src.

Answer 2

There is no particular reason why <object> should be slower than <img> , except perhaps for the interaction aspect (img are static and the object is fully interactive documents). Images inside svg should load in both scenarios, so it sounds like a bug in the browser.

Could you post a link to your example?

Answer 3

I think that you are at least 10 months behind ... IE9 supports SVG, and preliminary versions (including beta versions) have been around for quite some time. Visit www.ietestdrive.com to grab a platform preview - that's pretty good. In my opinion, parts of SVG support are much better than Firefox currently (but they do not yet support SMIL).