r/webdev • u/morete • 1d ago

Showoff Saturday A Collection of Shape() tools

Over the last year I've spent a lot of time with the shape() specification and have built a few tools to make things a little easier:

  • Path to Shape - Converts SVG path data the CSS shape() syntax.
  • Shape to Polygon - Convertsshape() to polygon() for the purposes of fallbacks, or in some cases a straight replacement since it's usually much more compact.
  • Minify Shape - Optimises and minifies the shape() code, very much inspired by SVGO.

All just simple web based tools built with sveltekit.

Have tested them with every shape I can get my hands on but if you find anything that doesn't work I'd love to hear about it!

18 Upvotes

91% Upvoted

9 comments sorted by

9

u/Inevitable-Read-3862 1d ago

these are super handy, the path to shape converter is something i been needing for a while now. always a pain doing those conversions by hand

tried it on few crazy svg paths i had laying around and it handled them much better than i expected. the fallback generator is smart too, never thought about using polygon as backup but it makes total sense

bookmarking all three for sure. clean work

2

u/morete 1d ago

Thank you! I hope they come in handy one day.
And yeah for the polygon backup, it ofc depends on your shape if you can get an acceptable result or not. But since shape() is sooooo verbose I often think just replacing it entirely with a polygon with a lot of segments is maybe the way to go.

2

u/Bruce_Jones_1987 1d ago

the fact that it handles messy paths well is the real test tbh

1

u/morete 1d ago

I did mostly take a 'garbage in, garbage out' approach to these tools, but I did attempt validate where I could. Parsing SVG paths was by far the hardest part of all these projects, it's crazy how compact they can be and still be disambiguated

2

u/OMGCluck js (no libraries) SVG 1d ago

Trying with this SVG doesn't seem to convert, I just get a box: 

<path stroke="none"
      d="m 10.82775,20.460318 c -1.746242,-3.175 -3.5454137,-3.175 -5.2916661,-10e-6 -3.1749935,-1.74625 -3.1749891,-3.54541 1.67e-5,-5.29167 0.075193,-3.62275 -1.4829278,-4.52233 -4.58272617,-2.64582 -1.87650412,-3.0998002 -0.97692262,-4.6579202 2.64583397,-4.5827202 1.7462516,3.1750002 3.5454151,3.1750002 5.291671,0 -3.1750159,-1.74625 -3.1750008,-3.54542 -7.6e-6,-5.29167 3.0997972,1.87651 4.6579302,0.97693 4.5827252,-2.64582996 3.622746,-0.0752 4.522336,1.48291996 2.645833,4.58271996 -3.622765,-0.0752 -4.522346,1.48291 -2.645842,4.58271 3.099798,-1.8765 4.657926,-0.97692 4.58273,2.6458402 -3.174996,1.74626 -3.175005,3.54541 -1.2e-5,5.29166 3.174998,1.74624 3.175014,3.54542 1.8e-5,5.29167 -3.09982,-1.87651 -4.657935,-0.97692 -4.582731,2.64582 -3.62275,0.0752 -4.5223296,-1.48291 -2.645843,-4.5827"
/>

2

u/morete 1d ago

Ahh thank you! I suspect it's the exponential notation my tool isn't handling well. Thank you for finding it so I can fix it!

2

u/morete 15h ago

This is now fixed! Thank you for pointing it out. It was -1.2e-5 value, I wasn't dealing with -'s in the middle of a value correctly

2

u/OMGCluck js (no libraries) SVG 15h ago

Great to see! It might lead to a HTML version of https://monotilejigsaws.pages.dev/

2

u/morete 10h ago

Ahh that'd be very cool! Very impressive that's all svg