Simplify theming SVG with contextual fill and stroke values

#webdev #svg

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.

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.

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

Written by Rob O'Leary

Subscribe to web feed for the latest articles.