Add the media attribute to selection criteria for <switch>

[Boldewyn]

The <switch> element currently respects two different attributes on its direct children, requiredExtensions and systemLanguage. Those two do not allow to address requirements in the “scalable compartment” of SVG, though.

My use case are SVG favicons, that will be shown typically in a range from 16x16 (favicon.ico replacement) to 512x512 (splash screen) device pixels. The need for art direction in such a large span is relevant, e.g., showing or hiding details of an icon or a byline depending on the final rendered size.

The inspiration for my suggested solution to declarative scalability adaptions comes from the HTML <picture> element, that chooses the appropriate image URL based (among others) on the media attribute of its child <source> elements.

Suggestion: Add an attribute media to selection criteria for <switch>

The media attribute works just like its counterpart in HTML. It contains a valid media query list.

The parent <switch> element takes the media query into account when selecting the first matching child.

Existing Solution / Prior Art

A similar effect can already be achieved with CSS in SVG:

<svg>
  <style>
  #a {
    display: none;
  }
  @media (max-width: 100px) {
    #a { display: inline; }
    #b { display: none; }
  }
  </style>
  <path id="a" d="M0,0 H 100" stroke="4" />
  <path id="b" d="M0,0 H 100" stroke="2" />
</svg>

(This is only a simplified example. Of course, in this case one could also directly manipulate stroke in the CSS.)

However, there is no true declarative method to achieve this in SVG without CSS’s help. In HTML one could also replace <picture> with a <div> and a bunch of CSS to load an appropriate background image, but it would rightfully be shunned as a clunky and inappropriate solution.

Example Solution with media

<svg>
  <switch>
    <path media="max-width: 100px" d="M0,0 H 100" stroke="4" />
    <path id="b" d="M0,0 H 100" stroke="2" />
  </switch>
</svg>

The SVG above would render the first <path>, if the output final size is 100px or smaller, and the second <path> in all other cases.

This opens up a lot of elegant solutions for art direction in SVGs, that will be shown in a wide range of different sizes and/or ratios.

[Crissov]

Isn't this a duplicate of #137?