# SVG 새니타이저: Figma와 Illustrator 코드 정리하기
Figma, Adobe Illustrator 또는 브라우저 인스펙터에서 내보낸 SVG를 붙여넣으면, 바로 배포할 수 있는 깔끔하고 최적화된 벡터 파일을 얻을 수 있습니다.# 내보낸 SVG는 왜 지저분할까요?
Figma에서 SVG를 내보내면 앱 내부에서만 의미 있는 속성들이 가득 담긴 파일이 생성됩니다.data-name, xml:space, 내부 레이어 참조, 디자인 메타데이터 등이 그 예입니다. 결과적으로 실제 필요한 용량보다 40~70%까지 더 큰 SVG가 만들어집니다.# 새니타이저가 제거하는 것들
- 편집기 메타데이터: Figma와 Illustrator가 자동으로 추가하는
metadata,title,desc태그. - Inkscape 네임스페이스:
inkscape:및sodipodi:접두사를 가진 모든 요소. - 불필요한 속성:
xml:space,version, 불필요한xmlns:*, Figma의data-*속성. - 빈 그룹: 삭제된 레이어의 잔재로 남은 콘텐츠 없는
<g>요소. - XML 선언: HTML에 SVG를 삽입할 때 필요 없는
<?xml version="1.0"?>선언과 DOCTYPE.