SVG 뷰어 – SVG나 PNG를 온라인에서 미리보기·확대·내보내기
SVG 뷰어는 브라우저에서 SVG 마크업이 어떻게 렌더링되는지 확인하는 SVG 미리보기 도구입니다. SVG 콘텐츠를 붙여넣거나 드롭해 완전히 샌드박스 처리된 iframe에 표시하며, 스크립트는 제거됩니다. 확대·축소하고, 체커보드 배경을 전환해 투명도를 살펴본 뒤, SVG를 다운로드하거나 캔버스를 통해 PNG로 내보내세요.
SVG 뷰어는 브라우저에서 결과를 살펴볼 수 있도록 SVG 마크업을 렌더링하는 SVG 미리보기 온라인 도구입니다. SVG 콘텐츠를 붙여넣거나 드롭해 문서가 어떻게 보이는지 확인하세요. 소스 텍스트에만 의존하지 않아도 됩니다. 미리보기는 완전히 샌드박스 처리된 iframe에 표시되며 스크립트는 제거됩니다.
확대·축소해 다양한 배율로 렌더링된 이미지를 살펴보고, 체커보드 배경을 전환해 투명한 영역을 더 명확히 볼 수 있습니다. 끝나면 SVG를 다운로드하거나 캔버스를 통해 PNG로 내보내세요. 이 컨트롤 덕분에 SVG를 온라인에서 미리 보고 다음 작업에 맞는 출력을 선택하기 쉽습니다.
SVG는 벡터 이미지 형식이고, PNG는 래스터 이미지 형식입니다. 벡터 문서를 원하면 SVG로 유지하는 것이 유용하고, 미리보기를 래스터 버전으로 원하면 PNG로 내보내세요. 뷰어는 SVG 다운로드와 PNG 내보내기를 모두 지원하므로, 소스 형식을 살펴보고 필요할 때 PNG 출력을 만들 수 있습니다.
SVG 뷰어는 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드·저장·서버 전송되지 않습니다. 페이지가 로드된 후에는 서버 의존성 없이 오프라인에서도 동작합니다. 직접 만들지 않은 SVG를 살펴보거나, 렌더링 결과를 확인하거나, 입력을 다른 곳으로 보내지 않고 PNG를 내보내려는 개발자와 DevOps 엔지니어에게 유용합니다.
1단계: SVG 마크업을 붙여넣거나 SVG 파일을 도구에 드롭해 미리보기로 로드하세요.
2단계: 미리보기에서 렌더링된 SVG를 살펴보고 도형과 텍스트가 어떻게 보이는지 확인하세요.
3단계: 확대·축소해 다양한 배율로 SVG를 살펴보세요.
4단계: 체커보드 배경을 전환해 투명한 영역을 보기 쉽게 하세요.
5단계: SVG 파일을 다운로드하거나 캔버스를 통해 미리보기를 PNG로 내보내세요.
사용 사례: 직접 작성하지 않은 SVG 문서를 마크업만 읽고 이해하기 어려울 때 살펴보세요.
사용 사례: 문서를 소비하거나 표시하는 코드에 사용하기 전에 SVG가 어떻게 렌더링되는지 확인하세요.
사용 사례: 마크업 중 어떤 부분을 살펴보거나 편집해야 할지 파악하며 큰 SVG를 시각적으로 검토하세요.
사용 사례: 전체 이미지가 초기 배율에서 판단하기 어려울 때 확대해 SVG의 세부 사항을 살펴보세요.
사용 사례: 체커보드 배경을 켜서 투명한 영역을 확인하세요.
사용 사례: 원본 벡터 문서 대신 래스터 이미지가 필요할 때 SVG 미리보기를 PNG로 내보내세요.
사용 사례: 브라우저에서 살펴본 뒤 SVG를 다운로드하세요.