Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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! 🤣
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
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.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
Yes, I am currently working on cheating my way to a CSS only solution - so I am converting
<path d="">
toclip-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! 🤣
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
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.
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.