⚙️ 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

SVG to CSS Shape Converter
A simple tool to transform an SVG shape into a CSS shape. Get a modern and optimized code in no time!.
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.
May 12, 2025 19:19I 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 :)

Me and ChatGPT drafting a minimal SVG spec, drawing inspiration from VectorDrawable and TinyVG
Me and ChatGPT drafting a minimal SVG spec, drawing inspiration from VectorDrawable and TinyVG - 0-svg-nano.md
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
no, because I want it in the CSS to apply it to elements and rely on CSS features. The goal is not to have standalone shapes and include them in HTML.
Two recent examples I made (and I still have many for the future):
css-tip.com/rounded-hexa...
css-tip.com/arrow-like-b...