SVG 최적화 프로그램

이 유틸리티에 대하여

SVG(Scalable Vector Graphics) 파일은 XML 마크업으로 도형, 경로, 텍스트를 설명합니다. 디자인 도구, CMS 내보내기, 수동 코딩 아이콘은 브라우저가 같은 그림을 렌더링하는 데 필요한 것보다 훨씬 많은 데이터를 포함하는 경우가 많습니다. SVG 최적화는 일반 표시 크기에서 시각적 출력을 동일하게 유지하면서 주석, 편집기 메타데이터, 중복 그룹, 불필요한 좌표 정밀도, 사용하지 않는 속성 등 과도한 마크업을 제거하는 과정입니다. PNG나 JPEG 같은 raster 형식과 달리 SVG는 압축 후에도 편집 가능하고 해상도에 독립적입니다. 잘 최적화된 아이콘은 보이는 픽셀 하나 잃지 않고 40 KB에서 6 KB로 줄일 수 있습니다. 매 페이지 로드마다 불러오는 로고, UI 아이콘, 일러스트, favicon에 최적화는 필수입니다. 더 작은 파일은 더 빠른 페이지 로드, 모바일 대역폭 절감, 더 나은 Core Web Vitals 점수를 의미합니다. 검색 엔진은 빠른 페이지를 선호하고, 사용자는 아이콘이 늦게 나타나거나 렌더링을 막을 때 이를 느낍니다. 최적화된 SVG는 부풀어 오른 마크업이 파서를 깨거나 번들을 키울 수 있는 HTML, React 컴포넌트, 이메일 템플릿에 더 깔끔하게 임베드됩니다. 프로덕션 웹사이트는 CSS 배경, 인라인 <svg> 태그, img 요소에서 SVG 아이콘을 참조합니다. 이러한 파일의 각 kilobyte는 특히 fold 위에 여러 아이콘이 있을 때 critical rendering path에 기여합니다. 공백 제거, transform 축소, doctype 선언 제거는 CSS나 JavaScript를 건드리지 않고 전송 크기를 줄입니다. link rel="icon" type="image/svg+xml"로 SVG favicon을 제공하면 브라우저가 적극 캐시 — 슬림한 파일은 리브랜딩 시 더 빨리 갱신됩니다. React 프로젝트는 SVG를 컴포넌트나 URL로 자주 import합니다. 부풀어 오른 소스 파일은 loader가 문자열로 인라인할 때 JavaScript bundle parse 시간을 늘립니다. 컴포넌트 라이브러리에 추가하기 전에 최적화기를 거쳐 tree-shaking과 code splitting을 유지하세요. 최적화된 마크업을 .svg 파일이나 SVGR 파이프라인에 붙일 때 viewBox 값이 남아 있는지 확인 — React 앱은 반응형 스케일링에 viewBox에 의존합니다. 최신 브라우저는 문서 head에서 연결된 SVG favicon을 지원합니다. 파일이 작고 유효하면 Retina 탭과 고정된 바로가기에서 선명하게 스케일됩니다. SVG favicon은 정사각형, 단순 팔레트, 보안상 외부 참조나 스크립트를 피해야 합니다. 최적화 후 구형 Windows shell이나 raster를 기대하는 소셜 crawler를 위해 ICO나 PNG로 변환하세요. 최적화된 SVG favicon은 전체 favicon 패키지 workflow의 훌륭한 master 파일입니다. 디자이너는 임베디드 raster 이미지, 경로의 과도한 소수 정밀도, 중복 겹침 도형, 단순화된 속성이 될 수 있는 style 블록이 포함된 SVG를 자주 내보냅니다. Illustrator는 때때로 명명된 레이어를 group 요소로 추가하고, Figma 내보내기는 xmlns 속성과 소수점 6자리 좌표를 포함합니다. viewBox 없는 width/height는 반응형 레이아웃을 깨뜨립니다. 활성화된 숨김 레이어와 clipping mask는 보이지 않는 geometry를 내보내며 파일 크기에 포함됩니다. Figma에서는 Copy as SVG를 사용하거나 아이콘이 변환에 불리한 stroke를 쓸 때 Outline stroke로 내보내세요. Figma 파일은 각 그룹에 fill-rule과 transform 행렬을 자주 포함하며, 최적화는 안전할 때 인접 경로를 축소합니다. Illustrator에서는 Minify 또는 Responsive SVG 내보내기를 선택하고, 불필요한 font embedding을 끄고 내보내기 전 appearance를 확장하세요. 내보낸 후 마크업을 이 브라우저 기반 최적화 도구에 붙여넣으세요. 처리는 로컬에서 — 브랜드 자산은 서버에 업로드되지 않습니다. 정리된 파일을 다운로드하거나 결과를 repo, CMS, favicon generator pipeline에 직접 복사하세요. 프로덕션용 다중 크기 패키지가 필요하면 SVG to ICO Converter, SVG to PNG Converter, Favicon Generator와 함께 사용하세요.

자주 묻는 질문