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

Re: [whatwg] Responsive image maps

From: Andrea Rendine <master.skywalker.88@gmail.com>
Date: Tue, 24 Mar 2015 15:41:26 +0100
Message-ID: <CAGxST9=k71yHf-wBtpVRSx35Rt8MHs6DbSsUdwueXabrknU8xw@mail.gmail.com>
To: Erik Dahlström <ed@opera.com>
Cc: whatwg@lists.whatwg.org
 > Note that it's perfectly fine to reference svg files from a <picture>
element, see e.g http://sarasoueidan.com/blog/svg-picture/.
Which means repeating the map construction for every SVG file. Of course if
the SVG is created by a script or a graphics application it can be done
easily, but this is not always the case.

However, before this discussion about SVG goes too far, and also keeping in
mind some limitations of SVG itself (as I said before), I ask again: why
not improving an existing feature instead of finding so many expensive
workarounds? It'd allow authors the choice to use between 2 different tools
for different cases.

2015-03-24 14:36 GMT+01:00 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/.
>
>  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 14:41:58 UTC

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