Articles Tagged svg icons

The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their quality, and can be animated. Still, there is a learning curve. Things, like the syntax of SVG, can be a little tricky and having to hand-alter SVG code sometimes isn’t out of the question.

Most SVG assets allow styling to be applied in predictable ways. For instance, this circle has a hover state … Read article “Add Background Colors to SVGs Using the “rect” Element”

One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after) in my CSS. This technique offers several advantages:

• They don’t require any additional HTTP requests other than the CSS file.
• Using the background-size property, you can set your pseudo-element to any size you need without worrying that they will overflow the boundaries (or get chopped off).
• They are ignored by screen readers (at least in

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different.

Let’s look at the ways.… Read article “Change Color of SVG on Hover”

I wrote that using inline <svg></svg> icons makes for the best icon system. I still think that’s true. It’s the easiest possible way to drop an icon onto a page. No network request, perfectly styleable.

But inlining code has some drawbacks, one of which is that it doesn’t take advantage of caching. You’re making the browser read and process the same code over and over as you browse around. Not that big of a deal. There are much bigger … Read article “Inline SVG… Cached”

This post is the first in a series about the power of CSS.

Article Series:

1. Colorizing SVG Backgrounds (this post)
2. Dropdown Menus
3. Logical Styling Based On the Number of Given Elements

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!

One of those is … Read article “Solved with CSS! Colorizing SVG Backgrounds”

Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of <svg></svg> might have a <title></title>, and you might be appying IDs to both of those elements for various reasons.… Read article “If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?”