Re: <picture> in 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.

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.

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!

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.

Amelia BR

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".
>
> ~TJ
>
>