[csswg-drafts] Support for passing CSS styles to an SVG used via img[src] (#8634)

brandonmcconnell has just created a new issue for https://github.com/w3c/csswg-drafts:

== Support for passing CSS styles to an SVG used via img[src] ==
## Description

Currently, it is not possible to apply CSS styles to an SVG if it is used via `img[src]`.

This proposal adds a new CSS syntax that would enable developers to target the root SVG element in such cases and apply CSS styles to it and its descendants.

## Proposal

To achieve this, a pseudo-element can be added to the img src link that acts as the root for the SVG, allowing styles to be targeted for both the SVG and its child elements. The syntax for this can use `::src` as it is tied to the `src` for the image.

## Syntax

To target the root SVG element, the syntax can be as follows:

```css
img::src {
  /* CSS styles to be applied to the root SVG element */
}

To target child elements within the SVG, the syntax can follow standard CSS selector patterns:

```css
img::src > path {
  /* CSS styles to be applied to the selected child element within the SVG */
}
```

## Examples

<details><summary><strong>SVG Source</strong> (expand/collapse)<br /></summary><br />

For completeness, here is example HTML/SVG source that can be used with the below examples:

```html
<!-- index.html -->
<img src="example.svg" alt="example image">

<!-- example.svg -->
<?xml version="1.0"?>
<svg id="mySVG" width="250" height="150" style="border: 1px solid black;" xmlns="http://www.w3.org/2000/svg">
  <g id="myGroup">
    <rect id="myRect" width="36.416" height="36.416" x="30" y="30" fill="red" />
    <text id="myText" x="80" y="80" font-family="Verdana" font-size="24" fill="blue">hello world</text>
  </g>
</svg>
```

This looks like this:

<img width="263" alt="image" src="https://user-images.githubusercontent.com/5913254/227003781-33439d0c-8630-4d8b-9fa8-d13cb6c157f8.png"></details>

---

To demonstrate the proposed syntax, here are two examples targeting the root SVG and a child element within it:

#### Example 1: Targeting the root SVG

In this example, the `fill` property is applied to the root `svg` element:

```css
img::src {
  fill: red;
  border: 10px solid blue;
}
```

#### Example 2: Targeting a child element within the SVG

In this example, `fill` and `stroke`-related properties are applied to the `rect` element, and `font`-related properties are applied to the `text` element within the SVG:

```css
img::src #myGroup rect {
  fill: violet;
  stroke: red;
  stroke-width: 3%;
  stroke-dasharray: 2px;
}
img::src text#myText {
  font-family: cursive;
  font-size: 32px;
}
```

#### Example 3: Applying a rotation animation to the `rect` element

In this example, an animation is applied to the `rect` element within the `g#myGroup` group:

```css
img::src #myGroup rect {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

```

#### Example 4: Applying a transition to the `text` element on `:hover`

In this example, a transition is applied to the `fill` property of the `text` element within the `g#myGroup` group. When the `text` element is hovered, its `fill` property is changed:

```css
img::src #myGroup text {
  transition: fill 0.5s ease-in-out;
}

img::src #myGroup text:hover {
  fill: green;
}
```

I'm not sure how feasible this example is, depending on if we can granularly pass user events like a hover state into the image's source. If so, this would be great.

## Other thoughts & gotchas

In terms of security, I don't foresee too much if any risk in this feature. That said, I can imagine situations where someone may not want their SVG meddled with and would want a way to prevent style injections like this.

With that in mind, it could be helpful to add support for an attribute to `svg` to enable disallowing style injection, like `disallow-external-styles`:

```svg
<svg disallow-external-styles>...</svg>
```

Notably, while we could add an attribute like `allow-external-styles` to instead allow such styling on a per-case basis, I think the better default would be to allow styling unless specifically disallowed.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8634 using your GitHub account


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

Received on Wednesday, 22 March 2023 19:05:09 UTC