본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

SVG에 큰 이미지가 포함 되었을 때의 오류

Framer에서 SVG 파일을 업로드했을 때 아래와 같은 오류 메시지를 보신적이 있을 겁니다.
“SVGs with large raster images (~XXX KB) inside are not supported." 해당 오류는 Figma 같은 디자인 툴에서 내보낸 SVG 파일 안에 큰 이미지(JPG 또는 PNG)가 포함되어 있을 때 발생하는 오류입니다.

왜 이러한 오류가 생기나요?

Figma와 같은 다른 앱에서 SVG 이미지를 내보낼 때, 해당 이미지에 JPG 또는 PNG 형식의 다른 이미지가 포함될 수 있는데요. 예를 들어 Figma에서 내보내는 그래픽에 사진이나 스크린샷이 포함된 경우 다음과 같은 문제가 발생할 수 있습니다.

Note: 사용된 SaaS 키트는 여기에서 다운 받으실 수 있습니다.

CTA 일러스트레이션을 예시로, 해당 카드를 SVG로 내보내면 화면 속 두 사진이 모두 SVG에 포함됩니다.
사진이나 스크린샷과 같은 래스터 이미지는 SVG 형식으로 변환할 수 없는데요. 따라서 SVG 파일 내부에 있는 그대로, 전체 크기로 인라인 처리됩니다. 문제는, 인라인 처리 과정에서 이미지 크기가 약 33% 커진다는 것입니다. 예를 들어 100KB 크기의 원본사진은 SVG 파일 내에서 약 133KB를 차지하게 되는 것입니다.

Framer는 래스터 이미지가 포함된 SVG를 지원하지만, 일정 크기까지만 지원합니다. 이 한도보다 큰 이미지가 포함된 SVG를 업로드하면 해당 오류가 발생하는 것입니다.

오류 해결하기

해당 오류를 해결하는 방법은 세 가지가 있습니다.

방법 A: 이미지 크기를 줄인 후 다시 내보내기

해당 방법이 세가지 중 가장 쉬운 방법입니다.

1. 문제가 되는 그래픽을 2배 또는 3배 해상도의 JPG 또는 PNG로 내보내주세요.

2. tinyjpg.com과 같은 이미지 압축 도구로 내보낸 이미지의 용량을 줄여주세요.

3. 압축된 이미지를 동일한 위치에 다시 업로드하세요.

4. 마지막으로, 전체 그래픽을 SVG 형식으로 내보내세요. 파일 크기가 훨씬 줄어들고 Framer에 문제없이 업로드될 가능성이 높습니다.

방법 B: SVG와 이미지(JPG/PNG) 파일을 별도로 내보내기

방법 A로 대부분의 오류가 해결 될테지만, 효과를 보지 못하셨다면 방법 B를 고려해 보세요. 해당 방법은 조금 더 손이 가지만, 모든 화면 크기에서 SVG 이미지를 선명하게 유지하고 사이트 성능을 향상시킬 수 있습니다.

1. 래스터 이미지를 제거한 상태로 SVG 그래픽을 내보냅니다.

2. 제거한 부분의 이미지를 별도로 JPG 또는 PNG로 내보냅니다.
   Note: 이미지 크기를 수동으로 조정하거나 최적화하지 않아도 Framer가 자동으로 크기를 조정해드려요.

3. SVG 그래픽과 PNG 이미지를 Framer에 업로드하고 원본 파일에 배치한 위치에 배치해주세요.

방법 C: 전체 이미지를 PNG로 내보내기

이 옵션을 선택하면 결과 이미지가 선명하지 않고, 결과물의 크기가 옵션 A나 옵션 B보다 더 커질 수도 있습니다.

1. 전체 그래픽을 PNG 형식으로 내보내주세요.
   Note: 이미지 크기를 수동으로 조정하거나 최적화하지 않아도 Framer가 자동으로 크기를 조정해드려요.

2. 추출된 PNG 파일을 Framer에 업로드해주세요.

마무리

이러한 세가지 방법을 통해 “SVGs with large images inside are not supported” 오류를 손쉽게 해결할 수 있습니다. 본 가이드를 잘 숙지하셔서 앞으로 해당 오류가 떴을 시, 유연하게 잘 해결하실 수 있길 바랍니다.

본 글은 Framer 공식 블로그의 ‘Understanding and fixing the “SVGs with large images inside are not supported” error’를 번역·각색한 콘텐츠입니다.