Eric Katz
Web Developer based in Columbus, OH.
Get ANIMATED
ABOUT SVG
Breathe Life into your ASSETS/DOCUMENTS!
Find the Opportunities
Choose your implementation strategy
Less is more
Don't over do it.
Be Subtle
Don't distract from purpose
SVG Recap
SVG Recap
SVG building blocks ->
Rectangles
Circles, Ellipses
Line, Path
Polyline, Polygon
source: @thebabydino
WHY SVG? WHY NOW?
Proliferation of Mobile Devices
Device Sizes / Dimensions
Increased Pixel Density
Device Sizes / Dimensions
Rendered Sizes / Resolutions
* list of many devices, ppi/phys/pixel resolutions: http://mydevice.io/devices/
Increased Pixel Density
* imac svg from http://www.apple.com/imac-with-retina/
Animations
Animating SVG comes in 3 Flavors
- CSS
- SMIL
- JavaScript
Animations
CSS
source: @sarasouidan
Animations
CSS
Transforms not supported in IE
Transitions not supported in IE9
Cannot animate on Path (but soon.. motion!)
Animations
SMIL
Synchronized Multimedia Integration Language
source: @noahblon
Not supported in IE.
Deprecated in Blink ( Chrome )
Probably the most reliable method to animate SVG across browsers.
Animations
JavaScript / Libraries
Designed ANIMATIONS
Sometimes a designer has an animation in mind.
They may even be able to give you an animated gif as a point of reference.
Designed ANIMATIONS
Heck, let's just use the .gif file right?
NO PLS DON'T DO THIS
It doesn't scale nicely, even when you save and access at 900 x 900 resolution.
Example to the right is 942kb with
transparency.
Designed ANIMATIONS
.gif
.svg
~940 kb
~29 kb
Designed ANIMATIONS
.gif
.svg
~560 kb
~14 kb
Designed ANIMATIONS
.gif
.svg
~799 kb
~12 kb
Improvisation
Improvisation
Improvisation
Improvisation
Improvisation
TO BE CONTINUED...
Get Animated About SVG
By Eric Katz
Get Animated About SVG
Animations Presentation on SVG. Going through the process of designing for an animation and than also improving creative animations where possible. The presentation goes through animations best practices in SnapSVG and GSAP.
