Everything About SVG Animation: What is it? How to create them?

Why use animations?

In an animation, there must be a story behind the movement. It is about instilling a soul (in Latin, anima). They can bring much life to a website and distinguish it from the competitors.

The" “web animator” "must focus on the user experience and determine intuitive interaction paths. Everything must be logical and perfectly fluid.

Implementing an animation must be treated like any other design decision. The pros and cons must be carefully weighed and care must be taken not to compromise the user experience, nor to end up with a lot of difficult code to maintain and evolve.

Let’s talk about SVG

What is SVG?

SVG is the acronym for Scalable Vector Graphics. It is a format that describes vector graphics based on XML and its tag structure.

Why use SVG?

• It is flexible Resizing an element is easy and instantaneous (Scalable)
• It is visually accurate, like any vector format (Vectorial)
• It’s graphic. (as the G implies!). On a more serious note, the files are relatively small, and their size depends on the complexity of the element, not on its display size, unlike other formats.

Beware that the files produced in some software, such as Illustrator, sometimes contain elements incompatible with an SVG export. There are therefore several things to keep in mind when you create an SVG for a website.

Similarly, there are possibilities for optimizing the file once it has been exported. They can be done manually or with the help of tools like SVGO, which is based on NodeJS.

How to insert an SVG?

• As image:
  “image.svg" alt="image">
• As CSS background image:
  .element { background-image: url(/images/image.svg);
• As HTML tag (inline SVG). This is probably the best way to insert it for later manipulation of your SVG.
• As iframe/object/embed
• In the Data URI of an image tag:
  “data:image/svg+xml;utf8 ">

And now we animate it!

To animate your beautiful SVG, you have not one, not two, not three but four ways to do it!

• CSS3 Animation
• SMIL Animation
• API Animation
• Using JavaScript

Animation via CSS

It is possible to animate SVGs like all (or almost) HTML elements through CSS.

Now, where do I put my CSS?

Here again, there are four possibilities, each of which impacts the interaction and animation capabilities later on.

• Style inline (style="…")
• Embedded Styles (tags "
  

  ") in the body of SVG

• Embedded styles outside SVG (tags "
  

  " in the "head" of the HTML file)

• External style sheets

And what kind of SVG animations can I do with CSS?

• CSS Transitions

• CSS Animations & Transforms

When you assign values to the transform-origin CSS property:

1. Percentage values: the value is passed relative to the element’s bounding box, including its border.

2. Absolute values:the origin is defined in relation to the SVG canvas.

Currently, there is a well-known bug in Firefox that makes using percentage values do not work as expected. In this case, use absolute values instead.*

• 3D Transforms
  There are quite a few known bugs:
  • Perspective does not currently work on Chrome*.
  • There is no hardware acceleration on 3D Transforms under Chrome (for the moment).*

*At the date of this article, December 2017

Current limits

1. Motion along the path (see CodePen)

2. Morphing Shapes (see CodePen)

3. Some SVG attributes cannot be set/styled/changed by CSS

SVG animations with SMIL

Synchronized Multimedia Integration Language is a tag language (like XML or HTML) that allows SVGs to be animated without CSS or JavaScript.

Because of the vector nature of SVGs, it is possible to animate them in a more complex way than with DOM manipulation using CSS.

Why use SMIL?

• Declarative animations (what is it?)
• Attributes inaccessible in CSS are animatable (path, morphing shapes…)
• Animations function when SVG is embedded as image or background image in the web page
• Event management and synchronization of animations are made possible

SMIL animations function on all browsers except Internet Explorer and Edge (what a surprise…) and OperaMini.

Since versions 45 of Chrome and 32 of Opera, SMIL is now deprecated and its use will cause warnings in the console. Therefore, SMIL support should be dropped in future versions.

API Animations

The Web Animations API (WAAPI) provides developers with a JavaScript interface to the browser’s animation engine.

It is, in fact, a bridge between CSS animations and dynamic JavaScript animations. Chrome and Firefox more or less support the API.

It also appears in Safari’s technology previews, while Edge has placed it in medium priority on its backlog.

Animating SVG with JavaScript

There are JavaScript libraries dedicated to animations that support the SVG format or are directly dedicated to it. Here are a few examples:

• SnapSVG is the reference among libraries dedicated purely to SVG
• Bonsai is a powerful JavaScript library that allows you to draw, modify and animate graphic elements on a page
• D3 is specialized in graphical representation of data with SVG
• Velocity allows incredibly fast animations
• GSAP is an animation library for HTML5. It allows you to animate anything that JavaScript can access (CSS properties, SVG, canvas library objects, generic objects…)
• Lazy Line Painter is a jQuery plugin for SVG animation
• SVG.jsis a lightweight JavaScript library to manipulate and animate SVG
• Vivus allows you to give a “freehand” look to your SVGs

There is a plethora of other libraries, each with its own specificity, strengths and weaknesses. As always, the choice of a library depends as much on its suitability for your needs as on its ease of use, the presence of resources and documentation and, above all, its guaranteed stability over time.

Check out our training programs if you want to learn more about web development.

WANT TO FIND OUT MORE?

If you need an expert to help you create SVG animations or any other support, don’t hesitate to send us a message.