Integrate the player into iOS / Android / Web / Flutter / HarmonyOS
The installation steps and sample code below come from the official README in each project. Check the repository for complete options, current versions, and changes.
iOS
Native CoreAnimation renderer that loads SVGA files from the app bundle or a remote server.
Install
Add the dependency to your Podfile, then run pod install.
target 'MyApp' do
pod 'SVGAPlayer', '~> 2.3'
endUsage
Create SVGAPlayer and SVGAParser, assign the parsed videoItem, and start the animation.
SVGAPlayer *player = [[SVGAPlayer alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
[self.view addSubview:player];
SVGAParser *parser = [[SVGAParser alloc] init];
[parser parseWithNamed:@"posche" inBundle:nil completionBlock:^(SVGAVideoEntity *videoItem) {
if (videoItem != nil) {
player.videoItem = videoItem;
[player startAnimation];
}
} failureBlock:nil];Notes
- Use parseWithURL:completionBlock:failureBlock: to load animations from a remote server.
- Dynamic images, text, hidden elements, and custom drawing are documented in the repository wiki.
Android
Native Android Canvas renderer that loads animations from assets or a remote server.
Install
Add the JitPack repository to the root build.gradle, then add the dependency to app/build.gradle.
// root build.gradle
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
// app/build.gradle
implementation 'com.github.svga:SVGAPlayer-Android:2.6.1'Usage
Add SVGAImageView to your layout, point it at an animation, and enable autoplay.
<com.opensource.svgaplayer.SVGAImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:source="posche.svga"
app:autoPlay="true" />Notes
- Call SVGAParser.shareParser().init(context) before using the shared parser.
- Keep com.squareup.wire.** and com.opensource.svgaplayer.proto.** when minifying.
- The README shows the legacy compile configuration; new projects should use implementation.
Web
Full-featured web player with SVGA 1.x support (via JSZip), audio playback, and IE compatibility mode.
Install
Install from npm or load the CDN build directly.
npm install svgaplayerweb --save
<!-- or load directly -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js"></script>Usage
Create a container, instantiate Player and Parser, then load and play the animation.
<div id="demoCanvas"></div>
<script>
const player = new SVGA.Player('#demoCanvas');
const parser = new SVGA.Parser('#demoCanvas');
parser.load('rose.svga', (videoItem) => {
player.setVideoItem(videoItem);
player.startAnimation();
});
</script>Notes
- SVGA 1.x support requires JSZip; audio playback requires howler.js.
- Use Web Lite when bundle size matters.
Web Lite
Lightweight player for mobile web, under 60 KB (under 18 KB gzipped), with WebWorker parsing.
Install
Install from npm or use the unpkg CDN build.
npm i svga
<!-- or load directly -->
<script src="https://unpkg.com/svga/dist/index.min.js"></script>Usage
Create a Parser, load the animation, mount it to a canvas, and start playback.
import { Parser, Player } from 'svga'
const parser = new Parser()
const svga = await parser.load('xx.svga')
const player = new Player(document.getElementById('canvas'))
await player.mount(svga)
player.start()Notes
- Does not support the SVGA 1.x format or audio playback.
- Supports Android 4.4+ and iOS 9+.
Flutter
Flutter implementation built on CustomPainter that loads animations from local assets or a remote server.
Install
Add the dependency to pubspec.yaml.
dependencies:
svgaplayer_flutter: ^2.0.0Usage
Use SVGASimpleImage for the simplest integration, or SVGAAnimationController for full playback control.
SVGASimpleImage(
resUrl: 'https://github.com/svga/SVGA-Samples/blob/master/angel.svga?raw=true',
)Notes
- Supports the SVGA 2.0 format only.
- Handle resource caching with a library such as dio and decode cached bytes with SVGAParser.
HarmonyOS
SVGA player for HarmonyOS NEXT with declarative UI 1.0 and 2.0 components.
Install
Install with OHPM.
ohpm install @tb-open/svgaUsage
Initialize SVGA, create a controller, and render the animation with SvgaPlayerV2.
import { Svga, SvgaController, SvgaPlayerV2 } from '@tb-open/svga'
// AbilityStage.onCreate
Svga.init(this.context)
private controller: SvgaController = new SvgaController({
loops: 3,
fillMode: 'forwards',
autoRelease: true,
clearsAfterStop: true
})
SvgaPlayerV2({
url: $r('app.media.example_animation'),
controller: this.controller
})
.width(300)
.height(150)Notes
- Loads app resources, remote URLs, and sandbox file paths.
- The controller supports playback control, image and text replacement, progress updates, and click events.