CSS 배경 이미지용 Data URI로 SVG 변환, URL 인코딩 및 Base64 인코딩 옵션 지원
형식 변환
이 도구 정보
SVG를 Data URI로 변환은 SVG 코드를 CSS 및 HTML에 인라인으로 사용하기 위한 Data URI 문자열로 변환하는 온라인 도구입니다. URL 인코딩 및 Base64 출력, 선택적 SVG 최적화를 지원하며 바로 사용할 수 있는 CSS 코드를 생성합니다. 모든 처리는 브라우저에서 로컬로 수행됩니다.
주요 기능
- SVG를 URL 인코딩된 Data URI로 변환
- SVG를 Base64 인코딩된 Data URI로 변환
- 변환 전 SVG 최적화
- CSS background-image 출력 형식
- HTML img src 및 원시 Data URI 출력
- 실시간 변환 및 실시간 미리보기
사용 사례
- CSS 스타일시트에 SVG 아이콘 직접 인라인
- 성능 향상을 위해 HTML에 SVG 이미지 인라인
- SVG를 Data URI로 임베딩하여 HTTP 요청 감소
- 임베디드 이미지가 포함된 휴대용 HTML 문서 생성
- SVG 배경용 CSS 코드 스니펫 생성
svg
data-uri
base64
embed
inline
자주 묻는 질문
SVG를 Data URI로 변환 변환기란 무엇인가요?
SVG를 Data URI로 변환 변환기는 SVG 코드를 CSS 및 HTML에 인라인으로 사용하기 위한 Data URI 문자열로 변환하는 온라인 형식 변환 도구입니다. URL 인코딩 및 Base64 인코딩을 지원하며 SVG 최적화와 바로 사용할 수 있는 CSS 코드 생성을 제공합니다.
URL 인코딩과 Base64의 차이점은 무엇인가요?
URL 인코딩된 Data URI는 퍼센트 인코딩을 사용하여 특수 문자를 나타내며, 출력이 더 크지만 읽기 쉽습니다. Base64 인코딩은 압축된 바이너리-텍스트 표현을 생성하며 복잡한 SVG에 대해 크기가 더 작지만 읽을 수 없습니다.
도구가 변환 전에 SVG를 최적화하나요?
네, SVG 최적화 옵션을 활성화하면 도구가 Data URI를 생성하기 전에 SVG에서 불필요한 공백, 주석 및 빈 속성을 제거하여 출력 크기를 줄입니다.
내 SVG 데이터가 서버로 전송되나요?
아니요. 모든 SVG를 Data URI로 변환은 완전히 브라우저에서 수행됩니다. SVG 코드는 어떠한 서버에도 업로드되거나 전송되지 않으므로 작업이 완전히 비공개이고 안전합니다.
출력을 CSS에 직접 사용할 수 있나요?
네. 도구는 바로 사용할 수 있는 CSS background-image 코드 스니펫을 생성합니다. CSS 출력을 복사하여 스타일시트에 붙여넣기만 하면 Data URI가 유효한 배경 이미지 URL로 사용됩니다.