[svgwg] Add the `media` attribute to selection criteria for `<switch>` (#832)

Boldewyn has just created a new issue for https://github.com/w3c/svgwg:

== Add the `media` attribute to selection criteria for `<switch>` ==
The [`<switch>` element](https://svgwg.org/svg2-draft/struct.html#SwitchElement) 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](https://html.spec.whatwg.org/#attr-source-media). It contains a [valid media query list](https://drafts.csswg.org/mediaqueries/#ref-for-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.

Please view or discuss this issue at https://github.com/w3c/svgwg/issues/832 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 29 March 2021 10:00:23 UTC