Open the editor

Home/Help/Import and export/The player API

IMPORT AND EXPORT

The player API

An SVG exported with JavaScript has a player that your page's script can drive: play, pause, seek, change the speed, and listen for its events. The Embed tab of the Export window has the code.

Step by step

  1. Open Export

    Click Export in the top bar, then Animated SVG across the top of the window. The player comes with the JavaScript export (the default); a CSS-only file has none.

  2. Choose the player

    Under Format, Player is Embedded: each SVG carries its own copy and plays anywhere, even offline. External leaves it out (about 26 KB less per SVG): the SVG uses your page's copy of the player, or loads it from jsDelivr. Both have the same API.

  3. Open the API code

    Click Embed in your site above the preview, then Player API: how to get the player, and every method, event and property it has.

  4. Copy it

    Click Copy snippet. With External, the HTML code starts with an optional line for your own copy of the player, and Download the player beside Copy snippet gets that file.

  5. Get the player in your page

    In your page's script, the player is the SVG element's player: find the SVG by its id (the code has it), in the page or in an object tag's contentDocument. With the external player it is there once the player file has loaded: wait for the SVG's cinready event.

  6. Drive it

    Call play(), pause(), seek(50) (a percentage) or seekTo(1200) (milliseconds), set('speed', 2), and listen with on('end', …). Every method returns the player, so calls can be chained. To start it only from your script, set Starts to Programmatic.

Good to know. Scripts don't run in an SVG shown as an image (an img tag or a CSS background), so there is no player to reach there. With the external player, SVGs your script adds to the page later start with CinPlayer.boot(svg).