Post

⚙️ New CSS Generator! Save this link for the future. A tool to easily convert any SVG shape into a CSS one in no time. Powered by the new shape() function! 🤩 css-generators.com/svg-to-css/ ✅ Single-element ✅ Responsive ✅ No more ViewBox headaches

I want a “SVG lite” standard that’s essentially just the path attribute specified in a standalone standard – it’s by far the most valuable part of SVG and deserves “liberation” from an otherwise very large and complex spec

If combined with a couple of other basic operations on top, like in Android’s VectorDrawable, then it’s pretty much all that one need for most things

I am not understanding what you mean exactly but if you meant SVG alone is enough to do most of the things then let me tell you that for me it's very very limited and it fails to achieve (at least in a flexible way) most of the things I want.

I collaborated a bit with ChatGPT to flesh out the ideas: gist.github.com/voxpelli/e7c... I do not mean that SVG is enough, rather that the path element should be allowed to shine on its own as it can do stuff like what you are pointing out :)

path cannot do what I want. The converter I am sharing is not the goal of using shape(), it's a tool to help with more complex stuff I want to achieve. See the Spec to understand why shape() was created: drafts.csswg.org/css-shapes-2...

Um, okay, that was kind of hard to decipher as the only input on that page is a path, I will check your link, sorry for praising paths 🙈

“The shape() function uses a set of commands roughly equivalent to the ones used by path(), but does so with more standard CSS syntax, and allows the full range of CSS functionality, such as additional units and math functions.” So it’s paths redefined in a CSS native syntax.

That just shows that paths should not be limited to the SVG spec but live and prosper on its own and be able to be expressed in alternative ways

keep reading the spec until the example ... it's not only path expressed differently. Shape can be built using variables, calc, different units, math functions, etc etc ... path uses numbers that are nothing but hard-coded pixel values. This makes a huge difference.

And is probably something that would be good outside of CSS as well? Anyhow, as I said, I’m sorry