Developers

Search

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:

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:

FAQ

  • What does the 'SVGs with large raster images inside are not supported' error mean in Framer?

    This error occurs when you upload an SVG image to Framer that contains embedded raster images (like JPG or PNG files) that are too large. When exporting SVGs from apps like Figma, any included photos or screenshots are inlined into the SVG at their full size, which can make the SVG file much larger. Framer supports SVGs with raster images inside, but only up to a certain size threshold. If the embedded images exceed this limit, you'll see this error.

  • How can I fix the error when uploading SVGs with large images to Framer?

    To fix this error, you can try the following options: Option A: Make the images smaller and re-upload them to Figma. Export the raster parts as JPG or PNG at 2× or 3× resolution, compress them using a tool like tinyjpg.com, re-upload the compressed images into your design, and then export the whole graphic as an SVG. Option B: Export SVG and JPG/PNG parts separately. Export the SVG graphic without the raster image, export the raster parts as JPG or PNG, and upload both files to Framer, positioning them as in the original design. Option C: Export the whole graphic as a PNG and upload that to Framer, though this may result in a less crisp image.

  • Should I manually resize or optimize images before uploading them to Framer?

    If you are following Option B or C (exporting raster parts or the whole graphic as PNG or JPG), you do not need to manually resize or optimize these images. Framer will take care of that for you. However, if you are compressing images as part of Option A, you should use an image compressing tool before re-uploading them to your design tool.

Updated

Related articles

Why am I not seeing results in my A/B test?

Why aren't the effects in my project functioning

Why can’t I set an element to position Fixed?

Why is my Framer canvas appearing blank

Why is my site not filling the screen on the Phone breakpoint?