Open the app

SVG Flipbook

Make flipbook-style layer animations with any SVG editor.

SVG Flipbook is an open source web app which runs next to your graphics program and shows you an animated version of your SVG layers. Each layer in your SVG becomes one frame. You can use whatever SVG editor you like. Adobe Illustrator and Inkscape work great. You can also export your SVG animation to use on the web when you're done working on it.

The web app lets you do frame-by-frame SVG animation in Adobe Illustrator and Inkscape. There is an open source version you can host yourself, or you can use our fully hosted SVG Flipbook(pro) version.

SVG Flipbook walk cycle screencast

How to use the app

While you are editing the SVG, open the same file in the SVG Flipbook app. When you hit save in your SVG editor it will "live reload" in the app and you will see your changes playing.

Customise frames

You can customize frame timing and behaviour by editing your layer names:

SVG Flipbook frame options

Export to animated SVG

You can export your finished creation to an animated SVG. This will save a copy of your SVG with the animation script bundled. When you open the SVG in a web browser or add it to an <object> tag you will see the animtion playing.

SVG Flipbook live editing screencast

How to embed the SVG in HTML

You can use the following code to embed your animated SVG in an HTML file:

<object data="FILENAME.svg" type="image/svg+xml">
  <img src="FILENAME.svg" />
</object>

Open source

Did we mention the app is open source? Check out our source code on GitHub! It will be open source for ever more.

This web app is designed to work with desktop applications like Inkscape and Illustrator. Send it to your desktop machine to try it out.

Open the app anyway