Skip to content

SVG: Use paint order stroke to avoid inline images for SOURCE or CLEAR operators in strokes.

Cairo code examples that show how to use opaque fill with transparent stroke, use either the SOURCE or CLEAR operators to output the outline.

When outputting SVG, these always generate inline images. Ideally Cairo wouldn't have to do this, though it might not be possible in all cases.

Some code examples here, without using CLEAR, or SOURCE the fill is partially through the stroke (the same as example [1], below). https://gist.github.com/stuaxo/b525a47d33f5f3074b1be7c693f6b6e6

Solutions:

Opaque fill, transparent stroke: paint-order="stroke" can solve this, as found by @cassiecodes [2].

Transparent fill, opaque stroke: paint-order="fill" works here.

Non solutions:

Transparent fill, transparent stroke: I haven't found a way of outputting this yet, though it may well be possible.

[1]

image

[2] https://twitter.com/cassiecodes/status/1390338810911862790

Edited by Stuart Axon
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information