Understanding and fixing the “SVGs with large images inside are not supported” error

The article addresses the error ”SVGs with large images inside are not supported” that arises when importing SVG images from applications like Figma. These images might include JPG or PNG format images which are inlined into SVG files, consuming more storage and potentially exceeding the size limit that Framer supports.

Sometimes, when uploading an SVG image in Framer, you may see an error like this one:

SVGs with large raster images (~XXX KB) inside are not supported.

What this means

When you export an SVG image from another app (like Figma), that image may sometimes include other images in the JPG or PNG format. This happens e.g. if the graphic you’re exporting from Figma has photos or screenshots in it:

Exporting this card as an SVG (e.g. as an illustration for a CTA) will include both of these photos inside the SVG. Get the SaaS kit here.

Raster images like photos or screenshots can’t be natively converted into the SVG format. So instead, they are inlined into the SVG file as-is, at their full size. What’s worse, the inlining process actually makes the images ~33% larger – so a 100 KB photo will end up taking ~133 KB inside the SVG file.

Framer supports SVGs with raster images inside, but only up to a certain threshold in size. If you upload an SVG that has images larger than this threshold, you’ll get this error.

How to solve this

Option A: make the images smaller and re-upload them to Figma

This option is the easiest one.

  1. Export the raster parts of the graphic as JPG or PNG, at 2× or 3× resolution:

  1. Compress the exported images using an image compressing tool like tinyjpg.com.

  2. Re-upload the compressed images into the same place:

  1. Now, export the whole graphic as an SVG. It should be much smaller and will likely upload to Framer without issues.

If this option doesn’t work, consider options B and C.

Option B: export SVG and JPG/PNG parts separately

This option is a second-best alternative that allows to keep your SVG images crisp on all screen sizes, and your site performant. However, it needs a bit more work.

  1. Export the SVG graphic without the raster image – e.g., by removing the images first:

  1. Export the raster parts of the graphic as JPG or PNG:

Do not manually resize or optimize these images. Framer will take care of that.

  1. Upload both the SVG graphic and the PNG image into Framer, positioning them like they were positioned in the original file:

Option C: export the whole graphic as PNG

This option means the resulting image won’t be as crisp and might end up larger than the one in Option B or Option C.

  1. Export the whole graphic in the PNG format:

Do not manually resize or optimize this image. Framer will take care of that.

  1. Upload the resulting PNG image into Framer: