New issue
Advanced search Search tips

Issue 611366 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 234082
Owner: ----
Closed: May 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Compat



Sign in to add a comment

HTML <img src /> doesn't handle SVG <image href />

Reported by papp.rob...@gmail.com, May 12 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

Example URL:
see attached example

Steps to reproduce the problem:
1. Create an SVG that can be reused:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100,-100 200 200">
	<circle r="100" />
</svg>

2. Create an SVG that uses the previous one:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
	<rect fill="grey" width="300" height="300" />
	<image href="circle.svg" x="0" y="0" width="100" height="100" />
	<image href="circle.svg" x="200" y="100" width="100" height="100" />
	<image href="circle.svg" x="100" y="200" width="100" height="100" />
</svg>

3. Add the previous SVG to a HTML page via <img src />:

<style> div { width: 20%; float: left; border: 1px solid lightgray; box-sizing: border-box; } </style>
<div>&lt;img src<br/>    <img src="circle.svg" /><img src="circles.svg" /></div>
<div>&lt;img srcset<br/> <img srcset="circle.svg" /><img srcset="circles.svg" /></div>
<div>&lt;embed src<br/>  <embed src="circle.svg"></embed><embed src="circles.svg"></embed></div>
<div>&lt;object data<br/><object data="circle.svg"></object><object data="circles.svg"></object></div>
<div>&lt;iframe src<br/> <iframe src="circle.svg"></iframe><iframe src="circles.svg"></iframe></div>

What is the expected behavior?
The referenced images are loaded correctly with img the same way they do with direct opening/embed/iframe/object.

What went wrong?
<img> cannot handle SVGs who contain <image href> tags. Those references are just ignored. On the test page you can see that the circle is shown correctly every time, but the href'd circles are not showing when using the <img> tag. The SVG loads fine, because the gray rectangle is visible.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No IE11 has the same bug as Chrome; FF43 fully ignores href, even when directly opened, however the same behavior is triggered if I use xlink:href

Chrome version: 50.0.2661.94  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 21.0 r0

I only tried opening these locally from a file:// Uri.
xlink:href doesn't make any difference in Chrome or IE.
 
test.zip
759 bytes Download
test.png
21.5 KB View Download

Comment 1 by f...@opera.com, May 12 2016

Components: Blink>SVG
Labels: -OS-Windows
Mergedinto: 234082
Status: Duplicate (was: Unconfirmed)

Sign in to add a comment