Smashing Podcast Episode 24 With Cassie Evans: What Is SVG Animation? — Smashing Magazine

@property --offset {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0px;
}

SVG’s Second Act: Why the Web’s Oldest Vector Format Is Everywhere Again

SVG has been around longer than many people writing code for the web, but the format is enjoying a genuine renaissance. The reasons are practical as much as aesthetic: vector graphics scale cleanly across every screen size and pixel density, they add detail without the page-weight penalty of raster images, and — most importantly for animation — they are structured markup, not a flat grid of pixels.

Cassie Evans, a front-end developer at Clearleft and long-time SVG advocate, frames the format’s appeal in terms of what it affords developers. “With JPEGs or PNGs, if you wanted to animate them or move bits of them around, you’d have to cut them out into little pieces,” she explains. “Whereas with SVGs you’ve got actual elements in the SVG. It’s got a DOM structure just like HTML does.” That structure is what separates SVG from older embedded-graphics approaches. Canvas, by contrast, behaves like a black box: without JavaScript, its contents simply disappear. SVG supports progressive enhancement, so an illustration remains visible even if the script that would animate it fails to load.

Code You Can Read, Not a Binary Blob

Because SVG is an XML-based language, it can be diffed, merged, and managed in Git like any other text file. You can inspect an SVG’s markup directly in the browser, which Evans says gives the format a flavor of the early web. “It feels a lot like the old web, like being able to go to a website and view source on it and see how it’s put together,” she notes. The syntax is familiar enough to anyone who writes HTML, which makes it an unusually approachable gateway into creative coding.

That same structural transparency is an accessibility advantage. SVG content can be exposed to assistive technology through aria-labelledby, as well as through native title and description elements placed inside the graphic. Animators also have a path to honor user preferences: while SMIL (Synchronized Multimedia Integration Language) is no longer widely used, CSS and JavaScript animations in SVG can both respond to the prefers-reduced-motion media query.

From Illustrator to Interactive

Authoring SVG does not require hand-writing path data — a skill Evans reserves for a rare few. Most of her work starts in a vector editor; she recommends Affinity Designer as a more affordable alternative to Adobe Illustrator, though she notes Illustrator’s markup output is generally cleaner. Whichever tool you choose, Evans says the export is usually usable, perhaps with some tweaking. Animation, however, happens after the file leaves the editor.

How the artwork is assembled inside the editor matters a great deal before you ever write an animation. SVG has an implicit drawing order, unlike HTML where stacking can be adjusted with z-index. Elements must be layered correctly in the source, and Evans advises grouping anything you want to move as a single unit, while ensuring anything you might animate independently is a separate shape. Once the SVG is on a page, you target those groups and shapes with classes and IDs, just as you would any other DOM element.

For optimizing exported files, Evans recommends the tool SVGOMG, which has a browser interface suited for large illustrative graphics — you can toggle optimizations and compare code against the visual result — plus terminal commands for batch processing icon sets.

Animate With CSS, but Ship With GreenSock

Evans sees CSS animation as ideal for experimentation, but production-ready SVG animation tends to run into a familiar wall: cross-browser transform inconsistencies. For HTML elements, transforms are calculated from the center; in SVG they originate from the top-left corner. The catch is that “in some browsers it’s the top left hand corner of the element itself, and in other browsers it’s the top left hand corner of the SVG view box parent,” Evans says, which can send rotations off in unpredictable directions.

That is precisely the problem GreenSock solves. Evans describes it as the only animation library that consistently normalizes SVG transforms across browsers, with active maintenance for SVG bugs rather than legacy support. GreenSock also supplies a robust set of easing equations, including a visualizer to preview them. Its newer ScrollTrigger plugin addresses another perennial pain point — tying animation to scroll position — by using a single scroll listener, which Evans says avoids the jank and overhead of coordinating two separate libraries like ScrollMagic and GreenSock.

The full browser event ecosystem is available to drive SVG animation: mouse events, scroll events, and resizing can all trigger activity inside the graphic. There are also SVG-specific methods to learn, which Evans categorizes under the umbrella of “SVG super powers.” These include clipping, masking, stroke animation, and filters.

Data Visualization Beyond the Bar Chart

SVG is a natural fit for data visualization, from lightweight charts to the D3 library, which uses SVG under the hood. But Evans points out that you don’t need a heavy library to make data-driven graphics: you can draw a chart in an editor and use JavaScript to swap out values in the markup.

Her own most memorable data project started with an attempt to learn D3. Clearleft’s office has solar panels, and the API exposed the amount of CO2 saved, measured in terms of its equivalent in trees. “All of my D3 aspirations went out of the window,” Evans laughs, recounting how she instead sat down in Illustrator and drew the office building surrounded by a jungle of plants and vines. As the API’s CO2 savings accumulated, the on-screen greenery could be grown to reflect the numbers. It is a creative approach impossible with traditional charting software — exactly the kind of novel communication that SVG makes feasible.

Animation as Enhancement, Not Spectacle

Evans’ enthusiasm comes with a clear philosophy about restraint. She describes distaste for “websites that are very, very whizbang” where everything moves while you try to read. Animation works best as an enhancement — a sensible, accessible site with small moments of delight. She cites designer Max Bock’s “Whimsical Web” project, which collects personal sites that embrace playfulness, and notes that reaction against overly corporate, efficiency-first web design is driving renewed interest in personality and polish.

Getting these flourishes accepted in a project timeline is easiest when they are bundled into component work rather than scheduled as separate “animation” tickets. Evans’ strategy is to integrate small motion opportunities into ordinary builds — a button that triggers a joyful SVG response, for example — and let the client response build the case for more.

For access to CSS shapes, sticky headers and full-height elements, safe triangles for context menus, and related topics, Evans points to hands-on learning. At the time of recording, she was offering a two-part masterclass covering the SVG animation workflow from editor export through structuring code to GreenSock-based animation, with a focus on the super powers and performance and accessibility considerations.