SVGView

SVG 온라인 뷰어

SVG 파일을 즉시 미리 보고, viewBox 및 치수를 검사한 다음 동일한 워크플로에서 편집을 시작하세요.

SVG 뷰어 기능

정밀한 줌 및 팬

SVG 파일을 온라인으로 열고 확대/축소 또는 이동하여 모든 규모의 세부 정보를 검사하세요. SVG 뷰어를 사용하여 아이콘의 획 정렬, 앤티앨리어싱 및 픽셀 스냅을 확인하세요. 키보드 단축키와 트랙패드 제스처를 사용하면 여러 크기를 쉽고 빠르게 비교할 수 있습니다.

배경 옵션

SVG 파일 뷰어를 사용하면 투명, 밝은 또는 어두운 배경을 전환하여 가장자리와 투명도를 확인할 수 있습니다. 이를 통해 후광, 잘못된 경로 또는 잘린 그림자를 쉽게 볼 수 있습니다. 체커보드 배경은 미묘한 알파 페이드 및 오버레이에 유용합니다.

화면에 맞춤 또는 1:1

화면에 맞춤 및 실제 크기 보기는 실제 UI 컨텍스트에서 자산이 렌더링되는 방식을 판단하는 데 도움이 됩니다. 아이콘 그리드 정렬 및 간격을 확인하는 데 유용합니다. 웹 및 모바일 아이콘의 픽셀 정렬을 확인하려면 1:1 모드를 사용하세요. 로고를 확인할 때 1:1를 브랜드 가이드라인과 비교하여 정확성을 확인하세요.

메타데이터 검사기

SVG 뷰어 표면 너비, 높이, viewBox 및 파일 크기가 투명 패널에 표시됩니다. SVG 뷰어는 또한 누락된 속성에 플래그를 지정하여 크기 조정 문제를 조기에 해결할 수 있습니다. viewBox 또는 너비/높이 누락에 대한 경고는 레이아웃 변경을 방지하는 데 도움이 됩니다.

안전한 렌더링

SVG 뷰어는 렌더링하기 전에 스크립트와 안전하지 않은 태그를 제거합니다. 이는 미리보기를 안전하게 유지하고 외부 파일을 열 때 예기치 않은 동작을 방지합니다. 외부 참조는 무시되므로 예기치 않은 네트워크 호출이 발생하지 않습니다.

로컬, 즉시 미리보기

이 도구는 전적으로 브라우저에서 실행되므로 파일이 장치를 떠나지 않습니다. 로컬 처리를 통해 많은 자산을 검토하는 경우에도 미리보기 속도가 빨라집니다. 또한 잠겨 있는 네트워크와 오프라인 환경에서도 잘 작동합니다.

SVG 파일을 온라인으로 보는 방법

1

SVG 추가

파일을 끌어서 놓거나 클릭하여 찾아보거나 SVG 마크업을 붙여넣어 SVG 파일을 온라인으로 엽니다. SVG 뷰어는 소스를 로컬로 로드하고 원본 viewBox을 그대로 유지합니다. SVG에서 기호를 사용하는 경우 기호를 확장하여 각 아이콘을 명확하게 미리 볼 수 있습니다.

2

미리보기 및 검사

온라인으로 SVG 뷰어를 사용하여 치수와 viewBox 값을 확인하면서 배경을 확대/축소, 이동 및 전환할 수 있습니다. 내보내거나 최적화하기 전에 SVG 파일을 온라인으로 미리 보고 레이아웃을 확인하세요.

3

편집 또는 내보내기

관련 도구를 열어 자산을 최적화, 크기 조정 또는 변환합니다. SVG Viewer를 사용하면 내보내기 단계로 이동하기 전에 문제를 쉽게 찾을 수 있습니다. 반복적인 내보내기를 방지하려면 메타데이터 문제를 조기에 수정하세요.

SVG Viewer FAQ

빠른 QA를 위해 이 무료 SVG 뷰어를 온라인으로 사용하세요. SVG 파일을 열고 viewBox, 치수 및 투명도를 검사한 다음 하나의 로컬 워크플로우에서 이동하여 편집, 최적화 또는 변환할 수 있습니다.

온라인 무료 SVG 뷰어인가요?
그렇습니다. 이는 viewBox, 크기 및 투명도를 포함하여 SVG 파일을 빠르게 미리 보고 검사할 수 있는 무료 SVG 온라인 뷰어입니다.
SVG을 미리 본 다음 편집하거나 최적화할 수 있나요?
그렇습니다. 먼저 미리 본 다음 파일을 다시 업로드하지 않고도 동일한 작업 흐름에서 편집 또는 최적화로 이동할 수 있습니다.
이 SVG 뷰어를 사용하면 파일이 업로드됩니까?
아니요. 파일은 브라우저에서 로컬로 처리되므로 SVG 자산은 기기에 유지됩니다.
이 SVG 뷰어에서 무엇을 검사할 수 있나요?
너비, 높이, viewBox, 파일 크기 및 투명도 컨텍스트를 확인하여 크기 조정 및 레이아웃 문제를 신속하게 파악할 수 있습니다.
내보내기 전에 SVG 투명도를 확인할 수 있나요?
그렇습니다. 알파 에지와 숨겨진 아티팩트를 확인하려면 체커보드, 밝은 배경, 어두운 배경 사이를 전환하세요.
SVG 뷰어는 스크립트를 어떻게 처리합니까?
안전하지 않은 스크립트와 태그는 렌더링 전에 제거되므로 타사 SVG 파일을 보다 안전하게 검사할 수 있습니다.
SVG 코드를 직접 미리 볼 수 있나요?
그렇습니다. SVG 마크업을 붙여넣어 렌더링하고 검사한 다음 viewBox 및 크기를 확대/축소하고 이동하고 확인하세요.
SVG 뷰어를 다운로드해야 합니까?
아니요. SVGView는 브라우저에서 실행되므로 설치하거나 다운로드할 것이 없습니다. 파일은 로컬에 유지됩니다.
이 SVG 뷰어를 온라인으로 사용하려면 계정이 필요합니까?
아니요. SVGView는 가입 없이 브라우저에서 실행되며 파일은 로컬에 유지됩니다.
이 SVG 뷰어가 대용량 SVG 파일을 열 수 있습니까?
예, 대부분의 파일은 빠르게 로드됩니다. 매우 복잡한 SVG는 장치에 따라 렌더링 속도가 느려질 수 있으므로 먼저 최적화하여 보다 부드러운 미리보기를 수행하세요.
온라인으로 SVG 파일 뷰어인가요, 아니면 SVG 리더인가요?
그렇습니다. SVGView를 사용하면 SVG 파일을 온라인으로 열어 다운로드하지 않고도 viewBox 및 치수를 미리 보고 검사하고 확인할 수 있습니다.
미리보기 후에 내보내거나 변환할 수 있나요?
그렇습니다. 미리 본 후에는 다시 업로드하지 않고도 동일한 SVG를 계속해서 최적화, 크기 조정 또는 변환할 수 있습니다.

관련 SVG 도구

검사 후 자산을 최적화, 변환 및 재사용하려면 이러한 도구와 함께 SVG 뷰어를 사용하세요.

SVG 에디터

SVG Viewer로 파일 상태를 확인한 뒤 편집, 최적화, 내보내기를 이어서 진행하세요.

도구 열기

SVG 최적화 도구

SVG 뷰어가 메타데이터를 확인한 후 자산을 압축하여 크기를 줄입니다.

도구 열기

SVG to PNG

빠른 미리보기나 문서용으로 배율 및 배경 옵션과 함께 PNG를 내보냅니다.

도구 열기

SVG to React

검사된 SVG를 UI 프로젝트용 재사용 가능한 React 구성 요소로 전환합니다.

도구 열기

SVG 애니메이션 미리보기

SMIL 또는 CSS 애니메이션을 재생하고 모션 자산을 배송하기 전에 타이밍을 확인하세요.

도구 열기

관련 SVG 블로그

SVG 워크플로, 문제 해결, 프로덕션 실무에 관한 글을 계속 읽어 보세요.