SVG 미리보기 및 인스펙터

SVG를 붙여넣거나 드롭하면 즉시 렌더링된 모습을 확인할 수 있으며, 치수, viewBox, 요소 분포, 고유 색상, 보안 플래그를 포함한 통계 패널이 함께 표시됩니다. 미리보기는 스크립트와 same-origin 접근이 비활성화된 샌드박스 iframe에서 실행되므로 악의적인 SVG가 코드를 실행할 수 없습니다. 이미지를 SVG 또는 PNG로 내보내거나, 흰색·검정·투명 체커 배경 사이를 전환하거나, 소스 보기로 전환해 마크업을 확인할 수 있습니다.

사양

• SVG 2 Specification
• MDN: SVG

주요 사용 사례

• SVG 아이콘이나 일러스트를 삽입하기 전에 빠르게 확인
• 신뢰할 수 없는 SVG에 포함된 스크립트나 이벤트 핸들러 확인
• SVG의 viewBox와 본래 치수 검증
• SVG의 고유 색상 수 세기 (팔레트 추출 또는 최적화에 유용)
• SVG를 색상 또는 투명 배경 위에 PNG로 변환
• 예상치 못한 <script>나 <foreignObject> 사용을 찾기 위해 요소 분포 확인

기능

• 샌드박스 라이브 미리보기 — SVG가 sandbox="" iframe에서 렌더링되어 스크립트와 이벤트 핸들러가 실행되지 않습니다
• 배경 전환: 흰색, 검정 또는 투명 체커보드 패턴
• 통계 패널: 치수, viewBox, 가로세로 비율, 바이트 크기, 요소 수, 주요 요소, 고유 색상
• 보안 플래그가 <script>, 이벤트 핸들러, 외부 참조, 애니메이션이 포함된 SVG를 강조 표시합니다
• SVG 또는 고해상도(2×) PNG로 내보내기 — 선택한 배경이 PNG에 적용됩니다
• 세부 정보를 확인하기 위한 전체 화면 미리보기
• 구문 강조가 있는 소스 보기
• 정규화된 SVG를 클립보드에 복사

예제

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

팁

• 이미지가 깔끔하게 확대/축소되도록 고정 width/height보다 viewBox를 선호하세요
• Scripts 또는 Event Handlers 배지가 켜지면, 삽입 시 코드가 실행될 수 있습니다 — 신뢰하기 전에 제거하세요
• 체커 배경은 의도하지 않은 투명도를 발견하는 데 도움이 됩니다. 다른 페이지에서의 모습을 확인하려면 흰색이나 검정으로 전환하세요
• PNG 내보내기는 2× 해상도로 렌더링됩니다. 벡터 품질을 유지하려면 SVG 내보내기를 사용하세요
• 외부 참조(http:// href)는 샌드박스 미리보기에서 로드되지 않습니다 — 의도된 동작입니다