SVG Filters 101
https://sarasoueidan.com/blog/svg-filters-101/
https://sarasoueidan.com/blog/svg-filters-101/
… Source: https://rsci.app.link/TtBPEkpQyR?_p=f4503a4df237de636a9d0e7a
I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components. What’s unDraw?… Source: https://css-tricks.com/how-to-create-a-component-library-from-svg-illustrations/
This post is the first in a series about the power of CSS. CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging…. Source: https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/
A reader wrote in to tell me we should update our articles about SVG elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That’s pretty strong language, hence the reader’s warning. This is a bit surprising to me, as the SVG 2 thing got a little weird…. Source: https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/
Radial Progress Bars on the web are a great way to display to the user how far through a process they are. There are many ways you can make Radial Progress Bars but I find the easiest is to draw them with SVGs and use Vue (or any other JavaScript libraries) to animate them…. Source: […]
CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI’s simpler, and that’s exciting!… Source: https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/
If you’re reading this article, then I can probably assume you’ve already decided to switch from using fonts for icons to an SVG icon system. Or maybe you’re pondering the idea and want to get an overview of how that would be done and whether or not it’s worth it…. Source: http://www.sarasoueidan.com/blog/icon-fonts-to-svg/
Note how the art doesn’t touch the edges of the artboard. Say you want that space around it, and you want to save it as SVG for use on the web. THE CLAW! You’ll see space around here, but unfortunately the classic Save for Web dialog doesn’t export as SVG at all, so that’s not […]
Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of might have a, and you might be appying IDs to both of those elements for various reasons…. Source: https://css-tricks.com/youre-inlining-svg-icons-deal-unique-titles-ids/