피그마(Figma)나 어도비 일러스트레이터(Adobe Illustrator)에서 완벽하게 디자인한 아이콘과 일러스트를 SVG로 내보냈을 때, 웹 브라우저나 이미지 변환기에서 특정 부분이 잘리거나, 글꼴이 기본 폰트로 대체되어 깨지거나, 크기 조절이 비정상적으로 작동하는 문제를 겪어보셨을 것입니다. 본 가이드에서는 디자이너가 가장 자주 마주치는 SVG 추출 오류 3대 원인과 완벽한 해결법을 다룹니다.
1. viewBox 속성 누락으로 인한 이미지 잘림 문제
SVG의 viewBox 속성은 벡터 그래픽의 가상 캔버스 좌표계와 가로/세로 비율을 정의합니다. 피그마나 일러스트레이터에서 내보낼 때 viewBox가 생략되고 고정된 width와 height 픽셀 값만 들어가면, 웹 브라우저나 래스터 변환 도구에서 크기를 변경할 때 그래픽의 일부가 잘려 나가는 현상이 발생합니다.
피그마 해결법: 우측 하단 Export 패널에서 SVG 포맷 옆 ···(점 세 개) 옵션을 클릭한 후 'Include "id" Attribute'와 'Outline Text' 옵션을 활성화하여 내보냅니다.
2. 폰트(Text) 렌더링 깨짐과 윤곽선(Outline) 변환
SVG 파일 내부에 <text> 태그가 그대로 포함되어 있으면, 해당 SVG를 열어보는 사용자나 렌더러 환경에 동일한 폰트가 설치되어 있지 않을 경우 시스템 기본 폰트(Arial, 굴림 등)로 강제 치환되어 디자인 레이아웃이 완전히 무너집니다.
- Figma: 텍스트 레이어를 선택한 후
Ctrl + Shift + O(Mac:Cmd + Shift + O)를 눌러 Outline Stroke (벡터 패스 변환)를 수행합니다. - Illustrator: 텍스트 선택 후
Type > Create Outlines(단축키:Ctrl + Shift + O)를 실행하여 모든 글자를 순수한 벡터 패스로 변환합니다.
3. 클리핑 마스크(Clipping Mask) 및 그림자 효과 왜곡
복잡한 마스크나 드롭 섀도(Drop Shadow), 블러(Blur) 효과가 적용된 레이어는 SVG 표준 필터(<feGaussianBlur> 등)로 변환되는 과정에서 렌더러 간의 해석 차이로 인해 테두리에 이상한 검은 선이 생기거나 마스크 밖으로 요소가 삐져나올 수 있습니다.
권장 해결책: 마스킹된 레이어는 일러스트레이터의 Pathfinder > Crop 또는 피그마의 Flatten (Ctrl + E)을 사용하여 단일 벡터 레이어로 병합(Bake)한 뒤 SVG로 추출하는 것이 가장 안전합니다.