Open the editor

Home/Help/Import and export/Images and photos in exports

IMPORT AND EXPORT

Images and photos in exports

Pictures on the canvas are written into the exported SVG, so the file needs nothing else. Each one is resized to the largest size it is shown at and compressed, which can make a photo many times smaller.

Do it in the editor: guided tour4 steps · about 2 minutes · opens a practice scene

Step by step

  1. Open Export

    Click Export in the top bar, then Animated SVG. With pictures on the canvas, the options have an Images section.

  2. See what happens to each picture

    Under Images, Resize and compress for this size is ticked. Click the line under it that adds the pictures up: each one's size and format as it is in Assets, and as it goes into the file, sized for 2× the width it is shown at.

  3. Pick a format

    Format is Smallest file (automatic): it tries what this browser can make (AVIF, WebP, and JPEG, or PNG for a picture with transparency) and keeps the smallest. Choose one yourself, like WebP; Quality (82%) sets how much it is compressed.

  4. Size it for your site

    Under Size, Largest width is the widest the animation will be shown on your site (the canvas's width at first). Type 960: the pictures are made sharp enough for it. Untick Sharp on high-density screens (2×) for pictures half as wide, or Resize and compress to keep the files as they are.

Good to know. Pictures are embedded as data inside the SVG, so it can be moved and hosted on its own; animated GIFs are kept as they are. The same settings apply to a CSS-only export.