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
