도구
가이드

SVG 뷰어 & 압축

이미지

브라우저에서 SVG를 미리보고 주석, <metadata>, Inkscape·Sodipodi 네임스페이스, 태그 사이 공백을 제거합니다. 전후 바이트 수와 viewBox 정보를 실시간으로 표시. 업로드 없음.

100% 클라이언트 백엔드 없음

원격 URL은 가져오지 않습니다. JSON을 직접 붙여넣으세요.

입력
출력
미리보기
·
뷰박스:

미리보기는 <img> 태그로 렌더링되어 SVG 내 스크립트가 실행되지 않습니다. 데이터는 브라우저를 떠나지 않습니다.

SVG를 붙여넣어 미리보기·최적화하세요.
이 페이지에서

SVG 뷰어 & 압축이란?#

SVG는 웹에서 아이콘, 로고, 라인 아트에 선택되는 포맷입니다. 어떤 크기에서도 선명하고 텍스트로 편집할 수 있습니다. 하지만 디자인 도구가 내보낸 SVG 파일에는 쓰레기가 많이 섞여 있습니다. Inkscape와 Sodipodi 편집기 네임스페이스, <metadata> 블록, 작성 주석, 태그 사이의 공백입니다. 이런 짐은 파일을 부풀리고 소스를 읽는 사람에게 골칫거리를 줍니다. SVG 압축 도구는 렌더링에 영향을 주지 않는 것을 벗겨 내고 얼마나 절약했는지 보고합니다.

이 페이지는 뷰어이자 압축 도구입니다. 왼쪽에 SVG 소스를 붙여넣고, 오른쪽에서 렌더링을 보고, 압축으로 전환해 주석, 메타데이터, 편집기 네임스페이스, 태그 사이 공백을 제거하는 직접 작성한 정리 패스를 실행한 뒤 바이트 절약을 읽으세요. 미리보기는 이미지 데이터 URI를 통해 렌더링되어 SVG에 포함된 어떤 스크립트도 실행되지 않으므로, 신뢰할 수 없는 파일도 안전하게 검사할 수 있습니다.

사용 방법#

  1. 왼쪽 입력 창에 SVG를 붙여넣거나, 예제를 클릭해 작은 예시를 불러오세요.
  2. 출력 창과 미리보기가 즉시 갱신됩니다. 기본적으로 도구 모음은 압축에 있으므로 출력은 정리되고 더 작은 SVG입니다.
  3. 출력에 원본, 손대지 않은 소스를 표시하려면 원본으로 전환하세요(압축 버전과 비교하는 데 유용).
  4. 창 아래의 통계 패널을 읽습니다.
    • 이전: N 바이트 / 이후: N 바이트 / 절약 — 입력과 출력의 UTF-8 크기, 그리고 절감된 백분율.
    • 제거 요약 — 주석, 메타데이터 블록, 편집기 요소, 편집기 속성, 공백 노드가 각각 몇 개씩 제거되었는지.
    • 뷰박스 — 루트 <svg>에서 읽은 width / height / viewBox 기하 정보. 아트보드 크기를 한눈에 확인할 수 있습니다.
  5. 출력 창의 복사나 다운로드로 압축된 SVG를 가져가세요. 지우기로 양쪽 창을 모두 비웁니다.

주요 특징#

  • 처음부터 직접 작성한 진짜 압축 도구, svgo가 아닙니다. svgo는 표준 Node 도구지만 Node의 fs와 path에 의존해서 브라우저에서는 깨끗하게 실행되지 않습니다. 이 페이지는 자체 트리 순회를 제공하므로 서버 측 의존성 없이 작동합니다.
  • 다섯 종류의 쓰레기 제거. 주석, <metadata> 블록, Inkscape/Sodipodi 네임스페이스 요소와 속성, 태그 사이 공백. 각각 개수 세어 보고합니다.
  • 텍스트를 인식하는 공백 처리. <text>, <tspan>, <title>, <desc>, <style>, <script> 안의 공백은 보존되어 라벨과 임베드된 CSS가 정리 패스를 살아남습니다.
  • 안전한 미리보기. 렌더는 데이터 URI를 가진 <img>를 사용하고 브라우저는 이를 실행하지 않는 이미지로 취급합니다. SVG에 포함된 스크립트는 실행되지 않습니다. 위험 없이 신뢰할 수 없는 파일을 붙여넣을 수 있습니다.
  • 정직한 바이트 계산. 크기는 UTF-8 바이트로 측정됩니다(문자 수가 아님). 그래서 CJK 텍스트나 이모지가 있는 파일은 실제 전송 크기를 보고합니다.
  • 100% 로컬. 파싱과 직렬화가 브라우저에서 일어납니다. SVG는 페이지를 떠나지 않습니다.

실제 예시#

일반적인 Inkscape 내보내기는 실제 아트 앞에 여러 줄의 편집기 네임스페이스 선언과 <metadata> 블록으로 시작할 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

붙여넣고 모드를 압축에 둔 채면 출력은 다음으로 축소됩니다.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

통계 패널은 대략 이전 ~520 바이트, 이후 ~210 바이트, ~60% 절약을 보고하며, 제거 요약에는 주석 1개, 메타데이터 블록 1개, 편집기 속성 1개(inkscape:connector-curvature)가 표시됩니다. 체크표시는 미리보기에서 동일하게 렌더링됩니다. 그림에 영향을 주는 것은 아무것도 제거되지 않았습니다.

FAQ#

SVG에 포함된 스크립트가 실행되나요?#

아니요. 미리보기는 <img src="data:image/svg+xml;base64,…">로 렌더링되고, <img>로 불러온 이미지는 스크립팅 컨텍스트가 아닙니다. 브라우저는 그 SVG 안의 어떤 <script>도 실행하지 않습니다. 그래서 직접 만들지 않은 SVG 파일을 검사하기에 안전합니다. 단, 원본 <script> 태그는 압축된 출력에 보존되며, 실행 여부는 나중에 SVG를 어떻게 임베드하느냐에 달립니다.

그냥 svgo를 쓰면 안 되나요?#

svgo는 Node 빌드 파이프라인에서는 알맞은 도구지만, Node의 fs와 path 모듈에 의존해서 브라우저 탭에서는 깨끗하게 실행되지 않습니다. 이 페이지의 압축 도구는 Node 의존성 없는 자체 포함 트리 순회라 완전히 클라이언트 측에서 작동합니다. svgo의 가장 깊은 압축보다는 덜 공격적이라는 대가가 있습니다.

내 파일에서 절약이 적어요.#

이미 손으로 작성된 파일(편집기 네임스페이스, 메타데이터, 주석 없음)은 제거할 것이 적어서 절약이 몇 퍼센트에 그칠 수 있습니다. 가장 큰 이득은 디자인 도구 내보내기(Inkscape, Illustrator)에서 오는데, 쓰레기의 대부분이 바로 거기서 발생하기 때문입니다.

압축하면 SVG 렌더링이 바뀌나요?#

아니요, 이 도구가 제거하는 종류에 한해서입니다. 주석, 메타데이터, 편집기 네임스페이스, 태그 사이 공백은 렌더링 의미를 가지지 않습니다. 텍스트 요소(<text>, <title>, <desc>, <style>, <script>) 안의 공백은 의미를 가질 수 있으므로 의도적으로 보존됩니다.