Convert SVG to CSS properties
Hey, I saw this video of Kevin https://www.youtube.com/watch?v=4ALLynsZ0u0
I was wondering if anyone knows some tool to import a svg file and have it be converted in this way with border-radius. Or is there another better way? I know you can import SVG via a link the the point of me wanting to do it this way is to improve speeds on my website.
Kevin Powell
YouTube
Create interesting blob shapes with CSS
We can do more with border-radius than you might have thought!
π Links
β
The CodePen: https://codepen.io/kevinpowell/pen/PoQEPvG
β
Fancy Border Radius Generator: https://9elements.github.io/fancy-border-radius/
β Timestamps
00:00 - Introduction
00:43 - Understand how it works
03:16 - The easy way
03:48 - Having fun with this
#css #DubbedWithA...
8 Replies
You wouldn't
That tool he used is specific, and isn't correlated to SVG π€
You can use SVG in a clip path though. Or do SVG masking in itself.
what you ask is also pretty much impossible, because SVG offers an infinite number of shapes, where a border radius solution can only make amorphous blobs that look a lot like that one in the thumbnail
you can only have four smooth curves using the border radius trick. Not three, not five, exactly four
SVG cannot be converted to border radius for the reasons stated in the prior comments, but many SVGs can be converted to clip paths. You can even use the path syntax for a clip path, which allows you to copy the actual path data directly from SVG code.
This does have a limitation, because an SVG can have multiple paths. The clip path only takes one path. Also, an SVG can contain other parts that are not paths.
The way I'd use SVGs without linking them is by using SVG in CSS so you're on the right track.
What I do is open an svg file in a text editor and copy the raw code.
I like to use this tool https://yoksel.github.io/url-encoder/
copy the output in this "Ready for CSS" block
paste it into a root variable for your project (remove the beginning of the string that says "background-image")
Then you can use it for pseudo elements.
I mainly do this to override existing UI library pseudo element content but you can use it like this as well. Then it will ship the svg info with the stylesheet instead of a separate external linked file. You can also put raw SVG code right in your HTML markup
I'm doing this here for the "-" & "+" buttons on this numeric input counter
This is how I'm doing these "-" and "+" icons for this numeric input. Our UI/UX person gave me a Figma with SVGs I could export.
but the svg does it load from the url or from the css?
From the css. The css says URL, but its the actual SVG file data its reading. The browser isn't making any network calls to load the svgs, it comes with the stylesheet