SVG 뷰어
온라인 SVG 코드 편집기 & 라이브 미리보기
SVG 뷰어란?
SVG 뷰어는 SVG 코드 편집과 라이브 미리보기를 위한 온라인 도구입니다. SVG 코드를 직접 입력하거나 붙여넣으면 렌더링 결과를 실시간으로 확인할 수 있습니다. SVG(Scalable Vector Graphics)는 XML 기반의 벡터 이미지 형식으로, 웹 디자인, 아이콘 제작, 데이터 시각화에 널리 사용됩니다.
이 도구는 실시간 미리보기, 소스 코드 보기, SVG 파일 다운로드 등을 지원합니다.
사용 방법
사용 방법
- 왼쪽 편집기에 SVG 코드를 입력하거나 붙여넣으세요
- 오른쪽 패널에 SVG가 실시간으로 렌더링됩니다
- 'Source' 버튼을 클릭하면 서식 있는 SVG 소스 코드를 볼 수 있습니다
- '다운로드' 버튼을 클릭하면 SVG를 파일로 저장할 수 있습니다
- 'SVG 복사' 버튼을 클릭하면 코드가 클립보드에 복사됩니다
SVG 안전 관련
- 가능하면 신뢰할 수 있는 출처의 SVG만 붙여넣으세요. SVG에는 스크립트, 외부 참조, 예기치 못한 스타일이 포함될 수 있습니다.
- 다운로드 또는 삽입 전에 viewBox, 크기, 채움, 선, 텍스트 렌더링을 대상 크기에서 확인하세요.
활용 사례
기술 원리
SVG 소스는 new DOMParser().parseFromString(source, 'image/svg+xml')로 파싱하며, HTML의 관대한 파서가 아닌 XML 규칙에 따라 구축된 Document를 반환합니다. 파서는 잘-formedness를 검사하고, 유효하지 않은 마크업에 <parsererror> 노드를 표시하며, SVG 트리를 나머지 DOM과 동일하게 스크립트와 CSS에 노출합니다. <path>, <circle>, <rect>, <g>, <text>, <defs>, <linearGradient>, <filter> 같은 요소는 자체 속성과 이벤트 타겟을 가진 1급 노드입니다. 좌표 체계는 viewBox 속성에 의해 결정됩니다. viewBox="minX minY width height"는 내부 좌표 공간을 정의하고, preserveAspectRatio(기본값 xMidYMid meet)는 해당 공간이 렌더링 뷰포트에 매핑되는 방식을 결정합니다. meet는 레터박싱을 추가하여 전체 viewBox를 보존하고, slice는 크롭으로 뷰포트를 채우며, none은 비균등하게 늘립니다. d 내부의 패스 명령은 M(moveTo), L(lineTo), C(큐빅 베지어), Q(쿼드라틱), A(타원 호), Z(닫기 경로)를 사용하며, 각 명령은 절대 대문자 형식과 상대 소문자 형식을 가집니다. SVG 보안은 형식 자체가 실행 가능하기 때문에 명시적 처리가 필요합니다. <script>, HTML을 포함하는 foreignObject, 외부 URL로의 xlink:href, onload 및 기타 이벤트 핸들러 속성은 SVG가 인라인으로 삽입되면 페이지 컨텍스트에서 JavaScript를 실행할 수 있습니다. 서드파티 SVG를 수용할 때는 DOMPurify의 SVG 프로필 또는 서버 측 sanitizer가 표준적인 완화 조치입니다. 래스터화하여 PNG로 변환하려면 SVG를 Blob URL에서 HTMLImageElement로 로드한 뒤 canvas에 drawImage로 그린 다음, canvas.toBlob('image/png')를 호출하여 다운로드합니다.
- 파서: new DOMParser().parseFromString(source, 'image/svg+xml')는 엄격한 XML Document를 반환하며, 실패 시 <parsererror> 노드 표시
- viewBox: "minX minY width height"로 내부 좌표 공간 설정; preserveAspectRatio xMidYMid meet/slice로 맞춤 vs 크롭 제어
- 패스 명령: M moveTo, L lineTo, C 큐빅 베지어, Q 쿼드라틱, A 호, Z 닫기 경로; 대문자 = 절대, 소문자 = 상대
- 보안 표면: 인라인 <script>, foreignObject, 외부 URL로의 xlink:href, onload/onclick 핸들러가 JavaScript로 실행
- sanitize: DOMPurify의 USE_PROFILES: { svg: true }로 서드파티 SVG 삽입 전 스크립트와 이벤트 핸들러 제거
- PNG 내보내기: Blob URL을 통해 SVG를 HTMLImageElement로 로드, canvas에 drawImage, canvas.toBlob('image/png')로 다운로드
- 브라우저 기준선: 2011년 이후 모든 상위 브라우저에서 SVG 1.1 지원; SVG 2 기능(텍스트 온 패스 개선)은 부분적 지원
예시
원
<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 마크업을 렌더링하고, 확대·이동을 지원하며, 소스 코드에 구문 강조를 적용해 보여 줍니다. 이미지 크기와 viewBox 정보도 함께 표시됩니다. 외부 SVG를 살펴보거나 path 데이터를 디버깅할 때, 프로젝트에 추가하기 전에 아이콘을 미리 볼 때 유용합니다.
SVG가 업로드되나요?
아니요. SVG는 마크업이므로 브라우저에서 직접 파싱하고 렌더링할 수 있어, 모든 처리가 로컬에서 끝납니다. 붙여넣은 코드는 네트워크로 전송되지 않습니다.
디자인 도구에서 본 모습과 다르게 보이는 이유는 무엇인가요?
SVG 렌더링 결과는 사용자 에이전트마다 다릅니다. 브라우저, Figma, Illustrator, Inkscape는 텍스트 렌더링, 필터 효과, 메시 그라디언트, 클립 패스 같은 일부 경계 사례를 서로 다르게 해석합니다. 이 뷰어는 브라우저의 처리 결과를 보여 주는데, 그것이 바로 HTML에서 최종 사용자가 보게 될 화면입니다.
여기에서 SVG를 편집할 수도 있나요?
왼쪽에서 소스 코드를 수정하고 다시 렌더링할 수 있습니다. 점을 끌어 옮기거나 path를 변경하는 등 시각적 편집이 필요하다면 Inkscape, Figma, Boxy SVG 같은 본격적인 SVG 에디터를 사용하세요. 이 페이지는 뷰어 기능에 텍스트 편집을 더한 정도입니다.
여기서 본 SVG를 어떻게 프로젝트에 가져가나요?
소스 코드를 복사하면 됩니다. 대부분의 프런트엔드 프레임워크는 JSX/HTML에 인라인 SVG를 그대로 받아들입니다. 배경으로 쓰려면 자산 폴더에 저장한 뒤 url(...)로 참조하고, 아이콘 폰트로 쓰려면 svgo와 스프라이트 생성기를 거치는 빌드 단계를 추가하세요.
SVG 파일 크기가 너무 큰 이유는 무엇인가요?
많은 SVG 파일에는 에디터 메타데이터(Adobe Illustrator XMP, Inkscape :inkscape: 네임스페이스), 사용하지 않는 defs, 주석, 장황한 path 데이터가 포함돼 있습니다. SVGO(웹 또는 CLI)로 정리하면 시각적 변화 없이 보통 30~70% 가량 작아집니다.
외부 리소스도 불러오나요?
대부분의 뷰어는 안전을 위해 외부 <image href>나 <use href>처럼 외부 URL을 가져오는 동작을 차단합니다. SVG가 외부 리소스에 의존한다면 비트맵은 data: URI로 임베드하고, 외부 href를 사용하는 <use>는 인라인 사본으로 변환하세요.