SVG를 Base64로

SVG를 Base64로 변환하는 방법

1. .svg 파일을 상자에 놓거나 파일 선택기로 고르세요.
2. 출력 형식은 CSS background-image로 시작합니다. 다른 형태가 필요하면 Data URI, HTML <img>, Markdown, 일반 Base64로 바꾸세요.
3. 출력 복사를 누르고 규칙을 스타일시트에 붙여넣으세요.

SVG는 저장된 그대로 인코딩됩니다. 벡터에는 필요 없으므로 크기 조절이나 품질 옵션은 없습니다. 더 짧은 문자열을 원하면 먼저 SVG 최적화 도구를 거치세요. 편집기 메타데이터를 지우는 것이 어떤 인코딩을 고르는 것보다 더 많이 줄여 주는 경우가 많습니다.

Base64와 URL 인코딩 SVG

SVG는 텍스트이므로 굳이 Base64일 필요가 없습니다. 몇몇 문자만 퍼센트 인코딩하면 data URI에 마크업을 그대로 담을 수 있습니다. 같은 104바이트짜리 삼각형 아이콘을 두 방식으로 쓰면 다음과 같습니다.

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

URL 인코딩 버전이 더 짧고, gzip 뒤에는 차이가 더 벌어집니다. 위의 두 규칙은 각각 200바이트와 162바이트로 압축됩니다. 작은 아이콘 20개를 한 스타일시트에 넣었을 때 Base64 버전은 4,421바이트(gzip 801), URL 인코딩 버전은 3,720바이트(gzip 615)였습니다. 반복되는 마크업은 잘 압축되는데, Base64는 그 반복을 뒤섞어 버립니다.

Base64는 이스케이프 규칙이 필요 없고, URL을 받는 어떤 문맥에서도 살아남으며, 많은 API와 빌드 도구가 기대하는 형식입니다. URL 인코딩 형식은 #를 이스케이프하지 않거나(URL 프래그먼트를 시작합니다) 바깥의 url("...")과 따옴표 종류가 섞이면 깨집니다. SVG를 Data URI로는 두 버전을 모두 만들고 크기를 보여 줍니다.

SVG data URI의 요건

• MIME 유형 image/svg+xml. 브라우저는 유형이 틀려도 PNG와 JPEG 데이터는 알아서 판별하지만 SVG는 그렇지 않습니다. 다른 유형이면 이미지가 렌더링되지 않습니다.
• xmlns 속성. HTML의 인라인 <svg>는 이것 없이도 동작하지만, 이미지로 쓸 때는 루트 요소에 xmlns="http://www.w3.org/2000/svg"가 선언되어 있어야 합니다. 손으로 쓴 아이콘 중에는 이것이 없어서 아무 표시 없이 실패하는 경우가 많습니다.
• 올바른 XML. 닫지 않은 태그나 이스케이프하지 않은 & 하나로 이미지 전체가 실패하며, 일부만 그려지지도 않습니다.

SVG의 Base64는 보통 PHN2Zy(<svg)나 PD94bWwg(<?xml )로 시작합니다. 주석이나 바이트 순서 표시(BOM)처럼 다른 것으로 시작해도 브라우저에는 문제없지만, 접두사로 형식을 알아보기는 어려워집니다.

스타일과 색상

background-image나 <img>로 쓴 SVG는 별도의 문서입니다. 페이지의 CSS가 그 안까지 닿지 않으므로 hover 색상과 currentColor가 동작하지 않습니다. 흔히 쓰는 우회 방법은 두 가지입니다.

• data URI를 마스크로 쓰고 background-color로 색을 칠합니다.

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• 아이콘이 상태나 테마에 따라 바뀌어야 한다면 <svg> 마크업을 HTML에 인라인으로 넣습니다.

디코딩과 문제 해결

Base64를 SVG로는 Base64 문자열을 읽고 편집할 수 있는 마크업으로 되돌립니다. 편집기에서는 보이는 SVG가 data URI로는 표시되지 않는다면, 거기서 디코딩한 뒤 먼저 루트 요소에 xmlns가 있는지 확인하세요.

자주 묻는 질문