SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. It becomes increasingly more interesting as you explore its capabilities for responsive animation and performance boons. When you animate SVG, you must be aware of normal image traits like composition, color, implementation, and optimization. But when you animate, it increases the complexity of each of these factors exponentially.
This practical book takes a deep dive into how you can to solve these problems with stability, performance, and creativity in mind.
Learn how to make SVG cross-browser compatible, backwards compatible, optimized, and responsive
Plan and debug animation
Make a complex animation responsive, as many sites are responsive
Profile each animation technique in terms of performance so that you know what you're getting in to with each library or native technology
Chapter 1The Anatomy of an SVG
SVG DOM Syntax
viewBox and preserveAspectRatio
Responsive SVG, Grouping, and Drawing Paths
SVG on Export, Recommendations, and Optimization
Reduce Path Points
Chapter 2Animating with CSS
Animating with SVG
Benefits of Drawing with SVG
Chapter 3CSS Animation and Hand-Drawn SVG Sprites
Keyframe Animation with steps() and SVG Sprites, Two Ways
Chapter 4Creating a Responsive SVG Sprite
SVG Sprites and CSS for Responsive Development
Grouping and DRYing It Out
The viewBox Trick
Chapter 5UI/UX Animations with No External Libraries
Context-Shifting in UX Patterns
Putting It All Together
Chapter 6Animating Data Visualizations
Why Use Animation in Data Visualization?
D3 with CSS Animation Example
Chartist with CSS Animation Example
Animating with D3
Chapter 7A Comparison of Web Animation Technologies
Chapter 8Animating with GreenSock
Basic GreenSock Syntax
Chapter 9GreenSock’s Timeline
A Simple Timeline
Nested and Master Timelines
Chapter 10MorphSVG and Motion Along a Path
Motion Along a Path
Chapter 11Stagger Effects, Tweening HSL, and SplitText for Text Animation
Relative HSL Color Animation
Chapter 12DrawSVG and Draggable
Chapter 15Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations
Practical Application: Animating the viewBox
Chapter 16Responsive Animation
Some Quick Responsive Tips
GreenSock and Responsive SVG
Responsive SVG, with or without GreenSock
Responsive Reorganization by Updating the ViewBox
Responsive Reorganization with Multiple SVGs and Media Queries
Chapter 17Designing, Prototyping, and Animation in Component Libraries
Sarah is an award-winning speaker, consultant, and staff writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. Sarah has given a Frontend Masters workshop on Advanced SVG Animations and is formerly manager of UX design & engineering at Trulia (Zillow).
The animal on the cover of SVG Animations is a Knysna turaco (Tauraco corythaix). It is part of the Musophagidae family (which translates to "banana-eaters"), and can be found in forests of South Africa and Swaziland.
The Knysna turaco is a distinguishable bird given its markings and coloring. Averaging 15 to 17 inches long (including their long tail), they are mostly green in plummage, which helps them blend in with treetops, but also have red flight feathers and shades of blue on the tops of their wings. Their bills are a bright orangish-red and come close to matching the color of their eye rings, which are lined with white borders along the bottom and part of the top of their eyes. Except for juveniles, their green crests are also topped with a streak of white.
Like other exotic birds, the Knysna turaco's diet relies heavily on insects and fruit, as well as earthworms. Food seems to be in great supply, so the Knysna turaco population is holding steady.
These birds build shallow nests in trees where breeding will take place. Breeding season varies based on region. One to two eggs are laid per cycle and are incubated for 12 to 21 days by both the male and female of a pair. It's not uncommon for just one of the two eggs to hatch. The young will venture outside of the nest after 18 days of hatching, but aren't mature and independent for an additional three weeks.
Many of the animals on O'Reilly covers are endangered; all of them are important to the world. To learn more about how you can help, go to animals.oreilly.com.
The cover illustration is by Karen Montgomery, based on a black and white engraving from Wood's Illustrated Natural History. The cover fonts are URW Typewriter and Guardian Sans. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag's Ubuntu Mono.