re: Making <switch> useful

I like Robin's general idea about marrying media queries with  
<switch>. For me, the compelling case is the obvious one in which the  
author wants detailed vector graphics layouts on big devices, and  
simpler vector graphics on smaller devices. (Pixel graphics don't even  
necessarily enter into it, <picture> is just a parallel proposal.)

Yes, you could functionally do this with media queries using  
svg-in-html, using display:none and a lot of verbose css selection.  
The disadvantage is authoring inconvenience and also performance:  
everything gets processed, which especially hurts on mobile. The hit  
is typically smaller than with pixel graphics, but it's there,  
especially when layouts get really complicated. I've written many  
animated svgs that have maxxed out the per-page RAM limit on IOS,  
crashing it. This isn't theoretical.

(I also agree that switch, as written, is not all that useful, and  
pretty much broken as currently implemented. I've never used it once  
in production. We talking about a future roadmap, and reducing future  
scripting requirements.)

The clever thing about switch (that it exits processing after the  
first "matching" child) is also its hang-up when working at any scale.  
It's only good for single elements. In practice, it would be more  
useful to evaluate on groups. I want to be able to write:

<svg>
 <switch>
     <g media="(max-width: 10em)">
         <path />
         <path />
         <path />
     </g>
     <g media="(max-width: 18em)">
         <path />
         <path />
         <path />
     </g>
     <g media="(max-width: 45em)">
         <path />
         <path />
         <path />
     </g>
     // fallback & accessibility
     <g>
         <path />
         <path />
         <path />
     </g>
   </switch>
</svg>

The beauty of this mobile-first pattern is that the low-powered  
(presumably) smaller device gets to exit early. If <switch> isn't the  
place to leverage the power of media queries natively in svg, then  
where?

Best,
Alex

Received on Wednesday, 11 September 2013 11:14:58 UTC