svga-web

A SVGA player for modern Web.

中文

Notice

This lib is not an official one by svga.io. It is maintained by myself currently, original source came from the official svga.lite. Contributions and discussions are welcome.

• [x] TypeScript Support.
• [x] Audio support with native audio element.

Usage

NPM

$ pnpm add svga-web
# yarn add svga-web
# npm i svga-web

CDN

<script src="https://cdn.jsdelivr.net/npm/svga-web/svga-web.min.js"></script>

Example/Doc

Player options

option name	type	default	detail
loop	number	1	how many times to repeat, 0 means loop forever
fillMode	forwards backwards	forwards	just like css animation-fill-mode
playMode	forwards fallbacks	forwards
startFrame	number	0
endFrame	number	0	0 means the last frame
cacheFrames	boolean	false	Cache rendered frames, performance friendly if played repeatedly
noExecutionDelay	boolean	false	Use timer inside WebWorker to ensure no execution delay, because sometimes the browser may delay/stop some tasks ）
intersectionObserverRender	boolean	false	Skip actual frame rendering if not visible, Intersection Observer API

Simple Use

<canvas id="canvas"></canvas>

import { Downloader, Parser, Player } from 'svga-web'

const downloader = new Downloader()
const parser = new Parser()
const player = new Player('#canvas') // #canvas is HTMLCanvasElement

;(async () => {
  const fileData = await downloader.get('./xxx.svga')
  const svgaData = await parser.do(fileData)

  player.set({
    loop: 1,
    fillMode: 'forwards',
  })

  await player.mount(svgaData)

  player
    .$on('start', () => console.log('event start'))
    .$on('pause', () => console.log('event pause'))
    .$on('stop', () => console.log('event stop'))
    .$on('end', () => console.log('event end'))
    .$on('clear', () => console.log('event clear'))
    .$on('process', () => console.log('event process', player.progress))

  player.start()
  // player.pause()
  // player.stop()
  // player.clear()
})()

Replace Element

You can change the elements of the svga data corresponding to the key values.

import { Downloader, Parser, Player } from 'svga-web'

const downloader = new Downloader()
const parser = new Parser()
const player = new Player('#canvas')

;(async () => {
  const fileData = await downloader.get('./xxx.svga')
  const svgaData = await parser.do(fileData)

  const image = new Image()
  image.src = 'https://xxx.com/xxx.png'
  svgaData.images['key'] = image

  await player.mount(svgaData)

  player.start()
})()

Dynamic Element

You can insert some dynamic elements with svga data.

const text = 'hello gg'
const fontCanvas = document.getElementById('font')
const fontContext = fontCanvas.getContext('2d')
fontCanvas.height = 30
fontContext.font = '30px Arial'
fontContext.textAlign = 'center'
fontContext.textBaseline = 'middle'
fontContext.fillStyle = '#000'
fontContext.fillText(
  text,
  fontCanvas.clientWidth / 2,
  fontCanvas.clientHeight / 2
)

const { Downloader, Parser, Player } = SVGA

const downloader = new Downloader()
const parser = new Parser()
const player = new Player('#canvas')

const svgaFile = './svga/kingset.svga'

const fileData = await downloader.get(svgaFile)
const svgaData = await parser.do(fileData)

svgaData.dynamicElements['banner'] = fontCanvas

await player.mount(svgaData)

player.start()

Set fit strategy of the dynamic element, check out example.

const video = document.getElementById('video')
const { Downloader, Parser, Player } = SVGA

const downloader = new Downloader()
const parser = new Parser()
const player = new Player('#canvas')

const svgaFile = './svga/kingset.svga'

const fileData = await downloader.get(svgaFile)
const svgaData = await parser.do(fileData)

// fit: "fill", "cover", "contain", "none"
svgaData.dynamicElements['99'] = { source: video, fit: 'fill' }

await player.mount(svgaData)

player.start()

Reusable instantiated Downloader & Parser

import { Downloader, Parser, Player } from 'svga-web'

const downloader = new Downloader()
const parser = new Parser()

const player1 = new Player('#canvas1')
const player2 = new Player('#canvas2')

const fileData1 = await downloader.get('./1.svga')
const fileData2 = await downloader.get('./2.svga')

const svgaData1 = await parser.do(fileData1)
const svgaData2 = await parser.do(fileData2)

await player1.mount(svgaData1)
await player2.mount(svgaData2)

player1.start()
player2.start()

Destroy Instance

const downloader = new Downloader()
downloader.destroy()

const parser = new Parser()
parser.destroy()

const player = new Player('#canvas')
player.destroy()

DB

The downloaded and parsed data is persisted and cached using IndexedDB, and the next time you can avoid reusing resources for unified SVGA download and parsing

import { Downloader, Parser, Player, DB } from 'svga-web'

const svgaFile = 'test.svga'
let data = void 0
let db = void 0

try {
  db = new DB()
} catch (error) {
  console.error(error)
}

if (db) {
  data = await db.find(svgaFile)
}

if (!data) {
  const downloader = new Downloader()
  const fileData = await downloader.get(svgaFile)
  const parser = new Parser()

  data = await parser.do(fileData)

  // insert data to db
  db && (await db.insert(svgaFile, data))
}

const player = new Player('#canvas')
await player.mount(data)

player.start()

Downloader Cancel

You can cancel the SVGA file request in the download

downloader
  .get('test.svga')
  .then((fileData) => {
    console.log('download complete')
  })
  .catch((error) => {
    console.log('catch', error)
  })

setTimeout(() => {
  downloader.cancel() // or downloader.destroy()
}, 1000)

Development

# Installation dependencies
# nvm use
$ pnpm install --frozen-lockfile

# Development
$ pnpm start

# Build
$ pnpm build

LICENSE

MIT

---

Supported by JetBrains open source program.