Simplify theming SVG with contextual fill and stroke values!

Simplify theming SVG with contextual  fill and stroke values!

A new SVG feature landed in Chrome 124 (April 2024). 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.

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.
Here we have 2 lines (path elements), each has different value for the stroke property. Each has an arrow marker to make it into an arrowed line. The color of the arrow marker is taken from the line by using fill="context-stroke" in the defintion of the marker.

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 the line will also change the color of the marker. You can see 2 instances of this below that use different strokes, the first is navy and the second is olive.

SVG
<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 using SVG on the web, this simplifies theming and playing with colour palettes. You can keep your markup and styling DRY (Don’t Repeat Yourself). It is a valuable addition.

I created the initial version of the example in Inkscape 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 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.

Tagged