SVG 미리보기 / 편집기

SVG Preview / Editor의 동작 방식

도구가 하는 일

SVG Preview / Editor는 SVG 마크업을 편집하는 즉시 라이브로 렌더링하고, 빠른 확인을 위해 메타데이터(너비, 높이, viewBox, 요소 개수)를 추출합니다. 토글을 통해 체크무늬 배경을 추가하여 투명 영역을 선명하게 볼 수 있습니다. 또한 CSS의 background-image나 HTML src 속성에서 바로 사용할 수 있는 URL 인코딩된 data URI도 생성합니다.

개발자들이 흔히 사용하는 사례

아이콘 디자이너는 다양한 크기에서 viewBox 계산과 스트로크 두께를 테스트합니다. 프론트엔드 개발자는 최적화(수동 또는 SVGO 사용) 후에도 손수 편집한 SVG 아이콘이 올바르게 렌더링되는지 확인합니다. 이메일 개발자는 HTML에 인라인으로 넣기 위해 브랜드 마크의 컴팩트한 data URI 버전을 생성합니다. 교육자는 preserveAspectRatio와 overflow 같은 속성이 렌더링에 미치는 영향을 시연합니다.

데이터 형식, 타입 또는 변형

입력은 원시 SVG XML 마크업입니다. 출력은 샌드박스 iframe에서 렌더링된 동일한 SVG와 URL 인코딩된 data URI(data:image/svg+xml;charset=utf-8,…)입니다. 요소 개수 지표는 모든 여는 태그(defs, g, 그라데이션 및 유사한 중첩 요소 포함)를 세어 대략적인 복잡도를 보여줍니다. 추출된 속성 값은 원시 형태로 표시됩니다.

흔한 함정과 엣지 케이스

href가 있는 `use` 또는 `image` 요소가 참조하는 외부 리소스는 샌드박스 iframe 안에서 로드되지 않습니다. script 요소 안의 인라인 JavaScript는 샌드박스에 의해 차단되므로, 애니메이션은 SMIL 또는 CSS 키프레임에 의존해야 합니다. 시스템에 설치되지 않은 특정 폰트에 의존하는 SVG는 기본 폰트로 대체됩니다. 미리보기에서는 폰트를 임베드하거나 시스템 폰트를 사용하세요.

코드 대신 이 도구를 사용해야 하는 경우

일회성 아이콘 디자인, 디버깅, 또는 data URI 생성에는 브라우저 도구를 사용하세요. 프로덕션 자산은 조정된 설정으로 SVGO를 실행해 메타데이터를 제거하고 마크업을 최소화한 뒤, data URI를 여기저기 인라인하기보다는 스프라이트 시스템이나 적절한 번들러 통합을 사용해 앱에서 아이콘을 로드하세요.