Articles Tagged

SVG

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 …

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 …

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 …

Let’s say you’re using inline SVG and want to change the SVG icon that is displayed in an element on state change, like changing a class or on :hover/:focus. There are a number of ways you can approach that.…

A huge pile of information about SVG.…

One time someone told me their biggest problem with SVG icons is that they didn’t match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG …

Looking for a better way to do SVG icons? Inline SVG might be your best bet, which you can learn about in this more recent post.

You could design an icon set where the icons all had the exact …

The following is a guest article by Chris Scott. Chris takes us through a great use case for the Shadow DOM. As designers, we may want to style something in a certain way, but sometimes end up having to …

Let’s say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that …

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 …