Find the Opportunities
Choose your implementation strategy
Less is more
Don't over do it.
Be Subtle
Don't distract from purpose
Rectangles
Circles, Ellipses
Line, Path
Polyline, Polygon
source: @thebabydino
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/
Animating SVG comes in 3 Flavors
source: @sarasouidan
Transforms not supported in IE
Transitions not supported in IE9
Cannot animate on Path (but soon.. motion!)
source: @noahblon
Not supported in IE.
Deprecated in Blink ( Chrome )
Probably the most reliable method to animate SVG across browsers.
Sometimes a designer has an animation in mind.
They may even be able to give you an animated gif as a point of reference.
Heck, let's just use the .gif file right?
It doesn't scale nicely, even when you save and access at 900 x 900 resolution.
Example to the right is 942kb with
transparency.
.gif
.svg
~940 kb
~29 kb
.gif
.svg
~560 kb
~14 kb
.gif
.svg
~799 kb
~12 kb