SVG를 Data URI로

SVG to Data URI는 SVG 마크업을 최적화된 데이터 URI 문자열로 변환하여, SVG 파일에 대한 별도의 HTTP 요청 없이 HTML img src 속성, CSS background-image 속성 또는 JavaScript 변수에 직접 포함할 수 있게 합니다. 데이터 URI는 URL 인코딩 또는 Base64를 사용하여 문서 내에 리소스를 인라인으로 인코딩하여 네트워크 왕복을 제거하고 웹 애플리케이션에서 SVG 아이콘, 로고 및 장식용 그래픽의 배포를 단순화합니다. URL 인코딩된 데이터 URI는 Base64보다 더 콤팩트하고 브라우저 개발자 도구에서 부분적으로 사람이 읽을 수 있는 상태로 유지되므로 일반적으로 SVG에 선호됩니다. 이 도구는 최종 데이터 URI 크기를 줄이기 위해 인코딩 전에 선택적으로 SVG 마크업을 축소(minify)합니다.

all 변환기 tools 둘러보기

사용 방법

SVG 코드를 입력 영역에 붙여넣으면 출력 패널에 데이터 URI가 즉시 생성됩니다. 형식 토글을 사용하여 URL 인코딩과 Base64 인코딩 중에서 선택하십시오. URL 인코딩은 대부분의 SVG에 대해 더 작은 출력을 생성하는 반면, Base64는 HTML 속성 구문 분석을 방해할 수 있는 특이한 문자가 포함된 SVG 콘텐츠에 더 안전합니다. 전체 데이터 URI 문자열을 복사하여 CSS background-image url() 값, HTML img src 속성 또는 JavaScript 상수에 붙여넣으십시오. 렌더링된 SVG의 라이브 미리보기가 표시되므로 출력을 복사하기 전에 시각적 정확성을 확인할 수 있습니다.

주요 사용 사례

• •작은 벡터 에셋에 대한 추가 HTTP 요청을 제거하기 위해 컴포넌트 스타일시트에 SVG 아이콘을 CSS background-image 데이터 URI로 포함
• •이메일 클라이언트에서 외부 이미지 로딩이 차단되는 HTML 이메일 템플릿에 회사 로고 및 마케팅 일러스트레이션을 데이터 URI로 인라인화
• •단일 파일 HTML 문서 및 브라우저 확장 프로그램에 인라인 포함을 위해 SVG 파비콘, 앱 아이콘 및 커서를 데이터 URI로 변환
• •초기 페이지 로드를 위한 렌더링 차단 네트워크 요청을 제거하기 위해 중요한 상단(above-the-fold) SVG 콘텐츠를 데이터 URI로 인라인화
• •독립적이고 이식 가능한 컴포넌트 스타일시트를 위해 CSS에서 SVG 마스크 이미지, 패턴 및 필터를 데이터 URI로 할당

잠시 쉬면서 무료 브라우저 게임을 즐겨보세요