0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG → CSS
SVG 코드를 CSS 속성(background-image, mask-image 또는 CSS 변수)으로 사용할 수 있는 data URI로 변환합니다. URL 및 Base64 인코딩을 지원합니다.
형식
CSS 속성
옵션
SVG 코드
라인:0캐릭터:0

작동 방식

SVG의 코드를 CSS에서 바로 쓸 수 있는 Data URI로 변환하여, 별도 파일이나 추가 HTTP 요청 없이 아이콘을 스타일시트에 직접 삽입할 수 있습니다.

두 가지 인코딩을 제공합니다: URL-encoded(퍼센트 인코딩)는 더 짧고 읽기 쉬워 SVG에 권장되며, Base64는 다소 길지만 어디서나 호환됩니다.

결과는 background-image, mask-image(CSS로 아이콘에 색을 입히기 위한 용도), 또는 재사용 가능한 CSS 변수로 생성할 수 있습니다. 미리 SVG를 축소하면 크기가 더욱 줄어듭니다.

예시

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL 인코딩은 SVG를 거의 읽을 수 있는 상태로 유지하며 보통 Base64보다 짧습니다.
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");mask-image로 쓰면 아이콘의 색은 요소의 background-color 속성으로 제어됩니다.

활용 사례

  • 페이지에 HTTP 요청을 추가하지 않고 SVG 아이콘을 background-image로 삽입하기.
  • SVG를 마스크(mask-image)로 사용하여 테마나 상태에 따라 CSS에서 다시 색을 입히기.
  • 아이콘을 CSS 변수에 저장하고 여러 선택자에서 재사용하기.
  • 삽입하기 전에 SVG를 축소하여 인라인 아이콘의 용량을 줄이기.

자주 묻는 질문

URL-encoded와 Base64 중 어느 것이 좋나요?

SVG에는 보통 URL-encoded가 가장 좋습니다: SVG는 텍스트이므로 더 짧고 읽기 쉬운 Data URI가 됩니다. Base64는 최대 호환성을 주지만 크기가 약 33% 늘어납니다.

왜 background-image 대신 mask-image를 쓰나요?

background-image로 쓰면 아이콘이 원래 색을 유지합니다. mask-image로 쓰면 SVG는 형태만 정의하고 색은 CSS가 제공하여, 테마에 따라 바뀌는 단색 아이콘에 이상적입니다.

압축 옵션은 무엇을 하나요?

인코딩하기 전에 SVG의 주석을 제거하고 공백을 압축하여, 그림을 바꾸지 않고 최종 Data URI를 더 작게 만듭니다.

내 SVG가 서버에 업로드되나요?

아니요. 변환은 모두 브라우저에서 이루어지며, SVG는 컴퓨터를 벗어나지 않습니다.

관련 항목