Am .03.2015, 12:50 Uhr, schrieb Andrea Rendine
<master.skywalker...@gmail.com>:
[…] IE11 doesn't scale SVG as noticed about previous versions.
Thanks Andrea (also for your further feedback on the test cases), that is
good to know.
Am .03.2015, 14:36 Uhr, schrieb Erik Dahlström <e...@opera.com>:
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/.
That's very helpful in practice, thanks! It didn't work 100% correctly
yet (it pushes the figcaption away when the window is bigger than 800px)
but was easy to fix.
(https://prlbr.de/2015/03/inline-svg-without-height.html)
I feel like this absolute positioning and border-bottom=(100% divided by
image aspect ratio) trick is a kludge though. It's nice to have to make
things work now, but it's not what I'd want to teach anyone as a good way
to do it. So I wonder why the browser behavior is still so inconsistent
about including inline SVGs that this is necessary, although inline SVGs
have officially been supported by browsers for years
(http://caniuse.com/svg-html5). And it's not only IE. Opera, Safari,
Chrome also behaved differently than Firefox in my third test.
Is the integration of inline SVGs (such as their display size, which
measures [CSS in the HTML part, SVG element attributes, CSS within SVG]
take precedence) right at the interface between HTML+CSS and inline SVG
spec'ed? The HTML spec hardly says anything
(https://html.spec.whatwg.org/multipage/embedded-content.html#svg-0) about
it. Where do I have to look in the SVG spec to find something about it? Or
is it in a CSS spec? If it isn't defined neither explicitly nor implicitly
(e.g. by some general convention for cases that are not explicitly
described) yet, I suggest defining it. We can see right now how browsers
do it, analyze which way makes most sense and standardize it.
I think this is quite important – definitely not only for inline SVG's
possible application as "image map" as originally discussed in this
thread, but for every use of inline SVGs. Therefore I'd start a new thread
if there's indeed a lack of standardization here.
Martin