Skip to Content
SVG Essentials, 2nd Edition
book

SVG Essentials, 2nd Edition

by J. David Eisenberg, Amelia Bellamy-Royds
October 2014
Beginner
366 pages
8h 29m
English
O'Reilly Media, Inc.
Content preview from SVG Essentials, 2nd Edition

Chapter 12. Animating SVG

Up to this point, all the images you have seen are static images; once constructed, they never change. In this chapter, we will examine two of three methods of making graphic images move. The first method, SMIL-based animation, should be used for movement that is a fundamental part of what the graphic represents, and for which the motion can be defined ahead of time. CSS animations should be used for stylistic effects and simple feedback (like highlighting an element on focus/hover). Scripting should be used for more complex interaction, and it is covered in Chapter 13.

In Chapter 11, we suggested that filters should be used as a means to enhance a graphic’s message, not as an end in themselves. This suggestion is even more crucial with animation. Drunk with the power of animation, you will be tempted to turn your every graphic into an all-dancing, all-singing, Broadway spectacular. As long as your goal is experimentation, this is fine. If your goal is to convey a message, however, nothing is worse than gratuitous use or overuse of animation. Let me state this clearly: nobody except the company CEO is interested in repeated viewing of a spinning, flashing, color-changing, strobe-lit version of the company logo.

In this chapter, the message is the animation, so most of the examples will be remarkably free of any content while, of course, avoiding gratuitous and overwrought animation as much as possible.

Warning

Internet Explorer browsers (through version 11, ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

Modern SVG

Modern SVG

Amelia Bellamy-Royds, Kurt Cagle
SVG Text Layout

SVG Text Layout

Amelia Bellamy-Royds, Kurt Cagle
Mastering SVG

Mastering SVG

Rob Larsen

Publisher Resources

ISBN: 9781491945308Errata Page