SVG 뷰어
원본 SVG 마크업을 붙여 넣고 렌더링 결과를 바로 확인하세요.
미리보기는 스크립트와 외부 참조를 비활성화하면서도 viewBox와 크기 정보를 점검할 수 있게 해줍니다.
SVG 미리보기: 원본 코드를 붙여 넣고 결과를 즉시 확인
viewBox와 크기 점검: 투명 영역과 잠재적으로 안전하지 않은 내용을 검토
SVG는 서버로 전송되지 않습니다. 처리는 전부 브라우저 안에서 끝납니다.
위험한 요소와 외부 URL 참조는 미리보기에서 비활성화됩니다.
사용 방법
- SVG 코드를 붙여 넣거나 `.svg` 파일을 불러오세요.
- 배경과 확대 수준을 바꿔 렌더링을 점검하세요.
- viewBox, 크기 정보, 경고를 검토한 뒤 필요하면 SVG를 저장하세요.
예시
간단한 아이콘 SVG
입력
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
출력
파란색 원형 아이콘이 렌더링되며, 정보 패널에 viewBox가 `0 0 120 120`으로 표시됩니다.
FAQ
내 SVG가 어딘가로 업로드되나요?
아니요. 붙여 넣은 SVG와 불러온 파일은 브라우저 안에만 머물며 서버로 전송되지 않습니다.
script나 foreignObject가 포함된 SVG는 어떻게 되나요?
안전 미리보기는 렌더링 전에 해당 요소를 제거하고 정보 패널에 경고를 표시합니다.
외부 이미지나 폰트를 참조하는 SVG도 똑같이 렌더링되나요?
항상 그렇지는 않습니다. 외부 참조가 비활성화되므로 원래 환경과 다르게 보일 수 있습니다. 이 도구는 안전한 로컬 점검을 우선합니다.
왜 SVG가 렌더링되지 않나요?
잘못된 XML, 잘못된 속성값, 또는 루트 요소가 `svg`가 아닌 경우가 흔한 원인입니다. 도구가 보여 주는 오류 메시지를 확인하세요.
배경을 왜 바꿔야 하나요?
투명 영역이나 밝은 색 아이콘은 배경에 따라 전혀 다르게 보일 수 있으므로, 체커보드/흰색/어두운 배경을 빠르게 테스트할 수 있게 했습니다.
참고
- 안전을 위해 외부 URL 참조와 위험한 요소는 렌더링 전에 비활성화됩니다.
- 외부 폰트나 이미지를 사용하는 SVG는 원래 환경과 동일하게 보이지 않을 수 있습니다.
- 매우 큰 SVG 파일은 자동으로 실시간 미리보기가 꺼지고 수동 렌더링을 요청합니다.