💫 SVGIF
Animate SVG layers like gifs!
Installation
npm i svgif
Usage
svgif treats all direct children of <svg> as the frames for the animation and will show one after the other.
<svg id="my-svg">
<rect width="100" height="100" fill="red" />
<rect width="100" height="100" fill="green" />
<rect width="100" height="100" fill="blue" />
</svg>import svgif from 'svgif'
import 'svgif/dist/index.css'
svgif(document.querySelector('#my-svg'))API
svgif(svg: SVGElement, {
frameDuration = 500, // Duration for each frame. Can be overwritten for individual frames (see: #Tweak SVG).
loop = true // Wether or not to loop the animation.
clone = false // If enabled, the input svg will not be mutated and a copy is returned instead.
}): SVGElementTweak SVG
You can tweak the animation directly within the SVG. All options that are specified via an data- attribute can also be set via the element's id. This makes it easy to fine tune the animation inside a graphic software where you usually can only change the name (id) of a layer.
<!-- These two are the same: -->
<rect data-duration="2000" />
<rect id="duration-2000" />
<!-- It even works if your graphic software adds a suffix to the id during export. -->
<rect id="duration-2000_2" />Frame Duration
<!-- ... other frames ... -->
<rect width="100" height="100" fill="blue" data-duration="2000" />Ignore Frame
<!-- ... other frames ... -->
<rect width="100" height="100" fill="blue" data-ignore />