SVG Data URI 변환기

SVG Data URI 변환기 사용 가이드

SVG Data URI 변환기는 SVG 마크업을 CSS background-image나 HTML에 바로 넣을 수 있는 URL 인코딩 또는 Base64 Data URI로 바꾸는 도구입니다.

SVG Data URI 변환기는 SVG 이미지 코드를 CSS나 HTML에 바로 끼워 넣을 수 있는 Data URI 형태로 바꿔 주는 브라우저 기반 도구입니다. 작은 아이콘이나 배경 무늬를 별도의 파일로 두지 않고 코드 안에 직접 담고 싶을 때, 복잡한 인코딩 과정을 자동으로 처리해 줍니다.

사용 방법

1. 1변환할 SVG 코드를 입력칸에 붙여 넣거나 SVG 파일을 불러옵니다.
2. 2변환 버튼을 누르면 'data:image/svg+xml,. ' 형태의 Data URI 문자열이 만들어집니다.
3. 3필요에 따라 URL 인코딩 방식이나 Base64 방식 중에서 출력 형태를 선택합니다.
4. 4복사 버튼으로 결과 문자열을 복사합니다.

실제 사용 사례

• SVG Data URI 변환기 결과를 확인한 뒤 SVG 최적화기 또는 Base64 이미지 변환기에서 다음 작업을 이어갈 수 있습니다.
• SVG Data URI 변환기 결과를 확인한 뒤 Favicon 생성기에서 다음 작업을 이어갈 수 있습니다.
• SVG Data URI 변환기: 원본 이미지를 보존하면서 크기, 형식 또는 화면 표시 상태를 비교할 때 적합합니다.

문제가 생겼을 때

활용 팁

• 자주 쓰는 작은 아이콘을 Data URI로 인라인 처리하면 이미지 파일을 따로 요청하지 않아 외부 파일 의존을 줄일 수 있습니다.
• CSS 배경에 SVG 무늬를 넣을 때 Data URI를 쓰면 별도 이미지 파일 관리 없이 스타일시트 하나로 깔끔하게 정리됩니다.
• SVG 코드 안의 색상 값을 미리 원하는 색으로 바꾼 뒤 변환하면, 디자인에 딱 맞는 인라인 아이콘을 만들 수 있습니다.