SVG 뷰어

SVG 입력
0글자
로컬 미리보기, 신뢰할 수 없는 출처의 스크립트 내용을 붙여넣지 마세요

온라인 SVG 뷰어. SVG 코드를 붙여넣으면 즉시 벡터 이미지를 실시간으로 렌더링하여 미리 볼 수 있으며, 복사와 .svg 파일 다운로드를 지원합니다. 로컬 처리로 안심하고 사용할 수 있습니다.

관련 추천

이미지 변환

이미지 압축

이미지 크기 조절

이미지 자르기

이미지 편집

ICO 생성

SVG란 무엇인가요?

SVG(Scalable Vector Graphics, 확장 가능한 벡터 그래픽스)는 XML로 기하학적 형상을 기술하는 이미지 형식입니다. JPG, PNG 같은 비트맵(픽셀 매트릭스)과 달리 SVG는 <rect>, <circle>, <path> 등의 태그로 도형의 수학적 경로를 기술하므로 어떤 크기로 확대/축소해도 흐려지지 않습니다.

**SVG는 어떤 상황에 적합한가요?** 로고, UI 아이콘, 순서도, 지도 마커, 차트, 애니메이션 장식, 재사용 가능한 일러스트레이션——이러한 상황은 선명도, 색상 변경 가능성, 확장성, CSS 제어 가능성에 대한 요구가 높기 때문에 SVG가 최적의 선택입니다.

**Canvas와의 차이점:** Canvas는 명령형 드로잉 API로, 그린 후에는 픽셀이 됩니다; SVG는 선언형 DOM 노드로, 속성, CSS 스타일을 언제든지 수정하고 이벤트를 바인딩할 수 있습니다. 따라서 아이콘, UI, 인터랙티브한 상황에는 SVG를, 게임, 파티클, 픽셀 아트 상황에는 Canvas를 사용합니다.

**일반적인 구성:** &lt;svg&gt; 루트 노드, &lt;g&gt; 그룹, &lt;path&gt; 경로(가장 많이 사용되며 d 속성을 포함), 그라데이션(&lt;linearGradient&gt;/&lt;radialGradient&gt;), 필터(&lt;filter&gt;), 애니메이션(SMIL/CSS/JS).

**미리보기 방법:** 이 도구를 사용하여 SVG 소스 코드를 편집기에 붙여넣으면 오른쪽에 실시간으로 렌더링됩니다. 드래그 가능한 분할 창 레이아웃으로 SVG 코드가 올바른지, 표시 효과가 예상과 일치하는지 몇 초 안에 확인할 수 있습니다.

사용 사례

  • 프론트엔드 개발자가 SVG 아이콘 코드의 렌더링 효과를 빠르게 미리볼 때
  • Figma, Sketch 등 디자인 도구에서 복사한 SVG의 표시 효과를 검증할 때
  • SVG 경로, 색상 또는 viewBox 속성을 디버깅하면서 변경 사항을 실시간으로 확인할 때
  • 프로젝트 코드에 통합하기 전에 SVG 코드를 확인하고 검증할 때

이용 방법

  1. SVG 소스 코드를 왼쪽 편집기에 붙여넣거나, 「예제 로드」를 클릭하여 데모 효과 확인
  2. 오른쪽에 벡터 이미지 렌더링 결과가 즉시 표시되며, 코드를 수정하면 실시간으로 미리보기가 갱신됨
  3. 미리보기가 만족스러우면 복사 버튼을 클릭하여 코드를 복사하거나, 사용자 지정 파일 이름으로 .svg 파일로 다운로드

주요 기능

  • 실시간 미리보기: SVG 코드를 붙여넣거나 편집하면 즉시 벡터 이미지를 렌더링, WYSIWYG
  • 분할 레이아웃: 데스크톱에서는 좌우 분할 창을 드래그하여 너비 조정, 모바일에서는 탭으로 입력과 미리보기 전환
  • 원클릭 내보내기: SVG 소스 코드를 클립보드에 복사하거나 사용자 지정 파일 이름으로 표준 .svg 파일 다운로드
  • 로컬 처리: 모든 SVG 파싱과 렌더링이 브라우저 내에서 완료, 코드가 업로드되지 않아 더 안전
  • 투명 배경: 체커보드 배경으로 표시하여 SVG의 투명 영역과 가장자리 디테일을 선명하게 확인
  • 문자 수 카운트: 실시간으로 코드 문자 수를 표시하며, 내장된 예제로 빠르게 체험 가능

자주 묻는 질문

온라인에서 SVG 코드 효과를 어떻게 미리 보나요?

SVG 소스 코드를 왼쪽 편집기에 붙여넣으면 오른쪽에 벡터 이미지가 즉시 렌더링되어 표시됩니다. 편집기에서 직접 코드를 수정하면 미리보기 영역이 실시간으로 새로고침되어 프론트엔드 아이콘 디버깅과 효과 검증에 편리합니다.

미리 본 SVG를 어떻게 다운로드하여 저장하나요?

미리보기 영역 오른쪽 상단의 다운로드 버튼을 클릭하면 파일 이름을 지정하여 표준 .svg 파일로 저장할 수 있습니다. 복사 버튼을 클릭하여 SVG 소스 코드를 클립보드에 복사한 후 프로젝트 코드에 직접 붙여넣어 사용할 수도 있습니다.

SVG 코드가 서버에 업로드되나요? 안전한가요?

아니요. 모든 SVG 파싱과 렌더링은 로컬 브라우저 내에서 완료되며, SVG 코드가 어떤 서버에도 업로드되지 않습니다. 처리 후 즉시 메모리에서 삭제되어 공개되지 않은 아이콘 소재와 디자인 시안 유출 위험을 차단합니다.

디자인 소프트웨어에서 복사한 SVG 코드를 지원하나요?

네. Figma, Sketch, Adobe Illustrator 등 디자인 소프트웨어에서 복사한 SVG 코드를 직접 붙여넣어 미리 볼 수 있습니다. 렌더링 효과를 먼저 확인한 후 문제가 없으면 프로젝트에 통합하는 것을 권장합니다.

SVG 미리보기가 표시되지 않는 이유는 무엇인가요? 흔한 원인은?

흔한 원인: ① xmlns="http://www.w3.org/2000/svg" 네임스페이스 선언 누락; ② 코드 내 닫히지 않은 태그; ③ 특수 문자가 올바르게 이스케이프되지 않음; ④ SVG 자체의 구문 오류. 이 항목들을 확인해 주세요.

다운로드하는 SVG 파일 이름을 사용자 지정할 수 있나요?

네. 다운로드 버튼을 클릭하면 파일 이름 입력 상자가 나타나며, 파일 이름을 지정(기본값 image.svg)한 후 Enter 키를 누르거나 확인을 클릭하면 다운로드됩니다. 도구가 자동으로 .svg 확장자를 추가합니다.

용어집

viewBox
SVG 내부 좌표계로, "x y width height" 형식으로 지정합니다. 흔히 사용되는 "0 0 24 24"는 너비와 높이가 24단위임을 의미합니다. SVG의 실제 표시 크기는 width/height 속성 또는 외부 CSS로 제어됩니다.
XML 네임스페이스(namespace)
SVG가 브라우저에서 SVG 문서로 올바르게 인식되려면 xmlns="http://www.w3.org/2000/svg"를 선언해야 합니다. 네임스페이스 누락은 HTML에서 SVG가 표시되지 않는 가장 흔한 원인입니다.MDN - SVG 네임스페이스
path d 속성
M/L/C/Q/H/V/Z 등의 문자와 좌표로 구성된 경로 명령 집합입니다. M=이동, L=선 그리기, C=3차 베지어 곡선, Q=2차 베지어 곡선, Z=경로 닫기. 복잡한 아이콘은 대부분 단일 path 요소와 그 d 속성만으로 표현됩니다.
currentColor
현재 요소의 color 속성을 참조하는 CSS 키워드입니다. SVG에서 fill 또는 stroke를 currentColor로 설정하면 외부 CSS의 color 변경으로 아이콘 색상을 바꿀 수 있어 디자인 시스템에서 흔히 사용하는 방식입니다.

SVG 주요 요소 퀵 레퍼런스

요소유형용도
<svg>루트 노드모든 SVG의 컨테이너, 필수
<rect>기본 도형사각형, 둥근 모서리 사각형
<circle> / <ellipse>기본 도형원 / 타원
<line> / <polyline>기본 도형직선 / 폴리라인
<polygon> / <path>경로다각형 / 임의의 곡선 (d 속성)
<text> / <tspan>텍스트SVG 내장 텍스트
<g>그룹노드를 그룹화하여 일괄 변환 적용
<defs> / <symbol>정의재사용 가능한 도형과 그라데이션
<linearGradient> / <radialGradient>그라데이션선형 / 방사형 그라데이션 채우기
<use>재사용defs의 요소 참조
<filter>필터블러, 그림자 등 고급 효과

SVG와 비트맵 형식 비교

항목SVG (벡터)PNG (비트맵)JPG (비트맵)
구성 방식XML이 기하학적 경로를 기술픽셀 매트릭스픽셀 매트릭스 (DCT 압축)
확대 효과어떤 크기로 확대해도 선명확대 시 흐려짐확대 시 흐려지고 압축 자국이 두드러짐
파일 크기경로 복잡도에 따라 다름, 로고는 보통 < 10KB중간 (무손실)작음 (손실)
투명 배경✅✅❌
애니메이션 지원✅ SMIL / CSS / JS❌ (APNG 필요)❌
CSS로 색상 변경✅ currentColor / fill 변수❌❌
적합한 용도아이콘, 로고, UI 벡터투명 배경 소재, 스크린샷사진, 넓은 그라데이션

Authoritative References