Skip to main content
CSS is fun and cool and I like it.
Article

SVG `use` with External Source

There is another, newer article on this subject that covers some newer information.

Inline SVG is an awesome way to use SVG because, among other reasons, the individual shapes that make up the graphic can be scripted and styled. The shapes are right in the DOM. But does that mean we have to define those shapes right in the HTML on every page? Nope, we can <use></use> to reference them from elsewhere. Ideally, that "elsewhere" is an external file, because Read article

Article

Icon System with SVG Sprites

I've been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you're good with IE 9+, using inline SVG and the <use></use> element to reference an icon is a superior system.

First let's cover how it works.… Read article

Article

How SVG Line Animation Works

I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a custom designed article and wrote about it. Codrops has some neat examples.

I have very little to add, except my … Read article