SVG 뷰어·편집기

SVG 파일은 코드이기 때문에 그림만 보여 주는 뷰어로는 절반밖에 알 수 없습니다. 여기에서 SVG를 열거나 붙여 넣으면 렌더링된 모습을 보고, 선언된 크기와 viewBox를 확인하고, 요소 수를 세고, 편집하기 좋게 정리하거나 배포용으로 압축한 코드를 받을 수 있습니다. 칸의 코드를 고친 뒤 다시 실행하면 수정 결과를 바로 볼 수 있습니다. SVG를 단독으로 열면 JavaScript가 실행될 수 있으므로 스크립트, 이벤트 핸들러, 외부 링크를 먼저 제거할 수도 있습니다. 아무것도 업로드되지 않습니다.

사용 방법

1. SVG 파일을 고르거나 SVG 코드를 칸에 붙여 넣습니다.
2. 코드 형태를 고릅니다. 정리, 압축, 그대로 유지 중 하나입니다.
3. 직접 만들지 않은 파일은 안전 옵션을 켜 둡니다.
4. 미리보기, 크기, viewBox, 요소 표를 확인하고 코드를 복사합니다.
5. 칸에서 코드를 고쳐 다시 실행하고, 원하면 원하는 너비의 PNG로 내보냅니다.

계산식

표시 크기 = width × height 속성 (px, pt, mm, cm, in은 1인치 = 96 px로 환산); 하나가 없으면 viewBox 비율을 따릅니다

viewBox만 있는 SVG는 고정된 크기가 없어서 놓이는 상자에 맞춰 크기가 조절됩니다. PNG로 내보낼 때는 정한 너비를 적용하고 높이는 viewBox(또는 width와 height)에서 계산하므로, 작은 비트맵을 확대한 것이 아니라 선명하게 새로 그린 그림이 됩니다.

예시

<svg width="2in" viewBox="0 0 40 20">으로 쓴 아이콘은 너비가 2 × 96 = 192 px이고, viewBox 비율 20 ÷ 40에 따라 높이는 96 px입니다. 이것을 1024 px 너비의 PNG로 내보내면 1024 × 512 이미지가 됩니다.