DEV Community

Discussion on: Rate my SVG art! [Compared to CSS art]

Collapse
 
lexlohr profile image
Alex Lohr

SVG gets really interesting when you start to work both in an imaging program and an editor, to the point where it's almost hand crafted.

Collapse
 
grahamthedev profile image
GrahamTheDev

Yes, I am currently working on cheating my way to a CSS only solution - so I am converting <path d=""> to clip-path: polygon().

I get <path> but there are some <polygon points=""> in there and converting them is something I am having to learn (seems straight forward but really threw a spanner in the works!).

I think the bit that is hard to hand craft is the curves, I can "edit" them if they are generated, I don't understand them well enough to write one from scratch by hand though!

I don't think I will ever hand craft anything other than a circle and a square in SVG! 🤣

Collapse
 
afif profile image
Temani Afif

you cannot convert a path to polygon because polygon cannot handle curves. Clip-path already have a path() value (twitter.com/jensimmons/status/1201...) so converting this to CSS is easy but still SVG behind the scene

Thread Thread
 
lexlohr profile image
Alex Lohr

You can try to have an approximation of a curve as a polygon, by spliitting it into multiple lines. However, that doesn't scale as well for obvious reasons.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

This is what I am doing, approximating a curve. In a busy enough image you don't need to add too many paths to make a circular looking shape. I am having fun trying to fine tune it though to try and keep the balance right.

What I am finding is that gaps between two polygons that previously had curves is a pain to fix, but I think I can just hide that with a background colour and the eye will miss it.