SVGView

SVG에서 Data URI로 변환기

CSS 또는 HTML에서 인라인 SVG 사용을 위해 간단한 Data URI를 만듭니다. 소규모 자산 및 빠른 삽입에 적합합니다. SVG 파일을 온라인으로 열고 즉시 변환하세요.

SVG 파일을 드래그 앤 드롭하세요

또는 클릭해서 파일을 고르거나 SVG 코드를 붙여넣으세요

.svg 파일만 허용됩니다
Ctrl+V / Cmd+V로 SVG 코드를 붙여넣으세요

SVG - Data URI 변환기를 사용하는 이유는 무엇입니까?

Base64 및 URL 인코딩 선택

SVG to Data URI를 사용하면 호환성과 크기에 따라 Base64와 URL 인코딩 출력 간에 전환할 수 있습니다. Base64는 모든 상황에서 안전하며, URL 인코딩은 간단한 SVG을 더 짧고 diff에서 읽기 쉽게 유지합니다.

복사 준비 Data URI 출력

SVG to Data URI는 즉시 사용 가능한 데이터:이미지/svg+xml 문자열 형식을 지정하고 원클릭 복사를 제공합니다. #, % 및 따옴표와 같은 문자를 이스케이프하므로 수동 정리 없이 HTML 속성, CSS 또는 JSON에서 출력이 작동합니다.

어디서나 삽입 가능

출력은 img src, CSS 배경 이미지, 인라인 스타일 또는 이메일의 스타일 블록에서 작동합니다. 자산을 인라인으로 유지하면 추가 요청을 방지하고 최소한의 오버헤드로 작은 UI 요소를 제공하는 데 도움이 됩니다.

정리된 작은 문자열 SVG

SVG to Data URI는 출력을 짧게 유지하기 위해 최적화된 SVG와 잘 어울립니다. 메타데이터를 제거하고, 경로를 단순화하고, 사용하지 않는 ID를 제거하여 코드 검토 시 최종 문자열이 간결하고 읽기 쉬운 상태로 유지됩니다. 문자열이 짧을수록 구성 파일에 저장하기가 더 쉽고 줄 바꿈이 줄어듭니다.

로컬, 프라이빗 처리

SVG to Data URI은 전적으로 브라우저에서 실행되므로 파일이 기기를 떠나지 않습니다. 이는 클라이언트 작업, 내부 아이콘, 외부 서버에 업로드할 수 없는 자산에 안전합니다.

팀을 위한 빠른 반복

이 도구는 UI 붙여넣기, 변환, 복사 및 업데이트 등 빠른 반복 작업을 수행할 만큼 빠릅니다. 속도가 중요한 디자인 시스템 워크플로우, 문서화 사이트, 프로토타이핑 세션에 적합합니다.

SVG를 Data URI로 변환하는 방법

1

SVG 추가

파일을 드래그 앤 드롭하거나 SVG 마크업을 붙여넣으세요. SVG to Data URI는 소스를 로컬로 로드하고 정확한 출력을 위해 viewBox, ID 및 색상을 유지합니다. SVG 파일을 온라인으로 열고 즉시 변환하세요.

2

인코딩 선택

최대 호환성을 위해 Base64를 선택하거나 더 짧고 읽기 쉬운 문자열을 위한 URL 인코딩을 선택하세요. SVG to Data URI는 출력을 즉시 업데이트하므로 복사하기 전에 길이를 비교할 수 있습니다.

3

복사 및 삽입

결과를 복사하여 HTML, CSS 또는 JSON에 붙여넣습니다. SVG to Data URI 문자열은 img src, background-image 또는 인라인 스타일 속성에 사용할 수 있습니다.

SVG Data URI FAQ

SVG Data URI는 무엇이며 언제 사용해야 합니까?
SVG to Data URI는 URL 문자열 내부에 SVG를 직접 포함하므로 별도의 파일을 호스팅하지 않고도 인라인으로 사용할 수 있습니다. 이는 외부 요청이 제한된 아이콘, 작은 일러스트레이션, 이메일 템플릿에 유용합니다.
SVG to Data URI: Base64 또는 URL 인코딩, 어떻게 선택합니까?
SVG to Data URI는 둘 다 지원합니다. Base64는 모든 컨텍스트에서 가장 안전한 선택이지만 URL 인코딩은 단순한 모양의 경우 더 짧고 소스 제어에서 편집하거나 비교하기가 더 쉽습니다.
SVG Data URI가 CSS 배경 이미지에서 작동하나요?
그렇습니다. SVG to Data URI는 background-image: url(...) 내에 배치할 수 있는 data:image/svg+xml 문자열을 출력합니다. 이는 패턴, 아이콘 및 장식 UI 자산에 대한 일반적인 패턴입니다.
전환은 비공개인가요?
SVG to Data URI는 브라우저에서 로컬로 실행되므로 자산이 장치를 떠나지 않습니다. 이를 통해 독점 로고나 클라이언트 아이콘을 안전하게 유지하고 잠긴 네트워크에서 사용할 수 있습니다.
SVG의 크기는 얼마나 됩니까?
SVG to Data URI는 최대 10MB까지 파일을 처리할 수 있습니다. 매우 큰 SVG는 긴 문자열을 생성하므로 최적화하거나 외부 파일을 사용하는 것이 더 실용적일 수 있습니다.
전환하기 전에 최적화해야 합니까?
예. SVG to Data URI 결과는 SVG가 최적화될 때 더 짧고 더 안정적입니다. HTML 또는 CSS를 간결하게 유지하려면 불필요한 메타데이터와 공백을 제거하세요.
색상과 viewBox가 보존되나요?
SVG to Data URI는 viewBox, 채우기, 획 및 ID를 그대로 유지하므로 렌더링된 출력이 소스와 일치합니다. currentColor 또는 CSS 변수를 사용하는 경우 변환하기 전에 SVG에 보관하세요.
SVG - Data URI 변환기는 다운로드 없이 무료로 사용할 수 있습니까?
그렇습니다. SVG - Data URI 변환기는 브라우저에서 무료로 사용할 수 있습니다. 다운로드나 설치가 필요하지 않습니다.
SVG - Data URI 변환기를 사용하려면 계정이 필요합니까?
아니요. SVG - Data URI 변환기는 가입 없이 브라우저에서 즉시 작동하며 파일은 로컬에 유지됩니다.

관련 SVG 도구

SVG과 Data URI를 이러한 도구와 함께 사용하여 자산을 삽입하기 전에 미리 보고, 최적화하거나 변환할 수 있습니다. 깨끗한 소스는 더 짧고 안정적인 문자열을 생성합니다.

SVG 뷰어

SVG에서 Data URI 이전의 소스를 미리 보면 크기, 색상 및 viewBox 설정을 확인할 수 있습니다.

도구 열기

SVG 최적화 도구

마크업을 축소하고 최종 문자열을 간결하게 유지하려면 SVG에서 Data URI 이전에 SVG 최적화 프로그램을 실행하세요.

도구 열기

SVG to CSS 배경

그라데이션, 마스크 또는 아이콘에 재사용 가능한 CSS 스니펫이 필요한 경우 SVG to CSS 배경을 사용하세요.

도구 열기

SVG to PNG

SVG에서 PNG까지의 기간이 너무 길고 레거시 컨텍스트에 대한 래스터 대체가 필요한 경우 SVG를 사용하세요.

도구 열기

SVG to React

테스트 후 구성 요소로 변환하여 앱의 전달 방법을 비교할 수 있습니다.

도구 열기

관련 SVG 블로그

SVG 워크플로, 문제 해결, 프로덕션 실무에 관한 글을 계속 읽어 보세요.