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

How SVG Fragment Identifiers Work

I’ve talked a good bit about SVG’s <use></use> around here and using it to build an icon system. The beauty of <use></use> is that you can reference just a part of some SVG defined elsewhere and draw just that part somewhere else. That ability allows you to build a whole system out of it, solving the “many images in one request, because that’s super efficient” problem that we’ve solved in the past with CSS sprites and icon fonts.

But … Read article “How SVG Fragment Identifiers Work”

27: Animating SVG with JavaScript

JavaScript is the last of the ways we’ll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can’t do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the SVG code itself, which is more powerful in that it can animate more things including the shape of the element themselves.

JavaScript can do everything either of those can do, … Read article “27: Animating SVG with JavaScript”

Article

How SVG Shape Morphing Works

While animating SVG with CSS is easy and comfortable, CSS can’t animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren’t possible to change or animate in CSS. You can animate them through SMIL though. Sara Soueidan covers this in her guide to SMIL here on CSS-Tricks, but I thought I would shine a light on this particular ability.

Update: This post is all about SVG… Read article “How SVG Shape Morphing Works”
Article

SVG Artboard Sizing

There are a couple of different (rational) approaches to SVG artboard sizing.

The term “Artboard” here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Ultimately it refers to the viewBox in the actual SVG output. It matters very much for front end developers, because if there is no consistency, the positioning of the SVGs will always be a little one-off battle and really hurt the idea of SVG being a useful … Read article “SVG Artboard Sizing”

Article

A Guide to SVG Animations (SMIL)

Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it’s features.

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epicRead article “A Guide to SVG Animations (SMIL)”

Article

A Look at SVG Light Source Filters

The following is a guest post by Joni Trythall. Joni recently finished a Pocket Guide to Writing SVG. I’ve been excited about SVG for a while now, working with it, learning about it, writing about it… but there is so much to know. It really is another whole universe of the web. So I reached out to Joni to see if she would like to write something for CSS-Tricks on SVG and she agreed! Here’s Joni on lighting in Read article “A Look at SVG Light Source Filters”

Article

Glitch Effect on Text / Images / SVG

Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.

It’s bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I’d explain. Then I ended up making it … Read article “Glitch Effect on Text / Images / SVG”