SVG 미리보기

SVG 파일 미리보기 및 소스 코드 보기

여기에 SVG 파일을 놓거나 클릭해서 선택하세요

지원 형식: SVG, SVGZ · Ctrl+V / ⌘V로 붙여넣을 수도 있습니다

또는 SVG 코드 붙여넣기

팁: 페이지 어디서나 Ctrl+V / ⌘V로 SVG 코드를 붙여넣을 수 있습니다.

SVG 미리보기 사용 방법

SVG 파일이나 붙여넣은 코드를 안전하게 살펴봅니다. 확대·축소, 이동, 배경 전환이 가능하고 표시 크기, width, height, viewBox, 요소 수를 보여 줍니다. 소스를 고치면 바로 반영되며 스크립트는 실행되지 않습니다.

SVG나 SVGZ 파일을 페이지에 끌어다 놓거나, '또는 SVG 코드 붙여넣기'에 코드를 넣고 'SVG 추가'를 누릅니다. 페이지 어디서나 Ctrl+V로 붙여넣어도 됩니다.

배경을 '체크무늬', '흰색', '검은색'으로 바꾸고 버튼, Ctrl/⌘ + 스크롤, 단축키 + − 0 1로 확대·축소합니다. 드래그로 이동하고 더블클릭하면 화면에 맞춥니다.

'세부 정보'에서 표시 크기, width, height, viewBox, 파일 크기, 요소 수를 확인합니다. 그림 위에 포인터를 올리면 SVG 좌표가 표시됩니다.

'소스'에서 코드를 고치면 입력하는 대로 미리보기가 바뀌고, 문법 오류는 행과 열로 알려 줍니다.

'내보내기'에서 'SVG 다운로드' 또는 'Data URI 복사'를 누릅니다.

자주 묻는 질문

안전합니다. SVG는 이미지로만 표시되므로 스크립트와 이벤트 핸들러가 실행되지 않고, 웹에서 참조하는 파일(이미지, 글꼴, 스타일시트)도 불러오지 않습니다. 업로드도 되지 않습니다.

xmlns 선언이 빠졌을 가능성이 큽니다. 미리보기는 자동으로 추가하고 안내를 표시하니, '코드에 추가'로 소스를 고친 뒤 다운로드하세요.

width·height도 viewBox도 없어서 브라우저 기본 크기를 쓰기 때문입니다. width와 height만 없으면 viewBox에서 크기를 가져옵니다.

URL 인코딩된 data:image/svg+xml 문자열입니다. CSS background-image나 img의 src에 그대로 넣을 수 있습니다. Base64 형식이나 더 작은 파일이 필요하면 SVG 최적화 도구를 사용하세요.

네. gzip으로 압축된 SVGZ는 브라우저에서 풀리며, 'SVG 다운로드'는 압축하지 않은 .svg 파일로 저장합니다.