내보내기 & 인쇄

SVG 파일 Figma 가져오기 깨짐 현상

피그마 오픈카톡방2026. 3. 7.

질문사항

일러스트레이터에서 작업한 SVG 파일을 피그마로 가져올 때 깨지는 현상이 발생합니다. 일러스트레이터 대지 사이즈를 크게 해서 가져오면 나아지는데, 이것이 올바른 해결 방법인가요?

답변

일러스트레이터에서 작업한 SVG 파일을 피그마로 가져올 때 깨지는 현상은 여러 원인이 있을 수 있습니다. 대지 사이즈를 크게 하는 것이 일시적인 해결책이 될 수 있지만, 근본적인 해결책은 아닐 수 있습니다. 다음 사항들을 확인해 보세요:

복잡한 효과/필터: 일러스트레이터에서 적용한 복잡한 효과(그림자, 블러, 그라디언트 메쉬 등)나 필터는 SVG로 완벽하게 변환되지 않거나 피그마에서 다르게 렌더링될 수 있습니다. 가능한 한 단순한 벡터 형태로 작업하는 것이 좋습니다.

텍스트 아웃라인: 텍스트가 포함된 SVG라면, 일러스트레이터에서 텍스트를 아웃라인(Create Outlines) 처리하여 가져오는 것이 좋습니다.

클리핑 마스크/패스파인더: 복잡한 클리핑 마스크나 패스파인더 작업이 많을 경우, SVG 변환 시 문제가 발생할 수 있습니다.

SVG 저장 옵션: 일러스트레이터에서 SVG를 저장할 때, 'SVG 1.1', 'Presentation Attributes' 또는 'Styling: Internal CSS'와 같은 옵션을 선택하여 호환성을 높일 수 있습니다. 'Preserve Illustrator Editing Capabilities'는 체크 해제하는 것이 좋습니다.

그룹 해제: 너무 많은 그룹이 중첩되어 있을 경우, 일부 그룹을 해제하고 가져와 보세요.

플러그인 사용: 간혹 SVG 최적화 플러그인(예: SVG Optimizer)을 사용하여 파일을 정리한 후 가져오는 것이 도움이 될 수 있습니다.