Referencing SVG as <img> in html breaks all <image> bitmaps in the SVG in most browsers
Question
Whenever I try to use an svg as an image in html using the tag, any images referenced within the svg file using <image xlink:href=""> tag won't display.
This fails to display any bitmaps at all in the svg in browsers (firefox, chome, chromium, safari) but does display the image in internet explorer).
HTML FIle
<!DOCTYPE html>
<html>
<body>
<img src="svg.svg" height="100" width="200" />
</body>
</html>
SVG File
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events" height="100" width="200">
<image height="100" width="200" xlink:href="image1.jpg" />
</svg>
However if I place the exact same code directly in the html file as
<svg height="100" width="200">
<image height="100" width="200" xlink:href="image1.jpg" />
</svg>
It works.
Or if I reference the same svg file with <object data=""> it also works. Any vector objects (eg. rects) in the svg file also work fine with <img> or <object> .
If I load the svg file directly it works properly in all browsers.
Why is the img tag in html breaking my image tag xlinks in the svg file?
1 answers
solution1
0 ACCPTED 2015-03-19 04:32:50
Any SVG that is been embedded using <img> cannot reference external objects (like other images). This is a deliberate feature implemented by browsers for privacy reasons.
You can embed your SVG using <object> instead. Alternatively, if you really need to use <img> , change your external image references in the SVG to Data URIs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.