SVG → Base64
SVG를 HTML이나 CSS에 그대로 붙여 넣을 수 있는 데이터 URI로 바꿉니다 — Base64와, 대개 더 작은 URL 인코딩 형식을 나란히 보여 줍니다.
또는 클릭해서 찾기 — SVG만 가능
URL이 통하는 곳이면 어디서나 쓸 수 있습니다. 원본 파일보다 항상 3분의 1 정도 커집니다.
같은 이미지인데 보통 Base64보다 작습니다 — 게다가 읽을 수 있어 CSS를 디버깅할 때 도움이 됩니다.
요청 하나 줄이기
데이터 URI는 이미지를 HTML이나 CSS 안에 직접 넣기 때문에 브라우저가 그 이미지를 위해 두 번째 요청을 보내지 않습니다. 작은 아이콘에서는 이것이 곧바로 보이느냐, 한 박자 늦게 보이느냐의 차이입니다.
대가는 캐싱입니다. 인라인한 아이콘은 그것을 담은 모든 페이지마다 다시 내려받게 되고, 따로 캐시할 수도 없습니다. 첫 화면에 중요한 몇 개만 인라인하고 나머지는 파일로 두세요.
세 단계
.svg 파일을 고르세요 — 파일은 기기에 남습니다.
Base64 또는 URL 인코딩 데이터 URI를 복사하세요.
준비된 img 태그나 CSS 배경 규칙을 그대로 쓰세요.
간단한 답변
SVG는 텍스트이고 Base64는 무엇을 담든 약 33%를 불리기 때문에, 보통 URL 인코딩이 더 작습니다. URL 인코딩은 읽을 수도 있어 스타일시트 안에서 어떤 도형인지 알아볼 수 있습니다. 처리 과정 어딘가에서 원본 문자가 망가진다면 그때 Base64를 쓰세요.
Base64는 3바이트를 4글자로 인코딩하므로 3분의 1 증가는 피할 수 없습니다. 먼저 SVG 최적화 도구를 거쳐 보세요. 편집기 메타데이터와 지나치게 정밀한 좌표가 인코딩보다 더 큰 비중을 차지하는 경우가 많습니다.
네 — CSS 블록은 바로 붙여 넣을 수 있게 준비돼 있습니다. 큰따옴표 안에 URL 인코딩 형식을 쓰기 때문에, 인코더가 SVG 안의 큰따옴표를 작은따옴표로 바꿔 둡니다.
거의 항상 인코딩되지 않은 `#` 때문입니다. `#fff` 같은 색 값이 그 지점에서 URL을 끊어 버리고, 뒤에 오는 것은 모두 프래그먼트로 처리됩니다. 여기서 나오는 결과는 이미 이스케이프되어 있으니, 보통은 나중에 데이터 URI를 손으로 고칠 때 생기는 문제입니다.
아니요. 인코딩은 브라우저 안에서 이뤄지는 단순한 문자열 작업입니다.