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

css-generators.comSVG to CSS Shape ConverterA simple tool to transform an SVG shape into a CSS shape. Get a modern and optimized code in no time!.

12/5/25, 9:48 am32 reposts140 likes

Álvaro Montoro

@alvaromontoro.com

Nice

Now you can make your comics in 4K 😎

Álvaro Montoro

@alvaromontoro.com

They always were 😉

@link2twenty.bsky.social

This looks great. One question: how is the aspect ratio determined?

It's the ratio of the smallest rectangle where the shape can fit. Inspect the code of the examples and you will notice no extra white space around the shape

This is bloody great!

Thanks 👍

Lennart Schoors

Great stuff! Wondering if we'll all soon be using icons with CSS shape()s rather than inline SVGs. I can only see benefits (cacheable icons!) except that we'll need to build a development pipeline to add and edit icons. A conversion library like this might help with converting a folder of SVGs.

@ivorjetski.bsky.social

Well that's ruined all my fun! 😆 Amazing work! 🥳

But we will have a "new" fun. Imagine a shape() where you can add var(), calc(), etc ... A lot of possibilities for drawing and animating 😉

Awesome!!

@alpha125a.eurosky.social

Incredible time saving! Thanks for the info!

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 :)

gist.github.comMe and ChatGPT drafting a minimal SVG spec, drawing inspiration from VectorDrawable and TinyVGMe and ChatGPT drafting a minimal SVG spec, drawing inspiration from VectorDrawable and TinyVG - 0-svg-nano.md