SVG 뷰어란?
SVG 뷰어는 브라우저에서 직접 Scalable Vector Graphics를 렌더링하여 소프트웨어 설치 없이 SVG 코드를 미리 보고, 검사하고, 검증할 수 있는 도구입니다. 아이콘, 일러스트레이션, 벡터 자산을 일상적으로 다루는 디자이너와 개발자에게 매우 유용합니다.
SVG 뷰어 사용 방법
- 입력 필드에 SVG 코드를 붙여넣으세요.
- “렌더링”을 클릭하면 SVG가 렌더링되고 메타데이터(크기, viewBox, 요소 수, 파일 크기)가 표시됩니다.
- 출력 아래에 SVG의 시각적 미리보기가 나타나 프로젝트에 삽입하기 전에 올바르게 표시되는지 확인할 수 있습니다.
주요 개념
SVG(Scalable Vector Graphics)는 2차원 벡터 이미지를 기술하기 위한 XML 기반 형식입니다. PNG나 JPEG 같은 래스터 형식과 달리, SVG는 픽셀이 아닌 수학적 경로로 정의되어 어떤 해상도에서도 완벽하게 선명합니다. viewBox 속성은 내부 좌표계를 제어하며, width와 height는 렌더링 크기를 설정합니다. viewBox 값을 올바르게 설정하면 모든 화면 크기에서 SVG가 비례적으로 확대/축소됩니다.
자주 묻는 질문
뷰어에서 SVG 코드를 편집할 수 있나요?
네. 편집기 패널에서 SVG 마크업을 직접 수정할 수 있습니다. 변경 사항이 미리보기에 즉시 반영되어 실시간 편집 환경을 제공합니다.
viewBox 속성이란 무엇이며 왜 중요한가요?
viewBox는 SVG의 내부 좌표 공간(min-x, min-y, width, height)을 정의합니다. 이를 통해 그래픽이 반응형으로 확대/축소됩니다. 올바른 viewBox가 없으면 SVG가 다른 크기에서 잘리거나 왜곡되어 보일 수 있습니다.
파일 크기 제한이 있나요?
뷰어는 일반적인 SVG 파일을 효율적으로 처리합니다. 수천 개의 path 요소가 포함된 매우 큰 파일(수 메가바이트)은 렌더링이 느려질 수 있지만, 대부분의 프로덕션 SVG는 문제없이 작동합니다.