Re: <picture> in SVG

On Wed, Mar 25, 2015 at 2:09 PM, Amelia Bellamy-Royds
<amelia.bellamy.royds@gmail.com> wrote:
> On 25 March 2015 at 14:28, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> SVG seems to have the same need for responsive images as HTML does,
>> and HTML now has a solution - the srcset/sizes attributes on <img>,
>> and the <picture>/<source> elements for more complicated
>> source-switching.
>>
>> Any objections to making this work in SVG as well?  We could just add
>> srcset/sizes directly to <image> without any problem, and
>> <picture>/<source> would just be more elements on the pile of "reasons
>> HTML needs to work inside of SVG".
>
> I like the idea of adding srcset to <image>.  We might need some new
> clarifying text to make sure the correct source gets chosen when the SVG
> coordinate system is at a different scale than the basic screen resolution.

That would be... interesting.  It probably needs to take viewBox into
account, but transforms purposely aren't counted in HTML, while
they're a somewhat more basic layout tool for SVG.

> For more complicated switching, however, I'm not sure that duplicating HTML
> <picture> is worth the hassle.  After all, the purpose of <picture> is to
> support alternative images when those images involve major layout/art
> direction changes for different media.  Inside an SVG, any major layout/art
> direction changes would probably include the SVG content, not only an
> embedded image.

You're probably right.  In HTML, the major changes are accomplished by
just applying different CSS, but in SVG it'll likely be completely
different elements.

> Instead, what I would like to see is a `media` attribute on all SVG elements
> that would trigger <switch> decision modes, so that you could swap between
> groups of content, not just individual elements.  Of course, you could also
> use it to switch between a set of <image> values if that's all you need.
>
> For example, the following would select between two images to cover the SVG
> as a backdrop, one for landscape and one for portrait modes:
>
> <switch>
>     <image media="(orientation: landscape)"
>
>                 height="100%" width="100%" preserveAspectRatio="xMidYMid
> slice"
>
>                 xlink:href="landscape-background.jpg"/>
>     <image media="(orientation: portrait)"
>
>                 height="100%" width="100%" preserveAspectRatio="xMidYMid
> slice"
>                 xlink:href="portrait-background.jpg"/>
>
> </switch>
>
>
> Since the current behavior of <switch> is to select the first child that
> doesn't have any failing switch-tests on it, it is an easy
> progressive-enhancement approach.  The `media` attribute would be ignored on
> older viewers, and the first image would pass all the tests.  Just make sure
> the first option is the one you want to be used as a default!

This is interesting.  Let's pursue this separately, then.

> In contrast, most SVG viewers will not render child content of an
> unrecognized element (this is different from HTML behavior), so the
> <picture> syntax would fail on existing viewers.

True.  I always forget that SVG is not friendly to new container elements. ^_^

~TJ

Received on Wednesday, 25 March 2015 21:29:26 UTC