도구 소개
SVG 뷰어는 파일의 너비와 높이, 내부 좌표 범위, 경로 및 그룹 수를 알아보기 쉽게 보여 줍니다. 요소 구조도 함께 확인할 수 있어 아이콘이나 일러스트, 다운로드한 이미지를 사용하기 전에 내용을 살펴보기에 좋습니다.
사용 방법
- SVG 파일을 선택하거나 전체 SVG 소스를 붙여 넣으세요.
- 보기를 누른 뒤 너비와 높이, viewBox, 파일 크기와 요소 수를 확인하세요.
- 구조 트리를 펼쳐 각 부분을 살펴보거나 소스 영역에서 원본 텍스트를 찾아보세요.
- 안전 안내를 읽고 정적 미리보기에서 그림이 제대로 표시되는지 확인하세요.
주요 기능
- 너비, 높이, viewBox와 함께 요소, 경로, 그룹, 그라디언트, symbol의 개수를 표시합니다.
- 소스는 텍스트로 표시되며 구조 트리는 펼치거나 접을 수 있습니다. 보기 작업은 입력 파일을 변경하지 않습니다.
- 원본 내용과 안전한 미리보기를 구분해 보여 주며, 제거된 내용이 있으면 알려 줍니다.
소스 보기와 미리보기의 차이
- 소스 영역에는 주석과 미리보기에서 제거될 수 있는 내용까지 입력한 텍스트가 그대로 남습니다. 텍스트가 보인다고 해서 해당 내용이 페이지에서 실행되는 것은 아닙니다.
- 미리보기에는 지원되는 정적 그래픽만 표시됩니다. 배경을 바꾸거나 확대해서 자세히 보려면 SVG 미리보기를 이용하세요.
SVG 안전 안내
미리보기에는 안전하게 처리한 정적 사본을 사용합니다. 스크립트, 클릭 이벤트와 애니메이션을 실행하지 않으며 외부 이미지, 글꼴과 스타일도 불러오지 않습니다. 외부 참조, 삽입된 웹페이지와 지원되지 않는 내용은 제거되므로 원본과 다르게 보일 수 있습니다. DOCTYPE이나 사용자 정의 엔티티가 포함된 문서는 지원하지 않습니다.
SVG 파일 또는 UTF-8 소스는 최대 2 MiB, 노드는 요소와 텍스트를 포함해 최대 20,000개, 중첩 깊이는 최대 96단계까지 허용됩니다. 내용이 너무 크거나 구조가 복잡하면 파일을 단순하게 정리한 뒤 사용하세요.
개인정보 보호
SVG 내용은 사용자의 브라우저에서만 처리되며 서버에 업로드되지 않습니다.
입력과 결과는 자동으로 저장되지 않습니다. 지우거나 페이지를 떠나기 전에 필요한 파일을 다운로드하고 원본 사본도 보관하세요.
자주 묻는 질문
SVG 파일이란 무엇인가요?
SVG는 XML로 그래픽을 표현하는 파일 형식으로, 경로, 도형, 텍스트와 그라디언트를 담을 수 있습니다. 벡터 부분은 대체로 확대해도 픽셀 때문에 가장자리가 거칠어지지 않습니다.
SVG에는 왜 코드가 들어 있나요?
SVG는 태그가 있는 텍스트로 그림을 기록하며 스크립트, 이벤트나 외부 참조가 포함될 수도 있습니다. 이런 내용을 텍스트로 보는 것과 실제로 실행하는 것은 서로 다릅니다.
SVG 뷰어가 스크립트를 실행하나요?
아니요. 소스와 구조 트리는 텍스트로 보여 주고, 미리보기에는 스크립트와 상호작용 요소를 제거한 정적 사본을 사용합니다.
SVG에 포함된 외부 리소스를 불러오나요?
외부 이미지, 글꼴이나 스타일은 불러오지 않습니다. 이러한 리소스가 필요한 부분은 표시되지 않을 수 있으며, 제거된 내용은 안내로 알려 줍니다.