개발자 / SVG 검사
SVG 뷰어: SVG 검사, 크기 조정 및 복사
확대/축소 및 배경 설정으로 SVG 코드를 로컬에서 확인합니다. 크기와 색상 토큰을 검사하고, 너비와 높이를 편집하며, viewBox를 수정하고 data URI를 다운로드하거나 복사합니다.
SVG 뷰어: SVG 검사, 크기 조정 및 복사: SVG의 크기, viewBox, 요소 수, 바이트 크기 및 명시적으로 사용된 색상을 읽습니다. 정제한 후 요청된 루트 크기 속성만 편집합니다. viewBox가 없으면 원본 크기를 기준으로 채울 수 있으며, 반응형 모드에서는 viewBox를 유지하고 너비와 높이 속성을 제거합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
SVG 뷰포트 및 viewBox
viewBox는 최소 x, 최소 y, 너비 및 높이의 네 숫자로 구성됩니다. 너비와 높이는 양수여야 합니다. 사양: https://www.w3.org/TR/SVG2/coords.html
크기 조정 및 로컬 미리보기
절대 길이는 1인치당 96 CSS 픽셀을 기준으로 변환됩니다. 미리보기 확대/축소와 배경은 내보낸 마크업을 변경하지 않습니다. SVG 이미지 처리 규칙: https://www.w3.org/TR/SVG2/conform.html
사용 방법
- SVG를 놓거나 코드를 붙여넣어 정제된 미리보기를 검사합니다.
- 가로세로 비율 잠금 여부를 선택해 크기를 설정하고, viewBox를 조정하거나 반응형 사용을 위해 크기 속성을 제거합니다.
- SVG를 다운로드하거나 코드를 복사하고 인코딩된 data URI를 복사합니다.
개인정보 보호 및 제한사항
SVG는 로컬에서 처리되고 격리된 이미지로 렌더링됩니다. 스크립트, 이벤트 핸들러 및 외부 리소스는 제거됩니다.
관련 도구
자주 묻는 질문
viewBox를 변경하면 그림도 변경되나요?
보이는 좌표 영역이 변경됩니다. 표시 크기만 변경할 때는 기존 viewBox를 사용하십시오. 다른 viewBox를 사용하면 보이는 그림이 잘리거나 위치가 이동할 수 있습니다.
크기가 누락되면 어떻게 되나요?
뷰어는 viewBox 크기를 사용한 다음 300 × 150 픽셀을 대체값으로 사용합니다. 절대 물리 길이는 인치당 96 픽셀을 사용하며, 상대 길이는 정확히 계산하려면 이를 포함하는 페이지가 필요합니다.
반응형 모드에서 너비와 높이를 제거하는 이유는 무엇인가요?
viewBox가 좌표계를 유지하고, 주변 레이아웃이 표시 크기를 제어하기 때문입니다.
data URI를 복사할 수 있나요?
예. data URI에는 URI 인코딩이 적용된 정제된 출력 SVG가 포함됩니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요