Media queries in <switch> elements


recently several posts and tutorials sing the song of “responsive SVG”, 
e.g. Clown Car, 
Responsive Icons, <> or more recently, 

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:

and this presentation from Robin Berjon:

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 

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 

Reference SVG of what I’m talking about:


   <!-- inside switch element: -->
     <rect media="screen and (max-width: 1em)"/>
     <rect media="print" />

   <!-- or standalone: -->
   <rect media="print" />



Received on Thursday, 6 March 2014 10:15:33 UTC