SVG Data URI 변환기

언제 사용하나요?

작은 아이콘 SVG를 별도 파일 요청 없이 CSS background나 HTML img에 직접 넣고 싶을 때, SVG를 인라인 데이터로 임베드해 HTTP 요청을 줄이고 싶을 때 사용합니다.

사용 방법

• SVG 코드를 입력창에 붙여넣습니다.
• 인코딩 방식(URL 인코딩 또는 Base64)을 선택합니다.
• 미리보기를 확인하고 Data URI, CSS, HTML 스니펫을 복사합니다.

입력값 안내

<svg> 태그가 포함된 SVG 코드를 붙여넣습니다. URL 인코딩 방식은 용량이 작아 CSS에 권장되며, Base64는 호환성이 넓습니다.

계산·변환 기준

SVG의 불필요한 공백을 정리한 뒤 인코딩합니다. URL 인코딩은 일부 문자를 그대로 두어 용량을 줄이고, Base64는 전체를 64진수 문자열로 변환합니다.

사용 예시

• CSS 아이콘 임베드 - 작은 아이콘 SVG를 CSS background-image에 직접 넣어 요청을 줄입니다.
• HTML 인라인 이미지 - SVG를 <img> src에 Data URI로 넣어 외부 파일 없이 표시합니다.
• 단일 파일 배포 - SVG를 코드 안에 임베드해 별도 파일 없이 배포합니다.

예시

• 아이콘 SVG → data:image/svg+xml,... (CSS background-image에 사용)
• background-image, <img> 스니펫 자동 생성

주의사항

• 잘못된 형식의 소스 데이터 입력 시 파싱 에러가 발생하거나 결과 레이아웃이 깨질 수 있습니다.
• 인코딩 표준(UTF-8)이 맞지 않거나 복잡한 중첩 구조를 가진 소스 데이터를 변환할 경우 데이터 구조가 깨지거나 누락될 수 있습니다.

계산·사용 가이드

URL 인코딩과 Base64

URL 인코딩은 일부 문자를 그대로 두어 용량이 작아 CSS background에 적합합니다. Base64는 호환성이 넓지만 결과 문자열이 더 깁니다.

Data URI 사용처

작은 아이콘을 Data URI로 임베드하면 HTTP 요청을 줄일 수 있습니다. 다만 용량이 큰 SVG는 외부 파일로 두는 편이 캐싱에 유리합니다.

자주 묻는 질문

URL 인코딩과 Base64 중 어떤 게 좋나요?

CSS background에는 용량이 작은 URL 인코딩이, 호환성이 중요하면 Base64가 적합합니다.

변환 결과가 잘 보이나요?

결과 영역의 미리보기로 변환된 SVG가 정상 렌더링되는지 바로 확인할 수 있습니다.

큰 SVG도 변환되나요?

변환은 가능하지만 Data URI가 매우 길어지면 외부 파일로 두는 편이 효율적입니다.

CSS와 HTML 코드도 만들어 주나요?

네. background-image 스니펫과 <img> 태그 스니펫을 함께 제공합니다.

관련 도구

• SVG 압축기 - SVG 문자열의 주석과 불필요한 공백을 정리합니다.
• SVG → PNG 변환기 - SVG 코드를 Canvas에 렌더링해 PNG 이미지로 저장합니다.
• 이미지 Base64 변환기 - 이미지 파일을 서버 업로드 없이 Data URL Base64 문자열로 변환합니다.
• SVG 미리보기 - SVG 코드를 브라우저에서 이미지로 렌더링해 미리봅니다.
• SVG 색상 치환기 - SVG 코드의 fill/stroke 색상 값을 원하는 색상으로 일괄 치환합니다.
• URL 인코딩/디코딩 - 텍스트를 URL 안전 형식(%XX)으로 인코딩하거나 인코딩된 URL을 원래 텍스트로 디코딩합니다.