Today, SVGs are widely used in web applications. Its ability to scale without losing quality is the main reason behind its success.

But did you know that we can use SVGs beyond the use of static images?

In this article, I will introduce 5 JavaScript libraries that we can use to animate SVGs.

1. BonsaiJS — Intuitive Graphics API

A lightweight graphics library with an intuitive graphics API and an SVG renderer.

BonsaiJS is an excellent option to create general-purpose graphics, from simple icons to complex charts. It gives you complete control over paths in SVGs and animation effects using keyframes.

Apart from that, BonsaiJS is well-maintained with great documentation and has some amazing features.

Features of BonsaiJS

• Supports both HTML5 graphic canvas and SVGs.
• Runner and renderer are architecturally separated.
• Provides keyframe and traditional animation.
• iFrame, Worker, and Node running contexts.
• Support all the major browsers, including Chrome, Safari, Firefox and Opera.

Installation and Usage

You can easily install BonsaiJS for your project using npm install bonsai command. Then you can use the BonsaiJS API to embed and animate your SVG image like below:

bonsai.run(document.body, {
  width: 600,
  height: 600,
  code: function() {
    var url = 'example.svg';
    new Bitmap(url).on('load', function() {
      this.attr('width', 200);
      this.addTo(stage);
      this.animate('3s', {
        x: 200
      });
    });
  }
});

You can try out a few examples from Bonsai online editor and refer to their documentation for more details.

2. VivusJS — Zero Dependencies

VivusJS is a lightweight JavaScript library that allows you to animate SVGs.

It provides a variety of animations to choose from and allows you to write your script to draw SVGs as you need. In addition, VivusJS has no dependencies and has some fantastic features to attract users.

Features of VivusJS

• Provides 3 main animation types as delayed, sync and one by one.
• Provides 5 timing options for path and animations.
• High performance.
• Allows creating your own SVGs.
• Can test before installing with Vivus instant.

Installation and Usage

VivusJS has more than 4500 weekly NPM downloads and 13.5K GitHub stars.

You can install VivusJS using NPM, Bower or CDNs.

// NPM
npm install vivus// Bower
bower install vivus// jsDelivr CDN
cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js

Then, you can use VivusJS to animate your inline or dynamic SVGs as follows:

// Inline<svg id="my-svg">
  <path...>
</svg>

<script>
  new Vivus('example.svg', {duration: 200}, myCallback);
</script>----------------------------------------------------------// Dynamic<div id="svg-div"></div>
<script>
  new Vivus('svg-div', { duration: 200, file: 'example.svg' }, callback);
</script>

3. SVG.js — Plugins Support

SVG.js is an open-source JavaScript library for manipulating and animating SVG.

It allows you to animate SVGs on 3 different aspects: size, position and color. SVG.js is simple and light-weighted compared to many other animation libraries and comes with some exciting features.

Features of SVG.js

• The syntax is simple to read and understand.
• 16KB when gzipped and 62KB when minified.
• Size, position, transformations, color, and other animations.
• There are several plugins available for additional customization.
• Clipping paths and opacity masks are fully supported.

Installation and Usage

SVG.js can be installed using NPM, Yarn or CDNs.

// NPMnpm install @svgdotjs/svg.js// Yarnyarn add @svgdotjs/svg.js// CDNshttps://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js

After installation, you can import the necessary properties and start drawing and animating SVGs.

import { SVG } from '@svgdotjs/svg.js'var draw = SVG().addTo('body').size(300, 300)var rect = draw.rect(100, 100).animate({
  duration: 2000,
  delay: 1000,
  when: 'now',
  swing: true,
  times: 5,
  wait: 200
}).attr({ fill: '#f06' })

4. Snap.svg — Supports Latest SVG Features

Snap.svg is a modern JavaScript library that brings your SVGs to life.

It is designed for modern browsers and supports all the latest SVG features like masking, clipping, patterns, and full gradients. Although Snap.svg is still at version 0.5, it has some amazing features to compete with others.

Features of Snap.svg

• Support latest SVG features — masking, clipping, patterns, full gradients and groups.
• It is not necessary to generate SVG content with Snap to work with it Snap.
• Can create SVG content in Illustrator, Inkscape, or Sketch, and then use Snap to animate or otherwise manipulate it.
• Modern browser support.
• 100% free and open-source.

Installation and Usage

SVG.js can be installed using NPM and Bower as follows:

// NPM
npm i snapsvg// Bower
bower install snap.svg

5. Lazy Line Painter — Path Animations

A modern JavaScript library for SVG path animations.

Lazy Line Painter is a bit different from the above libraries since it is specialized for path animations. In addition, it provides an online tool called Lazy Line Composer that allows you to create animated SVGs within seconds.

Installation and Usage

In addition to the Lazy Line Composer, Lazy Line Painter can be directly installed into your projects using NPM or CDN.

// NPM
npm i lazy-line-painter// CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/lazy-line-painter-1.9.4.min.js"></script>

After installation, you can import Lazy Line Painter and start animating SVGs.

import LazyLinePainter from 'lazy-line-painter'

let el = document.querySelector('#example-svg')
let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })
myAnimation.paint()

Conclusion

In this article, I discussed 5 different JavaScript SVG animation libraries. Each of them has some unique features and can be used based on your requirements.

I hope my suggestions will help you choose the best SVG animation options for your project. And don’t forget to share your thoughts after working with these libraries.

Thank you for Reading !!!

Build better Component Libs and Design Systems

Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.

Bit offers a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →