TypeScript icon, indicating that this package has built-in type declarations

2.3.2 • Public • Published


Language: 中文

SVGAPlayer 现已支持在微信小程序播放动画,详情请参阅


Can I Use

SVGAPlayer 2.0.0 only supports below browsers.

  • Edge / IE 6+
  • Safari / Chrome
  • iOS 6.0+ / Android 4.0+

SVGAPlayer 2.0.0 also supports below Game Engines.


Prebuild JS

  1. Add <script src=""></script> to your.html


  1. npm install svgaplayerweb --save
  2. Add require('svgaplayerweb') to xxx.js

IE6 ~ IE9

  • IE6+ only supports 2.x format.
  • You couldn't use npm to install SVGA library.
  1. Add SVGAPlayerWeb.swf to your.html locate directory.
  2. Add following code to your.html
<!--[if lt IE 10]> 
    <script src="../build/"></script>
<!--[if gte IE 10]><!-->
    <script src="../build/svga.min.js"></script>

Audio support

If your need to play audios, add howler.min.js to your html.

<script src=""></script>

Notice: audio plays needs browser support, some browser requires user interaction before playing.

SVGA-Format 1.x support

Both Prebuild & NPM, if you need to support SVGA-Format 1.x, add JSZip script to html.

<script src="//,jszip-utils.min.js" charset="utf-8"></script>


Load Animation Mannally

You may create Player and Parser by yourself.

  1. Add Div Tag.
<div id="demoCanvas" style="styles..."></div>
  1. Load Animation
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
parser.load('rose_2.0.0.svga', function(videoItem) {

Load Animation Automatically

Assign canvas element properties as below.

<div src="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>

Animation will play after Web-Page onload.

Replace Animation Images Dynamically

You can replace specific image by yourself, ask your designer tell you the ImageKey.

player.setImage('', 'ImageKey');

Add Text on Animation Image Dynamically

You can add text on specific image, ask your designer tell you the ImageKey.

player.setText('Hello, World!', 'ImageKey');
    text: 'Hello, World!', 
    family: 'Arial',
    size: "24px", 
    color: "#ffe0a4",
    offset: {x: 0.0, y: 0.0}
}, 'ImageKey'); // customize text styles.



You use SVGA.Player controls animation play and stop.


  • int loops; - Animation loop count, defaults to 0 means infinity loop.
  • BOOL clearsAfterStop; - defaults to true, means player will clear all contents after stop.
  • string fillMode; - defaults to Forward,optional Forward / Backward,fillMode = Forward,Animation will pause on last frame while finished,fillMode = Backward , Animation will pause on first frame.


  • constructor (canvas); - first params could be '#id' or CanvasHTMLElement
  • startAnimation(reverse: boolean = false); - start animation from zero frame.
  • startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - start animation in [location, location+length] frame range.
  • pauseAnimation(); - pause animation on current frame.
  • stopAnimation(); - stop animation, clear contents while clearsAfterStop === true
  • setContentMode(mode: "Fill" | "AspectFill" | "AspectFit"); - Specific Scale Mode
  • setClipsToBounds(clipsToBounds: boolean); - Clips if image render out of box.
  • clear(); - force clear contents.
  • stepToFrame(frame: int, andPlay: Boolean); - stop to specific frame, play animation while andPlay === true
  • stepToPercentage(percentage: float, andPlay: Boolean); - stop to specific percentage, play animation while andPlay === true
  • setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - Replace Animation Images Dynamically, transform is optional, transform could adjust replacing image.
  • setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - Add Text on Animation Image Dynamically
  • clearDynamicObjects(); - clear all dynamic objects.

Callback Method

  • onFinished(callback: () => void): void; - call after animation stop.
  • onFrame(callback: (frame: number): void): void; - call after animation specific frame rendered.
  • onPercentage(callback: (percentage: number): void): void; - call after animation specific percentage rendered.


You use SVGA.Parser load VideoItem from remote or Base64 string.

Only Cross-Domain allow files could be loaded.

If you eager to load resources from Base64 or File, deliver as load(File) or load('data:svga/2.0;base64,xxxxxx').


  • constructor();
  • load(url: string, success: (videoItem: VideoEntity) => void, failure: (error: Error) => void): void;


Android 4.x Breaks

As known, some Android OS lack Blob support, add Blob Polyfill by yourself.

<script src="//"></script>




Package Sidebar


npm i svgaplayerweb

Weekly Downloads





Apache License 2.0

Unpacked Size

883 kB

Total Files


Last publish


  • ponycui
  • yyued