SVG to CSS 변환기
SVG 코드를 CSS background-image data URI로 변환합니다. 작은 크기의 UTF-8 또는 넓은 호환성의 Base64 인코딩을 선택하세요.
SVG 입력0 문자
SVG 미리보기
SVG 미리보기가 여기에 표시됩니다
왜 CSS에서 SVG를 사용하나요?
SVG를 data URI로 CSS에 직접 임베드하면 추가 HTTP 요청을 제거할 수 있습니다. 작은 아이콘과 장식 요소에 이상적이며, 페이지 로드 성능을 향상시키고 서버 왕복을 줄입니다.
UTF-8 vs Base64 인코딩
- - UTF-8: 더 작은 출력, 사람이 읽기 쉬움, 최신 브라우저에 최적
- - Base64: 약 33% 더 크지만 오래된 도구와의 호환성이 높음
- - 대부분의 경우 UTF-8을 권장
온라인에서 SVG를 CSS 배경 이미지로 변환하는 방법
- 1.인코딩 형식을 선택합니다: 작은 크기의 UTF-8 또는 넓은 호환성의 Base64.
- 2.입력 영역에 SVG 코드를 붙여넣습니다. SVG 미리보기가 즉시 렌더링됩니다.
- 3.Data URI와 완전한 CSS 코드가 입력 아래에 실시간으로 생성됩니다.
- 4.URI 복사 또는 CSS 복사를 클릭하여 결과를 클립보드에 복사합니다.
FAQ
변환으로 SVG 품질이 영향받나요?
아닙니다. SVG는 벡터 형식이므로 data URI로 변환해도 모든 해상도에서 완전한 품질이 유지됩니다. SVG 코드는 CSS에 임베드하기 위해 인코딩될 뿐 래스터화되지 않습니다.
모든 브라우저에서 SVG data URI를 사용할 수 있나요?
네. SVG data URI는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. UTF-8 인코딩은 IE9+를 포함한 SVG를 지원하는 모든 브라우저에서 작동합니다.
SVG data URI에 크기 제한이 있나요?
최신 브라우저에는 엄격한 크기 제한이 없지만 32KB를 초과하는 data URI는 성능에 영향을 줄 수 있습니다. 크고 복잡한 SVG의 경우 외부 파일 사용이나 HTML 내 인라인 SVG를 고려하세요.
SVG 데이터가 서버로 전송되나요?
아닙니다. 모든 인코딩과 변환은 브라우저에서 JavaScript를 사용하여 이루어집니다. SVG 코드가 업로드되거나 저장되는 일은 없습니다.