SVG를 Base64로 변환

작은 SVG 아이콘을 데이터 URI로 넣으면 HTTP 요청이 하나 줄고 스타일시트나 컴포넌트가 스스로 완결됩니다. 이 도구는 SVG 파일이나 붙여넣은 SVG 코드를 두 가지 데이터 URI, 즉 마크업을 읽을 수 있게 유지하며 보통 더 작은 URL 인코딩과 Base64로 바꾸고, 바로 붙여넣을 CSS background-image와 HTML img 코드 조각 및 각각의 크기를 보여 줍니다. 코드가 정말 SVG인지 확인하고, 없으면 데이터 URI가 표시되지 않는 xmlns도 보충해 줍니다.

사용 방법

1. .svg 파일을 끌어다 놓거나 SVG 코드를 붙여넣습니다.
2. "가볍게 최소화"를 켜 두면 XML 선언, 주석, 불필요한 공백을 지웁니다.
3. CSS와 HTML 코드 조각에 쓸 데이터 URI 종류를 고릅니다.
4. 필요한 결과를 복사합니다. 크기를 보면 어느 쪽이 더 짧은지 알 수 있습니다.

계산식

URL 인코딩: data:image/svg+xml, + SVG(SVG에 '가 없으면 "를 '로 바꿈)에서 %, #, <, >, {, }, &, ", \, ^, `, |, 제어 문자, 비ASCII 문자만 퍼센트 인코딩(UTF-8). Base64: data:image/svg+xml;base64, + UTF-8 바이트의 Base64(3바이트당 4문자).

브라우저는 따옴표로 감싼 url("…")나 src="…" 안의 이스케이프하지 않은 공백, 다른 종류의 따옴표, =, /를 받아 주므로 꼭 필요한 것만 URL 인코딩하면 짧게 유지됩니다. #은 조각 식별자가 되므로 항상 이스케이프해야 하고 %도 마찬가지입니다. 최소화는 공백 한 칸을 남기므로 <text> 내용은 바뀌지 않습니다.

예시

163바이트짜리 테스트 SVG는 URL 인코딩 데이터 URI로 202자(# 두 개가 %23으로, < 와 > 일곱 개가 %3C 또는 %3E로 바뀜)지만 Base64 데이터 URI는 246자입니다. 4 × ⌈163 ÷ 3⌉ = 220 Base64 문자에 접두사 26자를 더한 값입니다.