SVG 최적화 도구는 주석, <script>, <foreignObject>, <iframe>, <object>, <embed>, <audio>, <video>, 외부 네임스페이스 요소를 지우고 줄어든 바이트를 보여 줍니다. inkscape:label 같은 네임스페이스 속성은 남기며, xml:space="preserve"나 white-space: pre로 지정한 텍스트는 공백을 줄이지 않습니다.
<style> 블록은 기본으로 유지됩니다. 인라인을 켜도 미디어·supports·layer·container·scope 규칙, 복잡한 선택자, <style media> 중 하나라도 있으면 CSS 종속성을 보존하려고 파일 전체의 인라인을 건너뜁니다.
결과 영역은 정리 전후 바이트 크기를, 렌더 영역은 원본과 최적화 파일을 겹쳐 놓고 끌 수 있는 손잡이로 비교해 보여 줍니다. 두 파일을 래스터로 그려 다른 픽셀이 있는지도 알려 줍니다. 모든 처리는 브라우저 안에서 이루어지며 붙여 넣은 SVG는 업로드되지 않습니다. 이 도구는 의도적으로 작은 정리기이고 경로 최적화 도구가 아닙니다. 좌표 반올림이나 경로 병합은 하지 않으므로 이미 간결한 파일에서는 줄어드는 양이 크지 않습니다.
사용 방법
SVG 소스 붙여 넣기 또는 끌어놓기
전체 마크업을 소스 입력란에 붙여 넣거나
.svg파일을 끌어다 놓으세요.<svg루트 요소가 없으면 오류가 납니다. 예제 칩으로 대표적인 파일 네 가지를 불러올 수 있습니다.스타일 인라인 여부 선택
스타일 규칙 인라인을 끄면
<style>블록을 그대로 둡니다. 단순한 스타일에만 켜세요. 옮길 수 없는 규칙이나<style media>가 하나라도 있으면 전체 인라인을 건너뜁니다.줄어든 양 확인
입력하는 대로 결과가 갱신됩니다. 정리 전후는 파일 크기인 UTF-8 바이트로 표시되고, 줄어든 비율은 퍼센트로 올라가며 나타납니다.
렌더 비교
렌더 영역의 손잡이를 끌거나 포커스를 두고 방향키를 누르세요. 원본과 최적화 파일이 같은 픽셀을 그리는지, 아니면 몇 퍼센트가 다른지 배지가 알려 줍니다.
복사 또는 내려받기
결과 상자에서 마크업을 복사하거나
svgbox-clean.svg파일로 내려받습니다. 배포 전에 실제로 쓸 곳에서 한 번 확인하세요.
작동 원리
무엇을 지우고 무엇을 남기는가
XML 요소 트리에서 주석과 위험 요소뿐 아니라 sodipodi:namedview, rdf:RDF 같은 외부 네임스페이스 요소도 지웁니다. 래스터 이미지 데이터와 임베디드 글꼴의 data:font/* URL은 남깁니다. 5 MiB를 넘거나 올바른 XML이 아닌 입력은 오류로 알려 줍니다.
태그 사이와 반복된 공백을 줄이지만 xml:space="preserve", white-space: pre, white-space: break-spaces가 있으면 텍스트를 건드리지 않습니다. 루트에 xmlns="http://www.w3.org/2000/svg"가 없으면 독립 파일이나 <img>에서 렌더되지 않을 수 있다는 안내를 보여 줍니다.
| 지우는 것 | 남기는 것 |
|---|---|
<!-- 주석 --> | 도형, 경로, 그룹, 텍스트, defs, 그라데이션 |
<script>, <foreignObject>, <iframe>, <object>, <embed>, <audio>, <video>, 외부 네임스페이스 요소 | <style> 블록(요청하면 style 속성으로 인라인) |
onclick, onload 등 on... 속성 | <title>, <desc>, <metadata>, inkscape:label 같은 네임스페이스 속성 |
javascript:, vbscript:, data:image/svg+xml 대상의 href / xlink:href / src | #id 참조, http(s)·상대 경로 링크, PNG/JPEG/GIF/WebP data: 이미지 |
| 태그 사이 공백, 반복된 공백 | <text> 안의 공백 |
스타일 인라인이 동작하는 방식
단순한 태그·클래스·id 선택자는 모든 규칙이 CSS 종속성을 보존할 때만 인라인합니다. @media, @supports, @layer, @container, @scope, 가상·결합 선택자, <style media>가 있으면 모든 style 블록을 남깁니다. @font-face와 @keyframes만 있는 경우에는 단순 규칙의 인라인을 막지 않으며 임베디드 글꼴 URL도 남습니다.
클래스를 한 번씩만 쓰면 인라인한 파일이 약간 작아지고, 여러 요소에 쓰면 선언이 반복되어 오히려 커집니다. 선택하기 전에 바이트 수를 비교해 보세요.
SVG가 실행 코드를 담을 수 있는 이유
SVG는 XML이며 규격상 이미지 안에 스크립트, 이벤트 핸들러, 링크를 넣을 수 있습니다. SVG를 직접 열거나 페이지에 인라인으로 넣으면 이 코드가 페이지 권한으로 실행될 수 있습니다. <img> 태그로 불러오면 스크립트가 꺼지지만 인라인 SVG는 그렇지 않습니다. 출처가 불분명한 파일을 인라인하기 전에 <script>, on* 속성, 스크립트나 SVG 데이터를 가리키는 링크를 지우는 것은 합리적인 첫 단계입니다. 일반 https:// 링크는 남으므로 게시하기 전에 직접 확인하세요.
다만 이 도구는 의도적으로 작게 만든 정리기이지 완전한 살균기가 아닙니다. 파일을 XML로 파싱해 알려진 위험 요소·속성·링크 대상을 지우지만 특이한 구문까지 모두 알 수는 없으므로, 실제 서비스에서 사용자가 올린 파일을 받는다면 서버에서 유지보수되는 라이브러리로 살균하고 엄격한 Content-Security-Policy로 제공해야 합니다.
실제 예시
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- exported by design tool -->
<circle cx="50" cy="50" r="40" fill="#1746d1"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#1746d1"/></svg>
154 -> 115 바이트<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<script>alert(1)</script>
<a xlink:href="javascript:alert(2)"><path d="M0 0h24v24H0z" onclick="x()"/></a>
<use xlink:href="#a"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><a><path d="M0 0h24v24H0z"/></a><use xlink:href="#a"/></svg>
245 -> 163 바이트내부 참조 #a는 남습니다. href만 지워지므로 빈 <a> 래퍼는 그대로 남습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><style>.a{fill:red}</style><rect class="a" width="10" height="10"/></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><style>.a{fill:red}</style><rect class="a" width="10" height="10"/></svg>
133 -> 133 바이트지울 것이 없고 rect는 빨간색 그대로입니다. 렌더 비교는 픽셀이 동일하다고 알려 줍니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><style>.a{fill:red}</style><rect class="a" width="10" height="10"/></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><rect class="a" width="10" height="10" style="fill:red"/></svg>
133 -> 123 바이트규칙이 요소로 옮겨지고 비어 버린 style 블록은 사라집니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60">
<text x="14" y="36">
<tspan font-weight="700">Save</tspan> <tspan fill="#38bdf8">bytes</tspan>
</text>
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60"><text x="14" y="36"> <tspan font-weight="700">Save</tspan> <tspan fill="#38bdf8">bytes</tspan> </text></svg>
179 -> 169 바이트두 tspan 사이의 공백이 남아서 단어가 붙어 보이지 않습니다.
<div>hi</div><svg> 루트 요소를 찾을 수 없습니다. <svg …>로 시작하는 전체 파일을 붙여 넣어 주세요.자주 하는 실수
인라인하면 파일이 더 커질 수 있습니다
스무 개 요소에 쓰인 클래스는 같은 선언이 스무 번 복사됩니다. style 블록에 기대지 않는 요소가 필요할 때만 스타일 규칙 인라인을 켜고 바이트 수를 확인하세요.
인라인할 수 없는 규칙은 남습니다
prefers-color-scheme같은 미디어 쿼리,:hover, 후손·자식 선택자,<style media>가 하나라도 있으면 전체 인라인을 건너뛰고 모든 style 블록을 그대로 둡니다.@font-face와@keyframes만 있는 경우에는 단순 규칙을 인라인할 수 있습니다.일부 링크 대상만 남습니다
<image href="javascript:...">나<image href="data:image/svg+xml,...">는href가 지워집니다. 상대 경로와https://이미지는 남으므로 미리보기가 네트워크에서 불러올 수 있습니다. 파일을 자체 완결로 만들려면 PNG·JPEG·GIF·WebP를data:URI로 포함시키세요. 렌더 비교에서 차이로 드러납니다.바이트는 UTF-8 바이트입니다
표시되는 숫자는 파일이 디스크에서 차지하는 크기입니다. 한글 같은 문자는 글자당 2~4바이트라서 한국어 라벨은 글자 수로 짐작하는 것보다 더 많은 바이트를 더합니다.
보안을 보장하지는 않습니다
이 도구는 알려진 구문만 제거하므로 특이한 구문을 놓칠 수 있습니다. 출처가 불분명한 SVG를 그대로 화면에 그려도 안전하다고 보지 말고, 서버 쪽 살균 처리와 Content-Security-Policy를 함께 쓰세요.
자주 묻는 질문
SVG 파일 용량은 어떻게 줄이나요?
주석, 들여쓰기, 안 쓰는 요소를 지우고 경로 데이터를 줄이며 gzip이나 Brotli로 압축해 전송하면 됩니다. 이 도구는 주석, 실행 코드, 공백 정리를 맡습니다. 경로 단순화는 정리한 뒤 전용 최적화 도구로 이어서 하세요.
경로 데이터를 줄이거나 좌표를 반올림해 주나요?
아니요. 경로 명령과 숫자는 그대로 둡니다. 주석, 실행·임베드 요소, 외부 네임스페이스 요소, 이벤트 속성, 위험한 링크를 지우고 보존 지정이 없는 공백을 줄이며, 선택하면 단순한 스타일을 인라인합니다.
CSS 클래스와 색이 그대로 유지되나요?
네. <style> 블록은 기본으로 유지됩니다. 단순한 규칙을 요소로 인라인할 수도 있고, 바뀐 것이 있는지는 렌더 비교가 알려 줍니다.
SVG 파일에도 스크립트가 들어갈 수 있나요?
네. SVG는 <script> 요소, on* 이벤트 속성, 링크를 허용하며 파일을 직접 열거나 페이지에 인라인할 때 실행될 수 있습니다. <img> 태그로 불러오면 실행되지 않습니다.
SVG가 어딘가로 업로드되나요?
아니요. 마크업은 브라우저 안에서 처리되고 비교용 렌더도 로컬에서 그려지며 서버로 전송되지 않습니다.
SVG 루트를 찾을 수 없다는 오류는 무슨 뜻인가요?
붙여 넣은 텍스트에 <svg 여는 태그가 없어서 정리할 대상이 없다는 뜻입니다. 루트 요소부터 시작하는 전체 파일을 붙여 넣으세요.
마지막 업데이트: