W3C home > Mailing lists > Public > www-svg@w3.org > March 2014

Media queries in <switch> elements

From: Manuel Strehl <svg@manuel-strehl.de>
Date: Thu, 06 Mar 2014 11:15:09 +0100
To: www-svg@w3.org
Message-ID: <e774af797ad5d955ecc804718cbacce3@xa8.serverdomain.org>
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
Received on Thursday, 6 March 2014 10:15:33 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:54:51 UTC