search

Pomax / svg-path-reverse

This is a JavaScript SVG path to "something" converter, turning a path into hookable graphics instructions for arbitrary conversion
59 stars 15 forks source link

SVG's Y axis convention #16

Closed gtoal closed 1 year ago

gtoal commented 1 year ago

All the 'B' drawings in https://pomax.github.io/svg-path-reverse/ are upside-down, probably because SVG uses a top-left zero origin for its coordinate system and whatever tool you used to produce the diagrams probably uses the more intuitive convention of a bottom-left zero origin. I had exactly the same problem when I added an SVG loader to a polygon library I'm working on, which also defines increasing Y as bottom to top.

Pomax commented 1 year ago

I don't think this library needs to call out how SVG (and <canvas>) work, though. Y going "down" has always been the convention. Discovering your things get drawn "upside down" is an important learning moment when using SVG.

Thankfully, if folks need their resultant path(s) flipped, a simple <svg ... transfrom="scale(1,-1)"> gets you where you want to be, or if you just need individual paths flipped, transform paired with transform-origin are your friend (well.. frenemy. They work great, but you might get your origin wrong and then get confused).

gtoal commented 1 year ago

Heh :-) I wasn't suggesting any change to any library code, I just meant maybe your page should use the 'B' example with the letter the right way up! It just looks bad like that! (although as someone who was once a typesetter, perhaps I'm a little more sensitive to things like that than the average programmer).

Pomax commented 1 year ago

Nah, I intentionally have it upside down for that very reason: OpenType is upside down if you take its units and stick it in SVG (or a canvas) =D

But more practically, I'm intentionally forcing you to focus on the fill behaviour, rather than the glyph.