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.
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”
Perhaps you’ve heard of data URIs. It’s a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g.
image/png), semicolon, then the data of that file.… Read article “Probably Don’t Base64 SVG”
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”
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 epic… Read article “A Guide to SVG Animations (SMIL)”
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”
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”