- Animated SVGs in Flexitive
- Best Practices for Creating Animated SVGs
- Upload Animated SVGs to Flexitive
Animated SVGs in Flexitive
Use animated SVGs to add single or looping animations to your Flexitive design, e.g. an animated logo.
See an example of an animated SVG below;
Once added to your canvas, the animated SVG will animate on the frame it’s visible on, not at the start of your first frame.
Single v Looped SVGs
- Looped Animated SVGs will continuously play/animated on your canvas while designing.
- Animated SVGs are set to play once and will show as soon as you drag it onto the canvas and begin designing.
Best Practices for Creating Animated SVGs
Before creating your animated SVGs, we recommend checking out our best practices below;
Remember that SVGs are not compressed when exported from Flexitive.
To keep your file size slow, we recommend using vector elements when creating your animated SVGs.
Vector element allows your animated SVG to be scalable to any size in Flexitive without increasing file size or losing quality.
Plan how your animated SVG will work with the animation sequence you build in Flexitive, as it will animate independently and according to how you export it.
Will your SVG be looping or will it just run once?
Upload Animated SVGs to Flexitive
To upload an animated SVG to Flexitive, open the Assets panel, and click on the Images tab.
Select 'Upload Images' and select the asset you'd like to upload to your Flexitive project.
If you would like, you can also upload files to your design by dragging and dropping them from your desktop folder onto the Assets panel or the canvas.