Re: [whatwg] Responsive image maps | inline SVGs in general

Am .03.2015, 12:50 Uhr, schrieb Andrea Rendine
<master.skywalker.88@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 <ed@opera.com>:

> On Sun, 22 Mar 2015 15:06:40 +0100, Martin Janecke  
> <whatwg.org@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

Received on Thursday, 26 March 2015 00:31:58 UTC