SVG 뷰어
온라인에서 SVG 파일 보기: 파일을 놓거나 코드를 붙여넣으면 바로 미리보고, 확대하고, 편집할 수 있습니다. 모든 작업이 브라우저에서 이루어집니다.
- 업로드 없음
- 오프라인 지원
- 무료, 가입 불필요
- 파일이 브라우저 밖으로 나가지 않습니다
여기에 SVG 파일을 놓으세요
또는 편집기에 SVG 코드를 붙여넣으세요. 여러 파일을 한 번에 열 수 있습니다.
SVG는 이 기기에만 머뭅니다. 아무것도 업로드되지 않습니다.
SVG 뷰어 사용 방법
- 1
SVG 열기
.svg 파일 하나 또는 여러 개를 끌어다 놓거나, SVG 코드를 붙여넣거나, 기기에서 파일을 선택하세요.
- 2
미리보기 및 편집
입력하는 대로 미리보기가 업데이트됩니다. 확대, 이동, 배경 변경, 윤곽선 모드로 모든 패스를 확인하세요.
- 3
내보내기
SVGO로 최적화한 다음 SVG, PNG, JPG, WebP, ICO로 다운로드하거나 React, Vue, Data URI 코드를 복사하세요.
SVG 뷰어란?
SVG 뷰어는 Scalable Vector Graphics(.svg) 파일을 열어 화면에 그려 주는 도구입니다. SVG는 텍스트 형식이므로 좋은 뷰어는 이미지 뒤의 코드도 함께 보여 주어, 도형이나 색상, 그라데이션이 왜 그렇게 보이는지 정확히 확인할 수 있습니다.
viewsvg는 무료 온라인 SVG 뷰어 겸 편집기입니다. 파일을 놓는 순간 표시하고, 2%부터 6400%까지 확대·이동하며 투명·흰색·검은색·사용자 지정 배경에서 이미지를 확인할 수 있습니다. 코드 편집기가 미리보기 옆에 있어 입력하는 대로 미리보기가 바뀌므로, SVG를 보고 고치는 일을 한곳에서 할 수 있습니다.
모든 기기에서 SVG 파일 여는 방법
어떤 기기에서든 SVG를 가장 빨리 보는 방법은 여기서 여는 것입니다. 열기를 클릭하거나 파일을 이 페이지로 끌어다 놓으세요. 데스크톱과 모바일의 Chrome, Edge, Safari, Firefox에서 설치 없이 작동합니다. 운영체제에서도 SVG를 볼 수 있지만 몇 가지 제한이 있습니다.
Windows
Windows는 기본적으로 파일 탐색기나 사진 앱에서 SVG 미리보기를 지원하지 않습니다. 파일을 마우스 오른쪽 버튼으로 클릭하고 연결 프로그램에서 Microsoft Edge나 Chrome을 선택하거나, Microsoft PowerToys를 설치하면 SVG 썸네일과 미리보기 창을 사용할 수 있습니다. 코드를 보거나 이미지를 편집하려면 viewsvg에서 여세요.
Mac
Finder에서 파일을 선택하고 스페이스 바를 누르면 훑어보기로 미리볼 수 있고, Safari에서 열 수도 있습니다. 둘 다 코드, viewBox, 파일 크기는 보여 주지 않습니다. 이런 정보를 확인하려면 여기에 파일을 놓으세요.
iPhone 및 iPad
파일 앱에서 많은 SVG를 미리볼 수 있습니다. 확대, 투명 배경 확인, PNG 내보내기가 필요하면 Safari에서 viewsvg를 열고 열기를 탭한 다음 파일 앱이나 iCloud Drive에서 파일을 선택하세요.
Android
대부분의 Android 갤러리 앱은 SVG를 지원하지 않습니다. Chrome에서 이 페이지를 열고 열기를 탭한 다음 저장공간이나 Google Drive에서 파일을 선택하세요.
Linux
GNOME 이미지 뷰어, Gwenview, 대부분의 파일 관리자가 SVG 파일을 표시합니다. 코드 확인, 최적화, PNG 내보내기도 필요하다면 viewsvg를 사용하세요.
SVG 파일이란?
SVG(Scalable Vector Graphics)는 W3C가 만든 XML 기반 이미지 형식입니다. 픽셀 대신 viewBox 안의 좌표로 패스, 원, 사각형, 텍스트, 그라데이션 같은 도형을 기술합니다. 그래서 16px 파비콘부터 대형 광고판까지 어떤 크기에서도 선명하고, 단순한 아이콘은 같은 PNG보다 파일이 작은 경우가 많습니다.
모든 브라우저가 SVG를 지원하므로 로고, 아이콘, 일러스트, 차트, UI 그래픽 등 웹의 표준 형식으로 쓰입니다. 파일이 일반 텍스트라 어떤 코드 편집기로도 열 수 있지만, 실제 모습은 렌더링해야 알 수 있습니다. SVG 뷰어는 두 가지를 모두 보여 줍니다.
브라우저 탭이나 디자인 앱 대신 viewsvg를 쓰는 이유
브라우저 탭에서 SVG를 열면 이미지만 보입니다. Illustrator, Figma, Inkscape 같은 디자인 앱은 편집할 수 있지만 실행이 느리고 코드를 다시 쓰는 경우가 많습니다. viewsvg는 그 중간에 있습니다.
| 기능 | 브라우저 탭 | 디자인 앱 | viewsvg |
|---|---|---|---|
| 바로 열림, 설치 불필요 | 예 | 아니요 | 예 |
| 확대, 이동, 화면에 맞추기 | 제한적 | 예 | 예, 최대 6400% |
| 코드를 보며 실시간 편집 | 아니요 | 아니요 | 예 |
| 투명·어두운·사용자 지정 배경 | 아니요 | 예 | 예 |
| 윤곽선 모드와 픽셀 격자 | 아니요 | 예 | 예 |
| SVGO로 최적화 | 아니요 | 아니요 | 예 |
| PNG, JPG, WebP, ICO, JSX로 내보내기 | 아니요 | 일부 | 예 |
| 파일이 기기에 머무름 | 예 | 예 | 예 |
신뢰할 수 없는 파일도 안전하게 열 수 있습니다. 스크립트, 이벤트 핸들러, javascript: 링크는 표시하기 전에 제거됩니다.
SVG 작업에 필요한 모든 기능
SVG 뷰어는 SVG 파일을 보고, 편집하고, 최적화하고, 변환하는 하나의 작업 공간에 포함되어 있습니다. 가입, 광고, 업로드가 없습니다.
즉시 미리보기
최대 6400%까지 확대, 이동, 화면에 맞추기, 투명·흰색·검은색 또는 원하는 배경에서 SVG를 확인하세요.
실시간 코드 편집기
구문 강조, 오류 줄 표시, 정리 및 압축, 검색, 전체 실행 취소 기록.
윤곽선 및 픽셀 격자
윤곽선 모드로 모든 패스를 보고, 확대했을 때 격자로 픽셀 정렬을 확인하세요.
정보 확인
파일 크기와 gzip 크기, viewBox, 마우스를 올리면 강조되는 요소 트리, 클릭 한 번으로 색상 바꾸기.
SVGO로 최적화
전후 미리보기와 조절 가능한 정밀도로 파일을 줄이세요. 열린 모든 파일을 한 번에 최적화할 수 있습니다.
PNG, JPG, WebP, ICO
최대 16384px까지 원하는 크기로 투명도를 유지한 채 내보내거나, PNG를 클립보드에 바로 복사하세요.
React, Vue, Svelte
currentColor와 props를 지원하는 깔끔한 JSX/TSX, React Native, Vue, Svelte 컴포넌트.
여러 파일을 한 번에
여러 SVG를 탭으로 열고 일괄 최적화하거나 SVG 또는 PNG를 ZIP으로 다운로드하세요.
프라이빗 & 오프라인
업로드도 계정도 없습니다. 작업 내용은 브라우저에 저장되며, 첫 방문 후에는 오프라인에서도 작동합니다.
자주 묻는 질문
SVG 파일을 온라인에서 보려면 어떻게 하나요?
.svg 파일을 이 페이지로 끌어다 놓거나 '열기'를 클릭해 선택하세요. SVG가 바로 미리보기에 표시되고 코드가 편집기에 나타나므로 실시간으로 수정할 수 있습니다.
SVG 파일은 어떤 프로그램으로 여나요?
최신 웹 브라우저(Chrome, Edge, Safari, Firefox)라면 SVG 파일을 열 수 있고, Illustrator, Inkscape, Figma 같은 디자인 앱으로도 열 수 있습니다. viewsvg 같은 온라인 SVG 뷰어는 설치 없이 모든 기기에서 작동하며 코드, 크기, viewBox도 보여 줍니다.
SVG 파일의 코드는 어떻게 보나요?
여기서 파일을 열면 미리보기 옆 편집기에 소스 코드가 구문 강조와 줄 번호와 함께 표시됩니다. 압축된 코드는 '코드 정리'로 들여쓰기하면 읽기 쉬워집니다.
SVG 코드를 편집하고 변경 사항을 실시간으로 볼 수 있나요?
네. 코드 편집기는 구문 강조, 오류 표시, 실행 취소를 지원합니다. 변경할 때마다 미리보기가 다시 그려집니다. 코드를 건드리지 않고 회전, 반전, 크기 조절, 색상 변경도 할 수 있습니다.
SVG에 오류가 표시되는 이유는 무엇인가요?
SVG는 XML이므로 태그가 닫혀 있고, 속성 값이 따옴표로 감싸져 있고, 루트 <svg> 요소에 xmlns="http://www.w3.org/2000/svg"가 있는 올바른 형식이어야 합니다. viewsvg는 문제가 있는 줄을 정확히 표시하고, 수정하는 동안 마지막으로 정상 표시된 미리보기를 화면에 유지합니다.
여러 SVG 파일을 한 번에 열 수 있나요?
네. 여러 파일을 놓으면 각각 탭으로 열립니다. 탭을 전환하거나, 모두 한 번에 최적화하거나, SVG 또는 PNG를 ZIP으로 다운로드할 수 있습니다.
휴대폰에서 SVG 파일을 볼 수 있나요?
네. viewsvg는 모바일 Safari와 Chrome에서 작동합니다. '열기'를 탭해 파일에서 SVG를 고르고, 두 손가락으로 확대하고 드래그해 이동하세요.
애니메이션 SVG도 보이나요?
네. SVG 안의 SMIL 애니메이션(<animate>, <animateTransform>)과 CSS 애니메이션이 미리보기에서 재생됩니다. 스크립트만 제거됩니다.
출처를 알 수 없는 SVG 파일을 열어도 안전한가요?
viewsvg는 렌더링 전에 스크립트, 이벤트 핸들러, javascript: 링크를 제거하고, 격리된 Shadow DOM 안에서 SVG를 그리므로 SVG의 스타일이 페이지에 영향을 주지 않습니다.
SVG 파일이 어딘가에 업로드되나요?
아니요. viewsvg는 전부 브라우저에서 실행됩니다. 파일을 읽고, 표시하고, 최적화하고, 변환하는 작업이 모두 기기에서 이루어지며 서버로 아무것도 전송되지 않습니다. 첫 방문 후에는 오프라인에서도 작동합니다.
viewsvg는 무료인가요?
네. 모든 기능이 무료이며 가입, 워터마크, 파일 개수 제한이 없습니다.