SVG Is Awesome

December 2014

@brnnbrn, Brenna O'Brien

Anatomy of an SVG Element

Everything is relative to the viewBox. viewBox Rules Everything Around Me! (V.R.E.A.M!)

_Editorialized <text>: allows you to have huge display type that's completely responsive.

Curved text: Create a path, and then curve type to that path.

: like SVG variables.

Fancy Fills: SVG has its own gradient syntax. Sweet! Add it to a <def>, and literally anything you want can have a gradient. Same with having images as background colors!

: Turns any SVG element into a fill. Most fun with images, because you can fill anything with gifs.

: they need a width and height. If not they'll disappear :(

preserveAspectRatio: It can fill fill shapes automatically if you get the values right.

So, what have we learned?

Editorialized text + gradients = Gradient text for all the browsers!

Editorialize text + gif fill = Fill text with gifs! AGH! "I don't know what you would do with that on a production website, but I hope one of you finds a use case."

: like a cookie cutter.

clipPath: stamps out with hard edges. With s, you can fade out, like if you had a gradient.

Filter Effects: You can have blurred backgrounds with SVG filters.

SVG Instagram!: you can combine filters (feTurbulence for noise, feComponentTransfer for RGB channel adjustments, feGaussianBlur) to get rad Instagram filters. Whoo!

SVGs that draw themselves: You can have beautiful line art that draw themselves, like Vox's playstation that drew itself: long stroke-dasharray + animated stroke-dashoffset. That's gorgeous.

But... why not just `<animate>` with CSS & JS?

Er, normally that's way better, BUT:

tweans! Morphing Quarters A path'sd attribute.

Go Exploring!

Relevant: PS4 Review from Polygon, XBox One Review