Simplify theming SVG with contextual fill and stroke values
Tags: webdev, svg
Published: 2024-05-13 15:45:10


A [new SVG feature landed in Chrome 124 (April 2024)](https://chromestatus.com/feature/5146558556536832). The keywords `context-fill` and `context-stroke` are now available when specifying the `fill` and `stroke` properties. The contextual bit is that the stroke or fill color is derived from a related element. The benefit is that you are not responsible for keeping colors in sync for related elements by changing values in 2 different places.

These values are only applicable to elements within a `marker` element, or to a sub-tree that is instantiated with a `use` element. This may sound a bit abstract, so let's look at an example to show you what that really means.

For example, say we are using arrowed lines in a diagram. Usually, we want the arrow to be the same color as the accompanying line.

<figure>
![There are 2 arrowed lines here that are navy and olive. The arrow marker has a fill of context-fill. Its color will be the same as the line.](https://www.roboleary.net/assets/img/blog/2024-05-10-svg-context-fill-stroke/arrow-marker.png)
<figcaption>Here we have 2 lines (<code>path</code> elements), each has different value for the <code>stroke</code> property. Each has an arrow <code>marker</code> to make it into an arrowed line. The color of the arrow marker is taken from the line by using <code>fill="context-stroke"</code> in the defintion of the marker.</figcaption>
</figure>

We define a `marker` as below, it contains a `path` that has a trianglar shape and we give it `fill="context-stroke"`. Then we can create a `path` for each line and add the arrow marker through the `marker-end` property. Whatever `stroke` we assign to this `path` will change the color of the marker also. You can see 2 instances of this below that use different strokes, the first is navy and the second is olive.

```html
<svg width="150" height="150">
	<defs>
		<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
			<path d="M0 0l10 5-10 5z" fill="context-stroke"/>
		</marker>
	</defs>
	<rect width="100%" height="100%" fill="#fff"/>

	<path d="M122.14 33.64l.855 76.73" fill="none" 
	marker-end="url(#arrow)" stroke="navy" stroke-width="2"/>

	<path d="M37.545 33.64l.855 76.73" fill="none" 
	marker-end="url(#arrow)" stroke="olive" stroke-width="2"/>
</svg>

```

For diagramming on the web, this simplifies theming and playing with colour palettes. It is a valuable addition.

I created the initial version of the example in [Inkscape](https://inkscape.org/) v1.3.2. It produces markup that uses `context-stroke`. Vector graphics editors tend to be on the leading edge when it comes to adoption of SVG markup. It is the browsers that lag more often.

The curious bit of this for me is that this feature is part of the [SVG 2 specification](https://svgwg.org/svg2-draft/painting.html#context-paint) that appeared to be abandoned. Is this a sign of renewal of interest in the spec? Can we expect more SVG features?

I hope so. SVG could do with more love.

---

Written by [Rob O'Leary](https://www.roboleary.net)

[Subscribe to web feed](https://www.roboleary.net/feed.xml) for the latest articles.

<small>© Rob OLeary 2024</small>