SVG → CSS background-image
어떤 SVG든 인코딩된 data URI로 스타일시트에 인라인 삽입.
또는 파일을 끌어다 놓거나 아래에 코드를 붙여넣으세요
CSS 규칙
출력이 여기에 표시됩니다
사용 방법
- 1SVG 코드를 붙여넣거나 .svg 파일을 끌어다 놓습니다.
- 2background-image 규칙 안에 URL 인코딩되어 들어갑니다.
- 3그 CSS 조각을 스타일시트에 그대로 복사합니다.
무료, 가입 불필요, 워터마크 없음 — 모든 처리가 브라우저에서 로컬로 이뤄지므로 파일이 기기를 벗어나지 않습니다.
자주 묻는 질문
왜 base64가 아니라 URL 인코딩인가요?
URL 인코딩한 SVG가 더 작고 CSS 안에서도 사람이 읽을 수 있습니다. 원한다면 base64도 고를 수 있습니다.
언제 SVG를 CSS에 인라인하면 좋나요?
작은 장식 아이콘과 패턴일 때입니다 — HTTP 요청을 하나 아낄 수 있습니다. 큰 그림은 파일로 두는 편이 낫습니다.