[fill-stroke] Stroke alignment: open & complex paths

[Mamboleoo]

Hey there, I know this is not a new request but I couldn't find any issue related to this topic nor any mention in the future proposal for the specs (#StrokeProperties) but if I'm wrong feel free to close this issue :)

I was wondering if a stroke alignement property could be part of the future specs? Taking Adobe Illustrator as an example, it allows three type of alignement (Center, Inside, Outside) but when exporting to SVG using inside and outside values will convert the path using a stroke into a plain path.

Open path

I also noticed that Illustrator doesn't allow an alignment if a path isn't closed.

I guess the reason is linked to the naming of the alignements since an open path doesn't have an inside or outside part. But maybe the outside could be defined based on the clockwise direction of the path? (Using different naming could also be needed)

Thanks!

[Mamboleoo]

I guess I submitted my issue a bit early because I just found out about this draft where I found many of my questions. https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment

[AmeliaBR]

Hi Louis,

The most up-to-date draft spec is actually the CSS Fill & Stroke module: https://drafts.fxtf.org/fill-stroke-3/#stroke-align

Current issues on that spec: https://github.com/w3c/fxtf-drafts/labels/fill-stroke-3

I'm going to try to transfer this issue to that repo, since it doesn't look like there is an open GitHub issue to match the inline issue.

There hasn't been much movement on the proposal in years. SVG WG folks have been prioritizing cleaning up the SVG 2 spec, and there aren't enough of us to do the work.

The open questions for stroke-align remain the same as in the SVG module you linked to: what to do with open or criss-crossing paths?

The probable answer is: do what existing graphics programs do (even if that means ignoring the property). If you or anyone else can compile here a summary of how Illustrator, Sketch, Figma, etc., handle this property on complex paths, we can hopefully remove that issue, finalize the spec for this property, and then put pressure on browsers to implement it!

[Mamboleoo]

Thanks for your answer! I would love to see that property being implemented so I will try to take some time to write some notes about how Illustrator handle it and how we could improve it or use it as is for SVG. Is this issue the best place to share my future work on this?

[dirkschulze]

@AmeliaBR The issue is more complex than it is described in the spec. Many implementations take the winding rule into account as well.

Just as an overview what some implementations do for complex shapes:

To open vs. closed path: Adobe Illustrator and Adobe XD just supports inner and outer strokes on closed paths - Adobe Photoshop on open paths as well. Not sure about InDesign but usually all implementations do something different.

[AmeliaBR]

Dirk, if you have screenshots of actual implementation variation, that would definitely help. Maybe we won't be able to match everyone if they're not consistent to start with. But we should at least get an idea of where the inconsistencies will be!

[Mamboleoo]

Here is the result on current version of Photoshop. It looks like it acts with a fill-rule of even-off as a default (I couldn't find how to change it)

And here is Illustrator.

I will try to do the same on inDesign asap ;)

[AmeliaBR]

Interesting. So for Illustrator, at least, the inside/outside for the stroke isn't affected by the fill rule.

[Mamboleoo]

I was thinking, instead of defining the expected result we could create another rule to let the user define what result their are expecting?

This example is using a stroke-alignment: inside but it would behave the same with outside.

In this example the stroke-rule would define if the stroke should be drawn all along the path nonzero or the result should be defined based on the inside areas of the path evenodd. Of course those terms are copy-pasted from thefill-rule` property and it may make no sense (I never truly understood this property, I always tried both values and picked the expected result 😅)

[BigBadaboom]

Here's the result from Sketch.

• Inside/outside on open paths is not allowed
• Winding rule of path has no effect. Sketch's default rule is "non-zero".

[jrmuizel]

I don't think any of the underlying graphics libraries used by browsers implement this functionality so I suspect the appetite for implementing wont be that high. It feels to me a like a feature better left in authoring tools.

[BigBadaboom]

For completeness, here is what Figma does.

• Inside/outside on open paths is allowed, but has no effect
• Winding rule of path does have an effect.

It appears they are using the simple, obvious(?), solution of masking a double-width stroke with the fill (for inside), or the inverse of the fill (for outside).