SVG 뷰어
온라인 SVG 코드 편집기 & 라이브 미리보기
SVG 코드
SVG 미리보기
SVG 미리보기가 여기에 표시됩니다
SVG 뷰어란?
SVG 뷰어는 SVG 코드 편집과 라이브 미리보기를 위한 온라인 도구입니다. SVG 코드를 직접 입력하거나 붙여넣으면 렌더링 결과를 실시간으로 확인할 수 있습니다. SVG(Scalable Vector Graphics)는 XML 기반의 벡터 이미지 형식으로, 웹 디자인, 아이콘 제작, 데이터 시각화에 널리 사용됩니다.
이 도구는 실시간 미리보기, 소스 코드 보기, SVG 파일 다운로드 등을 지원합니다.
사용 방법
기본 사용법
- 왼쪽 편집기에 SVG 코드를 입력하거나 붙여넣기
- 오른쪽 패널에 SVG 렌더링이 실시간으로 표시
- "소스" 버튼을 클릭하여 포맷된 SVG 소스 코드 보기
- "다운로드" 버튼을 클릭하여 SVG를 파일로 저장
- "SVG 복사" 버튼을 클립보드에 복사
기능
실시간 미리보기SVG 코드 입력과 동시에 렌더링 결과 확인
소스 보기포맷된 SVG 소스 코드로 전환하여 보기
파일 다운로드원클릭으로 SVG 코드를 .svg 파일로 저장
프라이버시 보호모든 처리가 브라우저에서 로컬로 실행
SVG 샘플
원
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>사각형
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>별
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>자주 묻는 질문
SVG란 무엇인가요?
SVG(Scalable Vector Graphics)는 W3C가 표준화한 XML 기반 벡터 이미지 형식입니다. PNG, JPG와 같은 래스터 형식과 달리 수학적 공식을 사용하여 그래픽을 설명하므로 어떤 크기로든 무손실 확대가 가능합니다.
SVG의 장점은 무엇인가요?
SVG 파일은 크기가 작고, 무손실 확대 가능, 애니메이션과 인터랙티비티 지원, CSS와 JavaScript로 조작 가능, SEO에 친화적입니다. 아이콘, 로고, 데이터 차트, 반응형 디자인에 이상적입니다.
웹 페이지에서 SVG를 사용하는 방법은?
img 태그, CSS background-image, 인라인 SVG(HTML에 직접 작성), object 또는 embed 태그를 통해 사용할 수 있습니다. 인라인 SVG가 가장 유연한 방법입니다.
이 도구는 안전한가요?
완전히 안전합니다. SVG 코드의 파싱과 렌더링은 모두 브라우저에서 로컬로 이루어집니다. 서버로 데이터가 업로드되지 않습니다.