SVG를 Data URI로

SVG를 CSS 또는 HTML의 데이터 URI로 변환

URL 인코딩 또는 Base64 SVG 데이터 URI와 CSS background-image, CSS mask-image, HTML img용 코드를 생성합니다. SVG를 업로드하지 않고 마크업을 최적화하고 결과를 미리 본 뒤 필요한 형식을 복사할 수 있습니다.

여기에 파일을 놓으세요

샘플 사용해 보기

미리보기가 없습니다. 파일을 추가하면 결과가 표시됩니다.

아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.

새 파일의 기본값을 편집하고 있습니다

인코딩

URL 인코딩은 URL에 그대로 담을 수 없는 문자만 이스케이프하므로, 아이콘 크기 파일에서는 보통 Base64보다 20~30% 작고 마크업도 읽을 수 있는 상태로 남습니다. 빌드 단계나 CMS가 퍼센트 기호를 바꿔 쓴다면 Base64를 고르세요.

CSS 이스케이프 추가

공백, 작은따옴표, 괄호까지 인코딩해 따옴표 없는 url(...) 안에서도, Sass나 Less 문자열 안에서도 안전하게 쓸 수 있습니다. 몇 바이트가 늘어납니다. Base64에는 필요하지 않습니다.

최적화SVG 최적화

출력을 생성하기 전에 안전한 최적화 프리셋을 실행합니다.

SVG 압축 (공백 제거)색상 최적화메타데이터 제거

스타일currentColor 사용

fill과 stroke 값을 바꿔 아이콘이 주위 글자 색을 그대로 따르게 합니다. 단색 그림에만 쓸모가 있으며, 여러 색이 든 SVG는 한 가지 색으로 뭉개집니다.

SVG란?

SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.

SVG는 웹 표준 벡터 형식입니다. 모든 최신 브라우저가 기본적으로 지원하며 CSS로 스타일을 지정하거나 JavaScript 또는 SMIL로 애니메이션을 적용할 수 있습니다. 로고, 아이콘, 일러스트레이션에는 대체로 효율적이지만 복잡한 SVG는 파일이 커질 수 있습니다.

SVG를 data URI로 인라인해야 하는 경우

데이터 URI는 전체 SVG를 스타일시트나 마크업 내부에 넣으므로 브라우저는 이를 그리기 위해 두 번째 요청이 필요하지 않습니다. 글머리 기호, 화살표, 갈매기 모양, 체크박스 체크 표시, 바닥글 표시 등 작고 장식적인 아트워크에 효과가 있습니다. URL 인코딩은 일반적으로 SVG 텍스트의 경우 더 간결한 반면, Base64는 다른 도구에서 필요할 때 유용할 수 있습니다. CSS 마스크는 SVG를 요소 자체 배경색의 스텐실로 처리하므로 단일 CSS 선언을 사용하여 상태별, 테마별 또는 구성 요소별로 하나의 단색 아이콘을 다시 칠할 수 있습니다.

SVG를 data URI로 온라인에서 변환하는 방법

1
SVG 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
2
URL 인코딩과 Base64 중에서 고르고, 마크업을 먼저 최적화할지 정하세요. 다섯 가지 출력과 각각의 바이트 크기가 옵션을 바꾸는 대로 갱신됩니다.
3
필요한 코드를 복사하거나, '모두 저장'을 누르면 배경과 마스크 규칙이 담긴 .css 파일을 SVG마다 하나씩 내려받을 수 있습니다.

개인정보: 파일은 브라우저를 벗어나지 않습니다

변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.

로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.

자주 묻는 질문

URL 인코딩한 data URI가 Base64보다 작은가요?

보통. Base64는 원시 바이트에 인코딩 오버헤드를 추가하는 반면, URL 인코딩은 이스케이프해야 하는 문자만 확장합니다. 정확한 차이는 SVG 마크업에 따라 다르므로 도구에서는 두 크기를 모두 표시하고 앞에 있는 파일과 비교할 수 있습니다.

CSS 마스크 규칙은 어떻게 아이콘 색을 바꾸나요?

mask-image는 SVG를 스텐실로 씁니다. 요소는 자기 background-color를 칠하고, 마스크가 어느 픽셀을 남길지 정합니다. 색이 CSS에서 오기 때문에 data URI 하나로 어떤 색이든 낼 수 있고, 호버나 다크 모드 변형도 background-color 한 줄만 바꾸면 됩니다. 마스크는 알파 채널만 남기고 SVG 자체의 색은 버리므로 단색 그림에서만 동작합니다. Safari는 아직 -webkit-mask-image 접두사가 필요하며, 생성되는 규칙에는 이미 들어 있습니다.

SVG를 data URI로 인라인하지 말아야 할 때는 언제인가요?

파일이 크거나 공유되는 경우. 데이터 URI는 이를 사용하는 모든 스타일시트나 페이지에 복사되므로 자체적으로 캐시할 수 없으며 파일이 변경될 때마다 다시 다운로드됩니다. 여러 페이지에서 재사용되는 대규모 아트웍이나 자산의 경우 자체 캐시 헤더가 있는 별도의 .svg 파일이 더 나은 선택인 경우가 많습니다. 데이터 URI는 외부에서 스타일을 지정할 수도 없으므로 생성된 마스크 규칙은 단색 아이콘에 유용합니다.