This document addresses the challenges faced by Korean users learning Framer due to the lack of resources in Korean by translating content from the official blog and adding practical information. We hope this will be of some help to all Framer users.

Errors When Large Images Are Included in SVG

You may have seen the following error message when uploading an SVG file in Framer:
“SVGs with large raster images (~XXX KB) inside are not supported." This error occurs when large images (JPG or PNG) are included inside an SVG file exported from design tools like Figma.

Why Does This Error Occur?

When exporting SVG images from apps like Figma, it may include other images in JPG or PNG format. For instance, if a graphic exported from Figma includes photos or screenshots, you might encounter issues like this.

Note: The SaaS kit used can be downloaded here.

Using a CTA illustration as an example, if you export the card as SVG, both photos on the screen are included in the SVG.
Raster images like photos or screenshots cannot be converted to SVG format. Thus, they are included inline, retaining their full size. The problem is that during the inlining process, the image size increases by about 33%. For example, an original photo of 100KB will take up about 133KB within the SVG file.

Framer supports SVGs with raster images, but only up to a certain size. If the SVG you upload includes images exceeding this limit, you'll encounter this error.

Fixing the Error

There are three ways to address this error.

Method A: Reduce Image Size and Re-export

This method is the easiest of the three.

1. Export the problematic graphic as a JPG or PNG at 2x or 3x resolution.

2. Reduce the file size of the exported image using an image compression tool like tinyjpg.com.

3. Re-upload the compressed image to the same location.

4. Finally, export the entire graphic as SVG. The file size will be significantly reduced, and it's more likely to upload to Framer without issues.

Method B: Export SVG and Image (JPG/PNG) Separately

Most errors will be resolved with Method A, but if not, consider Method B. While slightly more involved, this ensures SVG images remain sharp on all screen sizes and can enhance site performance.

1. Export the SVG graphic with raster images removed.

2. Export the removed images separately as JPG or PNG.
   Note: You don't need to manually adjust or optimize image sizes; Framer will automatically resize them for you.

3. Upload the SVG graphic and PNG images to Framer and place them in the same positions as in the original file.

Method C: Export Entire Image as PNG

Choosing this option may result in less sharp images, and the final output might end up larger than with options A or B.

1. Export the entire graphic as a PNG.
   Note: You don't need to manually adjust or optimize image sizes; Framer will automatically resize them for you.

2. Upload the extracted PNG file to Framer.

Conclusion

With these three methods, you can easily resolve the “SVGs with large images inside are not supported” error. We hope you familiarize yourself with this guide so you can address this error smoothly in the future.

This article is an adapted translation of the Framer official blog post ‘Understanding and fixing the “SVGs with large images inside are not supported” error’.