Make flipbook-style layer animations with any SVG editor.
SVG Flipbook is a web app which runs next to your SVG editor and lets you animate your creation. Each layer in your SVG becomes one frame. You can use whatever SVG editor you like. Inkscape works great.
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.
You can customize frame timing and behaviour by editing your layer names:
- Set the frame duration by entering the number of milliseconds in brackets on the layer name, like
(100)for a pause of 100ms, or 1/10th of a second.
- Set a layer as a static background which will alwasy be visible, by adding the word
(static)to the layer name.
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.
Did we mention the app is open source? It always will be.