SVG Is Awesome
@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!)
<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.
Relevant: PS4 Review from Polygon, XBox One Review