Re: Media queries in <switch> elements

That sounds like a nice idea! Also, it would be nice to have a way to
control loading of media so that those image and video elements which are
not displayed are not fetched. I believe the current browsers fetch all
even if they are not displayed.

<switch>
  <!-- some way not to load big.png if small.png is displayed would be nice
for mobile phones -->
  <image xlink:href="big.png" media="screen and (max-width: 10em)"/>
  <image xlink:href="small.png"/>
</switch>

This section doesn't mention the poor switch element at all:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/IFrame_Like_Syntax#5.10_Specifying_whether_external_resources_are_required_for_proper_rendering

Cheers,
Kari



2014-03-06 17:25 GMT+02:00 Manuel Strehl <svg@manuel-strehl.de>:

> Ah, the correct link to Robin's presentation:
>
> http://berjon.com/presentations/20130910-ricg-switch/
>
> Thanks, David, for pointing it out!
>
> Manuel
>
> Am 6.3.2014 11:15, schrieb Manuel Strehl:
>
>  Hi,
>>
>> recently several posts and tutorials sing the song of "responsive
>> SVG", e.g. Clown Car,
>> <http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-
>> solving-for-adaptive-images-in-responsive-web-design/>,
>> Responsive Icons, <http://responsiveicons.co.uk/> or more recently,
>> <http://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
>> >.
>>
>> In all these articles some combination of CSS media queries and JS are
>> leveraged. The humble <switch> element is never even mentioned. And
>> that's because it's useless here. I've found this brainstorming:
>>
>> http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/IFrame_
>> Like_Syntax#5.9.2_The_.27switch.27_element
>>
>> and this presentation from Robin Berjon:
>>
>> http://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
>>
>> where a "media" attribute is mentioned, and I'd like to ask, if there
>> are any ongoing discussions towards adding it. It may be useful inside
>> a <switch> element to complete requiredFeature and requiredExtension
>> and mirror <video> in HTML, or even stand-alone, on arbitrary
>> rendering elements.
>>
>> The advantage is straight-forward in-markup ways to declare, which
>> parts of the image to render, and which to discard in some viewing
>> circumstances. Since evaluation of media queries is already
>> implemented in browsers and the result is basically a simple "display
>> full"/"display none" switch, I'd suspect implementations to be not
>> completely insanely hard.
>>
>> Reference SVG of what I'm talking about:
>>
>> <svg>
>>
>>   <!-- inside switch element: -->
>>   <switch>
>>     <rect media="screen and (max-width: 1em)"/>
>>     <rect media="print" />
>>   </switch>
>>
>>   <!-- or standalone: -->
>>   <rect media="print" />
>>
>> </svg>
>>
>> Cheers,
>> Manuel
>>
>
>