Neuron Powered Motorization

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

    2.0.6 • Public • Published


    Language: 中文


    • 2.0.6

      • Bug-fix: setImage on safari leads inifity loop.
      • Improve: BezierPath drawing performance.
      • Improve: Now can set image and text anytime. set image can be any size, it will be resize by SVGAPlayer.
    • 2.0.0

      • Add SVGA-Format 2.0.0 support.
      • Add npm support, use npm install svgaplayerweb --save.

    Can I Use

    SVGAPlayer 2.0.0 only supports below browsers.

    • Edge / IE 10+
    • 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

    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();
    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!, 
        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(); - start animation from zero frame.
    • pauseAnimation(); - pause animation on current frame.
    • stopAnimation(); - stop animation, clear contents while clearsAfterStop === true
    • setContentMode(mode: "ScaleToFill" | "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, font: 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>




    npm i qmtv-svgaplayerweb

    DownloadsWeekly Downloads





    Apache License 2.0

    Last publish


    • zyeros