SVG 뷰어
SVG 코드를 붙여 넣으면 실시간 렌더링 미리보기
SVG 뷰어
입력한 코드는 먼저 DOMParser로 XML 문서로 파싱되어 <parsererror> 요소가 있는지 검사하는 방식으로 태그 짝이 안 맞거나 문법이 깨진 SVG를 걸러냅니다. 파싱에 성공하면 원본 코드 문자열을 그대로 Blob으로 만들어 <img> 태그의 src로 렌더링하는데, 이 방식은 SVG 내부에 <script> 태그가 포함돼 있어도 이미지로 취급되어 스크립트가 실행되지 않는다는 안전상의 장점이 있습니다. 줌 기능은 이미지를 다시 그리는 것이 아니라 CSS transform:scale()로 확대·축소하므로, 벡터 그래픽인 SVG는 4배까지 확대해도 래스터 이미지처럼 픽셀이 깨지지 않고 선명하게 유지됩니다.
자주 묻는 질문
오류 메시지 없이 렌더링되면 SVG가 완벽하게 유효하다는 뜻인가요?
아니요. DOMParser의 검사는 태그가 올바르게 열리고 닫혔는지 같은 XML 문법 오류만 잡아내며, SVG 스펙상 속성값이 의미적으로 올바른지까지는 검증하지 않습니다. 오류가 안 뜨는 것은 "문법적으로 잘 만들어진 XML"이라는 뜻이지 "SVG 스펙을 완전히 준수한다"는 보장은 아닙니다.
SVG 안에 스크립트 태그가 있으면 실행되나요?
실행되지 않습니다. 이 도구는 파싱에 성공한 코드를 Blob으로 만들어 <img> 태그의 src로 표시하는데, 브라우저는 이미지로 로드된 SVG 내부의 <script>나 이벤트 핸들러를 실행하지 않도록 제한합니다. 외부에서 받은 SVG 코드를 안전하게 미리보기에 적합한 방식입니다.
줌을 4배까지 늘려도 화질이 깨지지 않는 이유는?
줌은 이미지를 다시 렌더링하는 것이 아니라 CSS의 transform:scale()로 화면에 표시된 요소 자체를 확대하는 방식입니다. SVG는 픽셀이 아닌 수학적 경로로 정의된 벡터 포맷이라, 이렇게 확대해도 PNG 같은 래스터 이미지와 달리 경계선이 흐려지거나 계단현상이 생기지 않습니다.
미리보기 아래 viewBox·w·h 정보는 어떻게 얻나요?
SVG 루트 요소의 viewBox, width, height 속성값을 getAttribute()로 그대로 읽어와 표시합니다. 계산해서 추정하는 것이 아니므로, 원본 코드에 해당 속성이 없으면 값을 유추하지 않고 '—'로 표시됩니다.
SVG 파일을 업로드해서 열 수 있나요?
아니요, 코드를 텍스트로 붙여 넣는 방식만 지원합니다. .svg 파일을 열어야 한다면 메모장이나 코드 편집기로 먼저 열어 내용을 복사한 뒤 붙여 넣어야 합니다.
CSS 애니메이션이나 SMIL 애니메이션이 들어간 SVG도 재생되나요?
네, <img> 태그로 표시되는 SVG는 스크립트만 차단될 뿐 CSS 애니메이션과 SMIL(<animate> 등) 애니메이션은 이미지 자체의 렌더링 기능이라 정상적으로 재생됩니다.
배경색 옵션의 회색·어두운 색은 어떤 용도인가요?
투명 배경으로 만든 아이콘은 흰 배경에서는 잘 보여도 어두운 UI 위에서는 잘 안 보이는 경우가 있어, 실제 배치될 환경과 비슷한 배경(밝은 회색 #f0f0f0, 어두운 남색 계열 #1a1a2e)에서 미리 확인할 수 있도록 넣어둔 옵션입니다. 투명 배경 선택 시에는 체커보드 패턴으로 투명 영역을 표시합니다.
파싱 오류가 나면 어떤 정보가 표시되나요?
브라우저의 parsererror 메시지 중 첫 줄을 80자까지만 잘라 보여줍니다. 보통 어느 줄에서 태그가 닫히지 않았는지 등 XML 파서가 실패한 위치에 대한 힌트가 담겨 있습니다.