SVG to CSS 변환기
SVG 코드를 CSS background-image 데이터 URI로 변환합니다. URL 인코딩 및 Base64 형식을 지원합니다.
이 도구 소개
SVG to CSS Converter는 SVG 코드를 데이터 URI 형식으로 변환하여 CSS background-image 속성에 사용할 수 있도록 하는 도구로, 별도의 이미지 파일이나 HTTP 요청이 필요하지 않습니다. SVG 데이터를 스타일시트에 직접 포함시킴으로써 외부 종속성을 줄이고, 페이지 로드 성능을 향상시키며, 자산 관리를 단순화할 수 있습니다. 이 도구는 URL 인코딩과 Base64 인코딩 형식을 모두 지원하며, 각각 성능 우선순위와 가독성 선호도에 따라 서로 다른 장점을 가집니다.
SVG를 CSS로 변환하려면 SVG 코드를 입력 영역에 붙여넣고 원하는 인코딩 방식을 선택한 후 "Convert"를 클릭하십시오. URL 인코딩 형식은 더 짧은 출력을 생성하여 읽고 디버깅하기 쉽고, Base64는 gzip에서 더 잘 압축되는 더 컴팩트한 표현을 생성합니다. 도구는 즉시 CSS 출력과 렌더링된 SVG의 라이브 미리보기를 표시하므로 스타일시트에 복사하기 전에 변환을 확인할 수 있습니다.
이 방법은 웹 애플리케이션에 포함된 작은 아이콘, 로고 및 단순한 그래픽에 특히 유용합니다. SVG 데이터를 CSS 내에 유지하면 캐시 무효화 문제를 피하고, 총 네트워크 요청을 줄이며, :hover 및 :active와 같은 CSS 의사 클래스를 통해 SVG 속성을 조작할 수도 있습니다. 유지 관리성을 위해 복잡한 SVG를 별도 파일로 저장하는 것을 고려하되, 인라인 데이터 URI는 거의 변경되지 않는 구성 요소에 적합합니다.
자주 묻는 질문
코드 구현
import base64
from urllib.parse import quote
def svg_to_css_url_encoded(svg: str) -> str:
encoded = quote(svg, safe="")
return f'background-image: url("data:image/svg+xml,{encoded}");'
def svg_to_css_base64(svg: str) -> str:
b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
return f'background-image: url("data:image/svg+xml;base64,{b64}");'
svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'
print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.