SVG Filters 101
https://sarasoueidan.com/blog/svg-filters-101/
Tag: SVG
… Source: https://rsci.app.link/TtBPEkpQyR?_p=f4503a4df237de636a9d0e7a
How to Create a Component Library From SVG Illustrations
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/
Solved With CSS! Colorizing SVG Backgrounds
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/
On xlink:href being deprecated in SVG
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/
Creating Animated Radial Progress Bars with SVG, CSS and VueJS
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: […]
Solved With CSS! Colorizing SVG Backgrounds
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/
Sara Soueidan – Freelance front-end Web developer, author & speaker
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/
Saving SVG with Space Around It from Illustrator
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 […]
If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?
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/