Softonic

SVG를 CSS로 변환하는 도구

단계 1 / 2
다음

아무 <svg> 스니펫이나 붙여넣으면 SVG를 data URI로 인라인하는 background-image 선언을 돌려받습니다. 이렇게 하면 추가 HTTP 요청을 피하고, 아이콘이나 패턴을 여러분의 CSS 통제 아래 두며, CDN 재작성에도 견딥니다. 인코딩은 base64가 아니라 rawurlencode 방식을 따르는데, 텍스트가 많은 SVG에서는 더 작고 나중에 디버깅할 때 읽기도 더 쉽습니다.

SVG를 CSS 배경으로 변환하는 방법

  1. 1

    SVG 붙여넣기

    SVG에 xmlns 속성이 있다면 그것까지 포함해 전체 `<svg>...</svg>` 마크업을 넣습니다.

  2. 2

    변환 클릭

    도구가 SVG를 URL 인코딩하고 `data:image/svg+xml,...` URI로 감쌉니다.

  3. 3

    CSS 복사

    `background-image`, `background-repeat`, `background-size` 세 줄의 CSS를 얻어 바로 붙여넣을 수 있습니다.

  4. 4

    필요에 맞게 조정

    아이콘인지 패턴인지에 따라 `background-size`를 `cover`, `100px 100px` 또는 원하는 값으로 바꿉니다.

왜 base64가 아니라 rawurlencode인가

base64는 SVG를 대략 33% 부풀립니다. SVG는 일반 텍스트이므로 URL 인코딩은 대부분의 바이트를 그대로 두고, URI 안에서 의미를 갖는 문자만 이스케이프합니다: <, >, #, 공백 그리고 몇 가지 문자입니다. 그 결과 보통 base64 상당본보다 20~40% 짧은 문자열이 되며, 그럼에도 모든 최신 브라우저에서 올바르게 구문 분석됩니다.

SVG를 인라인할 때와 파일로 연결할 때

상황 data URI로 인라인 외부 .svg 파일
페이지당 한 번 쓰는 작은 아이콘 좋은 선택 무난함
사이트 전반에 쓰는 2 KB 미만 패턴 좋은 선택 이것도 좋음, 캐시됨
30개 이상 도형으로 된 아이콘 세트 피하세요 스프라이트 사용
JS로 애니메이션하거나 스타일링할 SVG 피하세요 HTML에 인라인
이메일 HTML 인라인하거나 생략 외부는 자주 차단됨

흔한 함정

  • fill="#..." 안의 #는 이스케이프해야 합니다. 인코더가 대신 처리합니다.
  • <?xml ...?> 선언문은 포함하지 마세요. 붙여넣기 전에 제거하세요.
  • SVG 안의 따옴표는 CSS 문자열의 바깥쪽 따옴표와 맞아야 합니다. 생성된 규칙은 바깥쪽에 큰따옴표를 쓰므로, SVG 안에서는 작은따옴표가 가장 안전합니다.
  • SVG에 <script> 블록이 있어도 브라우저는 background-image 안에서 실행을 거부합니다. 이는 예상된 의도적 동작입니다.

자주 묻는 질문

data: URI와 SVG를 지원하는 모든 브라우저, 즉 지난 10년간의 모든 주요 브라우저에서 작동합니다. IE 11도 지원하지만, 거기서는 data URL이 base64여야 합니다.

background-size를 명시적으로 지정하세요. 그렇지 않으면 브라우저가 SVG 고유의 viewBox로 되돌아가는데, 그것이 여러분의 요소와 맞지 않을 수 있습니다.

그대로는 쓸 수 없습니다. CSS 변수는 data URI 바깥에서 평가됩니다. 색을 직접 고정하거나 mask-image와 background-color를 이용한 마스킹 기법을 쓰세요.

대략적인 기준: 4 KB 미만이면 괜찮고, 4~10 KB는 측정해 볼 가치가 있으며, 10 KB를 넘으면 캐시할 수 있는 외부 파일로 두는 편이 거의 항상 더 빠릅니다.

붙여넣은 마크업은 URL 인코딩해 CSS 규칙으로 돌려주기 위해 저희 서버로 전송됩니다. 그 규칙을 만드는 데에만 처리되며 저장하거나 공유하지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다