SVG Viewer & Editor

이 도구 소개

SVG 마크업을 붙여넣으면 브라우저 캔버스에서 즉시 렌더링 결과를 확인할 수 있습니다. SVG는 XML 기반의 벡터 형식으로 모든 화면 크기에서 완벽하게 확대됩니다.

배경 모드(체커·흰색·검정)를 통해 투명 영역과 색상 대비를 확인할 수 있습니다. 확대/축소로 세밀한 부분을 검토하세요.

사용 방법

1. 편집기 탭에 SVG 코드를 붙여넣거나 입력하세요.
2. 미리보기 탭으로 전환하여 렌더링 결과를 확인하세요.
3. 확대/축소와 배경을 조정하여 더 쉽게 검토하세요.
4. 준비가 되면 SVG 복사 또는 SVG 다운로드를 클릭하세요.

활용 사례

디자이너는 Figma나 Illustrator의 SVG 내보내기를 검증하고, 개발자는 인라인 SVG 마크업을 디버깅하며, 프론트엔드 엔지니어는 체커 배경으로 투명 영역을 확인합니다.

자주 묻는 질문

• SVG 코드가 서버로 전송되나요? — 아니요. 미리보기는 브라우저에서 완전히 렌더링됩니다. 아무것도 업로드되거나 저장되지 않습니다.
• SVG가 왜 비어 보이나요? — 루트 <svg> 요소에 viewBox 또는 명시적 width/height가 있는지, fill 색상이 배경과 다른지 확인하세요.
• 편집 후 다시 다운로드할 수 있나요? — 네. 편집기 탭에서 편집하고 미리보기에서 확인한 후 SVG 다운로드를 클릭하세요.