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

[brandonmcconnell]

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:

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

SVG Source (expand/collapse)

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

<!-- 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:

---

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:

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:

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:

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:

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 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.

[brandonmcconnell]

Also posted this same proposal to w3c/csswg-drafts#8634. It's a clear duplicate, so whichever place is better suited for this proposal, let's keep it there and close the other.

[brandonmcconnell]

Closing this as a duplicate of w3c/csswg-drafts#8634