This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Bitsrc. IO /top-5-javas…

SVG is now widely used in Web development, and its ability to scale without distortion (vector graphics) is its biggest advantage!

However, you know that SVG can be used for more than just static imagesSVG animation?

This article introduces five JavaScript libraries for implementing SVG animations!

Like + favorites === = learn, in one go! 👍 👍 👍

1. BonsaiJS

Has intuitive graphics API, is a lightweight graphics library based on SVG rendering;

BonsaiJS is an excellent choice for creating general-purpose graphics, from simple ICONS to complex charts. It uses keyframes to fully control paths and animations in SVG;

In addition, BonsaiJS has good documentation maintenance and some other amazing features.

features

  • HTML5 Canvas and SVG support;
  • Run and render are structurally separate;
  • Support for keyframes and traditional animation;
  • Run context in Node environment;
  • For all major browsers;

Installation and use

NPM install

npm install bonsai
Copy the code

Then, you can use the BonsaiJS API to embed the SVG image and animate it as follows:

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 }); }); }});Copy the code

Here is an example available for online editing, along with documentation and more details in documentation.

2. VivusJS

VivusJS is a lightweight JavaScript library for setting up SVG animations.

It offers a variety of animation options, and you can write scripts to draw SVG as needed. In addition, VivusJS has no dependencies and several other attractive features.

features

  • There are three main animation types available: delayed, Sync, and One by One;
  • 5 timing options for path and animation;
  • High performance;
  • Allow customization of SVG.
  • Vivus Instant can be tested before installation;

Installation and use

VivusJS is downloaded more than 4,500 times per week on NPM and GitHub Stars is downloaded 1.35 million times per week.

You can install using NPM, Bower, or CDN;

// NPM
npm install vivus

// Bower
bower install vivus

// jsDelivr CDN
cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js
Copy the code

Usage:

// 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>Copy the code

3. SVG.js

SVG. Js is a JS library that manipulates SVG and sets SVG animations.

It allows you to set SVG animations from three different aspects: size, position, and color. Compared to other animation libraries, svG.js is simple and lightweight, and has some exciting features.

features

  • 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 use

You can install svG.js on NPM, Yarn, or CDN.

// NPM
npm install @svgdotjs/svg.js

// Yarn
yarn add @svgdotjs/svg.js

// CDNs
https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js
Copy the code

After installation, start drawing SVG and setting up SVG animation according to the API:

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' })
Copy the code

4. Snap.svg

Snap.svg is a JS library that gives SVG a fresh look.

It supports all the latest SVG features, such as masks, clipping, mode Settings, and full gradients;

features

  • Support for the latest SVG features;
  • You can create SVG content in Illustrator, Inkscape, or Sketch, and then use Snap to set up animations;
  • Good browser support;
  • 100 percent open source and free;

Installation and use

// NPM
npm i snapsvg

// Bower
bower install snap.svg
Copy the code

5. Lazy Line Painter

Create SVG path animation;

Lazy Line Painter is a slightly different library in that it is dedicated to path animation. In addition, it provides an online tool called Lazy Line Composer that allows you to create SVG animations in seconds.

Installation and use

// 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 >Copy the code

Use:

import LazyLinePainter from 'lazy-line-painter'

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

OK, those are the five different JavaScript SVG animation libraries recommended for this article.

Our slogan is: for good resource collection never soft!!

I am Anthony Nuggets, the public account of the same name, every day a pawn, dig a gold, goodbye ~