W3C home > Mailing lists > Public > whatwg@whatwg.org > March 2015

Re: [whatwg] Responsive image maps

From: Erik Dahlström <ed@opera.com>
Date: Tue, 24 Mar 2015 14:36:27 +0100
To: whatwg@lists.whatwg.org
Message-ID: <op.xvz721trdhsuf5@gnorps>
On Sun, 22 Mar 2015 15:06:40 +0100, Martin Janecke <whatwg.org@prlbr.com>  

> I've done a few tests and provide links to them below the following  
> discussion.
> Test 4: https://prlbr.de/2015/03/inline-svg-without-height.html
> Test 5: https://prlbr.de/2015/03/inline-svg-without-size.html
> Test 4 is almost identical to test 3, but I haven't specified a height  
> on the the SVG element this time. Test 5 has neither height nor width  
> specified for the SVG and always gets its size by fitting in the  
> surrounding <figure> element. Both tests work as expected in FF, Opera,  
> Safari and Chrome. IE9 doesn't get the size right.

Test 5 is the proper way to do this IMHO.

A workaround for the bug in IE9+ is to add a wrapper element that does the  
responsive sizing.

Something along the lines of http://jsfiddle.net/vo1ofz0w/1/.

> Test 6: https://prlbr.de/2015/03/html-img-with-svg.html
> Here I've referenced the SVG (as defined in test 5) with an <img>  
> element instead of including it inline. This doesn't work in any  
> browser. Except for IE9 the browsers don't even show the included  
> photograph. IE9 shows the photograph, but neither links nor tooltips  
> work.

Due to privacy & security concerns, an svg will not fetch any external  
content when it is referenced by an <img> element.

> However, the HTML living standard features the <picture> element "to  
> allow authors to declaratively control or give hints to the user agent  
> about which image resource to use, based on the screen pixel density,  
> viewport size, image format, and other factors"  
> (https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element).
> The SVG solution discussed above references the image by a different SVG  
> mechanism.

Note that it's perfectly fine to reference svg files from a <picture>  
element, see e.g http://sarasoueidan.com/blog/svg-picture/.

Erik Dahlstrom, Web Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Received on Tuesday, 24 March 2015 13:36:58 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:29 UTC