Recycling Spare Parts

SVG's <switch> element

Robin Berjon, W3C HTML Editor / @robinberjon

SVG <switch>

Example


  <svg>
    <switch>
      <text systemLanguage="fr">Bonjour!</text>
      <text systemLanguage="i-klingon">nuqneH!</text>
      <text>Hello!</text>
    </switch> 
  </svg>
          

Rings a Bell?


  <picture width="500" height="500">
     <source media="(min-width: 45em)" src="large.jpg">
     <source media="(min-width: 18em)" src="med.jpg">
     <source src="small.jpg">
     <img src="small.jpg" alt="" lazyload>
     <p>Accessible text</p>
  </picture>
          

Yeah


  <svg>
    <switch>
     <image media="(min-width: 45em)" xlink:href="large.jpg"
               width="500" height="500">
     <image media="(min-width: 18em)" xlink:href="med.jpg"
               width="500" height="500">
     <image xlink:href="small.jpg" 
               width="500" height="500">
    </switch>
    <title>Accessible text</title>
  </svg>
          

Cons

  • Only works in SVG context
  • Requires somewhat horrendous syntax (xlink:href)
  • Does not yet support @media as a test
  • Other tests are useless or very close to it (requiredFeatures requiredExtensions, systemLanguage)

Pros

  • Already well supported in browsers
  • Has built-in, working fallback today
  • Wiring code for media to switch shouldn't be too much work
  • Bits can be shimmed
  • Responsive All The Things (video, canvas, arbitrary content)
  • We can fix the syntax for HTML

Fixed Syntax


    <switch alt="Accessible text">
     <img media="(min-width: 45em)" src="large.jpg">
     <img media="(min-width: 18em)" src="med.jpg">
     <img src="small.jpg">
    </switch>
          

Thank you

Robin Berjon / robin@w3.org / @robinberjon