이 도구에 대하여
원본 SVG 마크업을 붙여넣으면 CSS나 HTML에 바로 넣을 수 있는 데이터 URI를 얻습니다. 두 가지 인코딩을 생성하며 모든 것이 브라우저에서 만들어지므로 아무것도 업로드되지 않습니다.
URL 인코딩 출력은 큰따옴표를 작은따옴표로 바꾸고, encodeURIComponent를 실행한 다음, 몇 가지 안전한 문자(공백, 콜론, 슬래시, 등호)를 복원해 간결하고 사람이 읽기 쉽게 유지합니다. base64 출력은 SVG를 UTF-8로 인코딩하고 btoa를 거쳐 data:image/svg+xml;base64,… 를 줍니다. 바이트 비교로 어느 인코딩이 더 작은지 보여주며, 대부분의 아이콘에서는 URL 인코딩 형태가 이깁니다.
압축을 켜면 인코딩 전에 주석을 제거하고 태그 사이의 공백을 접습니다. CSS에는 background-image 줄을, HTML에는 <img src> 줄을 복사하세요. SVG 안의 따옴표는 작은따옴표로 정규화되어 데이터 URI를 큰따옴표로 안전하게 감쌀 수 있습니다.
자주 묻는 질문
URL 인코딩과 base64 중 어느 것을 써야 하나요?
URL 인코딩은 대개 더 작고 읽기 쉽게 유지되어 디버깅에 도움이 됩니다. base64는 더 불투명하지만 어디서나 받아들여집니다; 크기 비교가 여기서 어느 것이 더 작은지 알려줍니다.
왜 제 큰따옴표가 작은따옴표로 바뀌었나요?
속성 따옴표가 작은따옴표로 변환되어 전체 데이터 URI를 이스케이프 없이 큰따옴표로 감싼 url("…")나 src="…" 안에 넣을 수 있습니다. 둘 다 SVG에서 유효합니다.
압축이 SVG 모양을 바꾸나요?
아니요. 태그 사이와 안의 주석을 제거하고 공백만 접습니다; 렌더링된 벡터는 동일하며 단지 더 작을 뿐입니다.
제 SVG가 어딘가로 업로드되나요?
아니요. 인코딩은 encodeURIComponent와 btoa로 전적으로 브라우저에서 실행되며, 마크업은 절대 기기를 떠나지 않습니다.