SVG Animations

Preface

SVG Animation: Where Art and Code Intersect

People joke that working with Scalable Vector Graphics, one must be an archaeologist, and as funny as it is, there’s a lot of truth there. SVG has long lain dormant, put aside for its previous lack of support and understanding. But a few twists in the web plot have allowed for its resurgence, now-excellent support, and now-strong standing in the community:

Data visualization

Being able to visually express concepts with the actual data is vital for communication of complex concepts.

Responsive

In a world of thousands of devices, viewports, and pixel densities, the ability to use one graphic and have it be crisp and scale to all of them is a game-changer.

Performance

When SVG is built properly, with reduced path points and simple shapes, it can offer tiny file sizes that bitmaps can’t compete with. With properly constructed SVGs we can make our web lightning-fast and available to all.

A navigable DOM

This point is a sleeper hit: you might not immediately notice it as a boon to development, but SVG’s integration into the DOM means you have the ability to offer more information to screen readers and make your graphics truly accessible. You can also reach right inside and animate or manipulate small sections at a time. In this book, you’ll discover how powerful a feature this is indeed. No crazy z-indexing and absolute positioning required!

SVG can move smoothly, freely. We’ve only just hit the surface of its potential. As a developer, you can feel the rush of dopamine as you watch this flexible medium bounce and snap. You can create realistic movements or stylized motions that complement your branding. The amazing thing about SVG is that you get to draw with math.

In this book, we’ll cover SVG from start to finish. This means we’ll look at the SVG DOM, so that working with it doesn’t feel so daunting. We’ll talk about designing SVGs for performance so that you have lean, clean graphics that help your site and don’t hurt it. We’ll talk about animating with CSS, go into some theory, and then dive deeper into some truly advanced techniques with JavaScript for beautiful and interesting effects. If you’d like to learn about designing SVGs, you’ll do better with the first part of the book, while JavaScript developers will probably favor the second half. SVG brings together the worlds of design and development, so the book was written to accommodate both. I would recommend you read the first chapter, though, either way: it lays the foundation for a lot of understanding.

Animating SVGs is one of the most exciting parts of the web for me: unlocking the potential for performance, accessibility, beauty, and creativity, while avoiding some of the code ugliness and graphic hacks that responsive design sometimes entails. Working with this medium has allowed me to create amazing data visualizations that communicate clearly, tell stories, or even just make a user interaction feel a bit more refined.

Having worked for over 10 years in frontend development, learning SVG animation has helped me stave off burnout by exciting me when I fell into a rut. I hope you’ll enjoy working along with the book and producing dynamic graphics for the web. It’s an exciting time, and there is so much potential… only the smallest part of which has been fulfilled in web design and development to this point. I look forward to seeing the work you make with the new skills you will learn here, so that together we can push the web forward one creation at a time.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This element signifies a tip or suggestion.

Note

This element signifies a general note.

Warning

This element indicates a warning or caution.

Using Code Examples

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “SVG Animations by Sarah Drasner (O’Reilly). Copyright 2017 Sarah Drasner, 978-1-491-93970-3.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

O’Reilly Safari

Note

Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals.

Members have access to thousands of books, training videos, Learning Paths, interactive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others.

For more information, please visit http://oreilly.com/safari.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

• O’Reilly Media, Inc.
• 1005 Gravenstein Highway North
• Sebastopol, CA 95472
• 800-998-9938 (in the United States or Canada)
• 707-829-0515 (international or local)
• 707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/2nouksg.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

I’d like to thank Meg Foley for being an incredible editor, whose guidance and thoughtfulness are always appreciated. Without her, this book would not have been possible.

I’d also like to thank the tech reviewers, Amelia Bellamy-Royds, Dudley Storey, and Val Head, whose feedback helped wrangle the book into legible shape! Thank you so much for your hard work. I’d like to thank Jack Doyle and Carl Schooff of GreenSock, Cheng Lou of React-Motion, and Oleg Solomka of mo.js too, for reviewing the content that addresses use of their libraries. Thanks also for making such amazing tools for motion on the web! I’m so grateful. Thank you Chris Lilley for inventing SVG, you’re an inspiration! And thanks to Chris Coyier for the wonderful foreword as well as for being such a great mentor to me in technical writing, for CSS-Tricks and otherwise.

The biggest thanks go to Dizzy Smith, Meagan French, and Donna Ferriero for their ongoing support, especially when my ambition eyes are too big for my time-in-the-day stomach. Thank you for your care during the tough times and celebration during the milestones. You’re the best!