On Sun, 22 Mar 2015 15:06:40 +0100, Martin Janecke <whatwg....@prlbr.com> wrote:

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

Reply via email to