내보내기 & 인쇄

SVG export 사이즈/드롭 섀도우 문제

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

질문사항

피그마에서 디자인한 아이콘/그래픽을 SVG로 export하여 퍼블리셔에게 전달했을 때, 사이즈가 맞지 않거나 drop shadow가 깨지는 현상이 발생합니다. 이런 경우 해결 방법이 있을까요? `copy to SVG`와 `export`의 차이점도 궁금합니다.

답변

피그마에서 SVG를 내보낼 때 디자인이 깨지거나 사이즈가 맞지 않는 문제는 여러 원인이 있을 수 있습니다.

Drop Shadow 문제:

SVG는 `filter` 속성을 사용하여 그림자를 구현합니다. 브라우저마다 SVG 필터 렌더링 방식에 미묘한 차이가 있을 수 있습니다.

해결책:

Figma에서 그림자 설정을 단순화해보세요. 너무 복잡한 블러나 스프레드 값은 문제가 될 수 있습니다.

퍼블리셔에게 SVG를 `<img>` 태그로 사용하는 대신, 인라인 SVG로 삽입하여 CSS로 그림자를 직접 적용하는 방법을 제안할 수 있습니다. (단, 이 경우 SVG 내부의 요소에 CSS를 적용해야 합니다.)

만약 그림자가 매우 중요하고 복잡하다면, 해당 요소를 PNG로 내보내는 것도 고려해볼 수 있습니다.

사이즈 불일치 문제:

Figma는 기본적으로 `viewBox` 속성을 포함한 SVG를 내보내어 반응형으로 사용할 수 있게 합니다. 하지만 퍼블리셔가 SVG를 `<img>` 태그로 삽입하고 CSS로 `width`나 `height`를 명시적으로 지정하지 않으면, 브라우저 기본값이나 부모 요소의 스타일에 따라 크기가 달라질 수 있습니다.

해결책:

Figma에서 SVG를 내보낼 때, `Export` 패널에서 `Include 'id' Attributes` 옵션을 끄고 내보내면 더 깔끔한 SVG 코드를 얻을 수 있습니다.

퍼블리셔에게 SVG를 사용할 때 `width`와 `height` 속성을 명시적으로 지정하거나, CSS로 적절한 크기를 부여하도록 요청하세요.

`Copy to SVG` vs `Export`:

`Copy to SVG`: 클립보드에 SVG 코드를 복사합니다. 이 코드는 종종 Figma 내부에서 사용되는 추가적인 속성이나 구조를 포함할 수 있어, 때로는 `Export`보다 더 복잡하거나 예상치 못한 렌더링 문제를 일으킬 수 있습니다. 개발자가 직접 HTML에 붙여넣을 때 사용됩니다.

`Export` (파일로 저장): `.svg` 파일로 저장합니다. 일반적으로 `Copy to SVG`보다 더 최적화되고 표준에 가까운 SVG 코드를 생성합니다. 개발자에게 파일 형태로 전달할 때 권장됩니다.

결론: 퍼블리셔에게는 `Export` 기능을 통해 `.svg` 파일로 전달하는 것을 권장하며, 위 해결책들을 함께 논의하여 적용해보는 것이 좋습니다.