Expressive Animator has stellar support for animating SVG, allowing you to export SVG animations as standalone embeddable files. Depending on the technology used for animation, you can export SVG animations in three different formats: SMIL, CSS, or JavaScript.
Common settings
These settings are common to all three SVG animation formats:
Image format
Tell how to embed images. The available options are:
- Original - Keep the original images
- PNG - Re-encode images as PNG
- WEBP - Re-encode images as WEBP
Viewport settings
You can use these settings to specify how SVG animations will align and scale when embedded in a container.
Viewport settings
The following settings are available:
- Scale mode - Tell how the image will be scaled relative to the container's size. The options are:
- Clip & Contain - Clip the image and scale it so that all elements are visible.
- Contain - Scale the image up or down so that all elements are visible.
- Cover - Scale the image so that it covers the entire size of the container. Proportions are maintained and parts of the image could get clipped.
- Fill - Scale the image so that it covers the entire size of the container. Proportions are not maintained and image could get distorted.
- Size mode
- Responsive - Make the size of the image to adjust automatically to the container's size.
- Fixed - Export an image with a fixed size.
- Align horizontally - Tell how to align the image on the horizontal axis.
- Left - Align to the left.
- Center - Align to center.
- Right - Align to the right.
- Align vertically - Tell how to align the image on the vertical axis.
- Top - Align to the top.
- Middle - Align to middle.
- Bottom - Align to the bottom.