DevToolBox무료
블로그

SVG를 CSS로 변환기

SVG 코드를 CSS background-image data URI로 변환하세요.

Inline SVG (original):

SVG를 CSS Data URI로 변환기

스타일시트에서 사용할 CSS background-image data URI로 SVG 코드를 변환하세요.

자주 묻는 질문

SVG를 CSS 배경으로 사용하는 이유는?
data URI를 사용하면 추가 HTTP 요청이 없어 성능이 향상됩니다.
data URI란 무엇인가요?
base64 또는 URL 인코딩 문자열로 작은 파일을 문서에 직접 삽입하는 방법입니다.
Base64와 URL 인코딩 중 무엇이 더 좋나요?
SVG의 경우 URL 인코딩이 base64보다 일반적으로 효율적입니다.
CSS 사용자 정의 속성을 사용할 수 있나요?
data URI에서는 직접 사용할 수 없습니다. 동적 색상에는 인라인 SVG를 사용하세요.
어떤 SVG 요소가 작동하나요?
모든 유효한 SVG 요소가 작동합니다. SVG에 viewBox 속성이 있는지 확인하세요.
𝕏 Twitterin LinkedIn

이 도구 평가

3.6 / 5 · 198 개 평가

더 많은 도구

SVGSVG → JSX/React💎SVG 최적화기{ }CSS 압축 / 정렬

Recommended

VercelDeploy your frontend instantlyGitHub CopilotAI pair programming

최신 소식 받기

주간 개발 팁과 새 도구 알림을 받으세요.

스팸 없음. 언제든 구독 해지 가능.

Enjoy these free tools?

☕Buy Me a Coffee

사용 방법

  1. Paste your SVG code or upload an SVG file
  2. Choose encoding method: URL-encoded or Base64
  3. Preview the SVG and the generated CSS code
  4. Copy the CSS background-image property to use in your stylesheet

사용 사례

  • Embedding small SVG icons directly in CSS to reduce HTTP requests
  • Creating CSS-only decorative elements without external files
  • Optimizing SVG icons for use in CSS pseudo-elements (::before, ::after)
  • Converting SVG logos for inline CSS backgrounds in email templates

자주 묻는 질문

Should I use URL encoding or Base64 for SVGs in CSS?
URL encoding is generally recommended for SVGs in CSS because it produces smaller output than Base64 (about 30% smaller). Base64 is better for binary formats like PNG.
Is it better to use inline SVG or SVG in CSS?
For decorative icons and backgrounds, CSS data URIs keep your HTML cleaner. For interactive or accessible SVGs, inline SVG in HTML is preferred as it supports CSS styling and aria attributes.
What is the size limit for SVG data URIs?
There is no strict size limit, but keeping data URIs under 8-10KB is recommended for performance. Larger SVGs should be served as external files.