SVG CSS 데이터 URI 변환

SVG to CSS Data URI

SVG를 CSS 배경용 데이터 URI로 인코딩하며 꼭 필요한 문자만 이스케이프해 크기를 줄입니다.

SVG를 스타일시트에 붙여넣을 수 있는 데이터 URI로 바꿉니다. Base64가 아니라 URL 인코딩을 쓰는데, 더 작으면서 읽을 수도 있기 때문입니다. 세 가지 크기를 나란히 보여 주고, 인코딩한 URI를 실제로 그려서 동작하는지 확인시켜 주며, 데이터 URI가 되는 순간 아무것도 안 보이게 만드는 몇 가지를 경고합니다.

🔒 브라우저 안에서만 처리svgcssdata-uriencode

SVG 파일 놓기

또는 아래에서 직접 고쳐도 됩니다.

SVG

먼저 최소화XML 선언, doctype, 주석, 연속된 공백을 걷어냅니다. 데이터 URI 안에서는 전부 쓸데없는 무게입니다.

미리보기

인코딩한 URI로 직접 그린 것이라, 여기 보이면 스타일시트에서도 보입니다.

크기

원본 SVG

165 B

URL 인코딩

198 B

Base64

246 B

여기서는 URL 인코딩이 Base64보다 19.5% 작습니다.

Base64는 입력이 무엇이든 33⅓%가 붙습니다. SVG는 텍스트이고, CSS url() 안에서 이스케이프가 필요한 글자는 몇 개뿐이라 URL 인코딩은 보통 원본 대비 10% 정도에 그칩니다. 게다가 스타일시트 안에서 읽히고, 검색되고, diff도 남습니다. Base64는 그렇지 않습니다.

결과

Base64로 바꾸기퍼센트 인코딩 URI를 못 받는 드문 경우를 위한 것입니다. 언제나 더 큽니다.

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12 L10 18 L20 6'/%3E%3C/svg%3E");

%, <, >, #와 괄호 몇 개만 이스케이프하고, SVG의 큰따옴표는 작은따옴표로 바꿔서 CSS 문자열이 큰따옴표를 안전하게 쓸 수 있게 합니다. 가장 중요한 것은 #입니다. fill="#fff"에서 이스케이프하지 않으면 조각 식별자가 시작되면서 URL이 잘리고, 아무 오류 없이 아무것도 그려지지 않습니다.

래스터가 필요하면 SVG 래스터화가 원하는 배율로 PNG를 만듭니다. 인코딩 전에 SVG를 줄이려면 SVG 최적화가 경로 데이터를 다시 씁니다.

사용 방법

SVG를 붙여넣거나 놓습니다
원본 상자는 편집할 수 있어서 파일로 돌아가지 않고 여기서 고쳐도 됩니다. 예시는 선으로 그린 아이콘인데, 가장 흔한 경우입니다.
무엇보다 경고를 먼저 읽습니다
`xmlns` 누락이 모두를 걸리게 하는 항목입니다. HTML에 인라인으로 넣을 때는 없어도 되지만, 데이터 URI는 독립된 XML 문서로 파싱되기 때문에 없으면 브라우저가 아무것도 그리지 않고 아무 말도 하지 않습니다. 나머지 경고는 외부 이미지, 스크립트, viewBox 없는 퍼센트 크기에 관한 것입니다.
미리보기를 확인합니다
원본이 아니라 인코딩한 URI로 그립니다. 그래서 그 상자에 아이콘이 보이면 스타일시트에서도 보입니다. 빈 상자면 URI가 깨진 것이고, 이유는 대개 위 경고에 적혀 있습니다.
속성을 고르고 복사합니다
속성에 따라 선언이 바뀝니다. `background-image`, `mask-image`, `content`, 또는 그냥 `src` 중에서 고르면 됩니다. 퍼센트 인코딩을 못 받는 드문 경우를 위해 Base64도 있는데, 언제나 더 큽니다.

자주 묻는 질문

왜 Base64가 아닌가요? 다들 Base64를 쓰던데요

Base64는 3바이트를 4바이트로 만들기 때문에 입력이 무엇이든 33⅓%가 붙습니다. SVG는 텍스트이고, CSS `url()` 안에서 실제로 이스케이프가 필요한 것은 `%`·`<`·`>`·`#`과 괄호 몇 개뿐이라 URL 인코딩은 보통 원본 대비 10% 정도에 그칩니다. 게다가 스타일시트 안에서 검색도 되고 diff도 읽힙니다. 패널이 당신 파일의 두 숫자를 모두 보여 줍니다.

아이콘이 사라졌는데 오류도 안 납니다

거의 항상 이스케이프하지 않은 `#` 때문입니다. `fill="#fff"`에서 그 해시가 조각 식별자를 시작해 버려서 URL이 거기서 잘리고, 브라우저는 SVG가 아닌 무언가를 가져옵니다. 조용히요. 이 인코더는 그것을 이스케이프합니다. URI를 손으로 썼다면 거기부터 보세요.

데이터 URI 안의 SVG를 애니메이션하거나 스크립트를 넣을 수 있나요?

CSS 배경으로는 안 됩니다. 그렇게 불러온 SVG는 제한된 정적 모드로 돕니다. 스크립트도 `foreignObject`도 외부 리소스도 안 되고, 바깥 페이지의 CSS가 안으로 닿지도 않습니다. 선언적 SMIL 애니메이션은 엔진에 따라 되기도 하고 안 되기도 합니다. 그런 것이 필요하면 SVG를 문서에 인라인으로 넣으세요.

데이터 URI가 틀린 선택인 경우는 언제인가요?

SVG가 크거나 여러 곳에서 쓰일 때입니다. 데이터 URI는 따로 캐시되지 않으므로 스타일시트를 받는 모든 페이지가 그 아이콘을 다시 받습니다. 30KB짜리 일러스트를 CSS에 넣으면 그 30KB가 임계 경로에 올라갑니다. 이 방식은 작은 아이콘과 패턴을 위한 것이고, 그보다 크면 파일이나 스프라이트가 낫습니다.