[Proposal] Support for inner-, center- and outer strokes

[linkert]

One thing I've always missed with SVGs is the ability to position a stroke relative to the curve/object it is being applied to.

Simple example would be: if i have a rectangle with 32×32 and apply a stroke of width 2 to it, it should either be 34×34 (centered), 32×32 (inner) or 36×36 (outer).

Request stems from brief comment interaction on Reddit - A challenger to the throne of vector graphics. SVG is dead, long live TinyVG!.

Within the same comment section someone rightly posed the question - what happens if you have a two points creating a line and you apply a stroke to it. How does center, inner and outer stroke options behave? To answer this I’d have to reach far into my tarnished memory and remember how it works in Adobe Illustrator which I last ran ~6-7 years ago. I think it simply defaults to center and and “grays out” inner and outer buttons in the stroke settings panel.

[notverymoe]

This is something I'm extremely interested in.

To emulate it in SVG I've had to employ workarounds such as duplicating the shape to mask in/out the stroke (mask-in for align inside, mask-out for align outside) or to create a specific path for the stroke. The first is easier to do, but can be prohibitive performance-wise and both of them make it more difficult to manually edit after the operation is performed since the association is lost

I think in the case of a non-enclosed shape, forcing to centre makes the most sense. You could use the direction of each line segment to pick an arbitrary "outward" direction, which could be useful where a one-sided stroke is useful - for example cliff markings on a map. That might be a little unintuitive however, if editors don't implement anything to differentiate that.

Another thought I have is that this doesn't necessarily be limited to "inward, outward, centered", you could have a normalized stoke offset instead. ie. -1.0 means offset inward by the stroke width (aligning it with the inside), 1.0 means offset outward by the stroke width (aligning it with the outside). +/-2.0 could place it off the edge, and +/-0.5 could place only slightly off-center. I think this would be particularly useful for more arty users, though I appreciate that it might make renderer implementation more complex than it needs to be.

[neinseg]

I think that having an arbitrary offset would make the renderer too complex. While this might be not too bad to implement if you're writing your own stroking/filling/etc. anyway (e.g. on an embedded platform), it is going to make trouble anytime someone tries to render TinyVG using standard graphics APIs. For instance, AFAICT Cairo does not have any support for one-sided or offset stroking. Implementing this feature without support of the underlying graphics lib's stroking API is going to be extremely annoying.

[ikskuh]

I'm still thinking about this issue, it's definitly a good use case to allow outer, centered and inner stroking, but i'm not sure if the additional rendering complexity is worth it.

I also have no idea how to implement that so it is correct, so if someone wants to do a prototype, i'd be happy!