SVG Data URI 변환기
브라우저 처리SVG Data URI 변환기는 SVG 마크업을 CSS background-image나 HTML에 바로 넣을 수 있는 URL 인코딩 또는 Base64 Data URI로 바꾸는 도구입니다.
사용 전 확인
- 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
SVG Data URI 변환기 샘플 실행
브라우저 처리
SVG Data URI 변환기는 SVG 마크업을 CSS background-image나 HTML에 바로 넣을 수 있는 URL 인코딩 또는 Base64 Data URI로 바꾸는 도구입니다.
샘플 결과
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 형태로 바꿔 주는 브라우저 기반 도구입니다. 작은 아이콘이나 배경 무늬를 별도의 파일로 두지 않고 코드 안에 직접 담고 싶을 때, 복잡한 인코딩 과정을 자동으로 처리해 줍니다.
사용 방법
- 변환할 SVG 코드를 입력칸에 붙여 넣거나 SVG 파일을 불러옵니다.
- 변환 버튼을 누르면 'data:image/svg+xml,. ' 형태의 Data URI 문자열이 만들어집니다.
- 필요에 따라 URL 인코딩 방식이나 Base64 방식 중에서 출력 형태를 선택합니다.
- 복사 버튼으로 결과 문자열을 복사합니다.
이럴 때 사용하세요
- SVG Data URI 변환기 결과를 확인한 뒤 SVG 최적화기 또는 Base64 이미지 변환기에서 다음 작업을 이어갈 수 있습니다.
- SVG Data URI 변환기: 원본 이미지를 보존하면서 크기, 형식 또는 화면 표시 상태를 비교할 때 적합합니다.
문제가 생겼을 때
SVG Data URI 변환기: 저장한 이미지의 크기나 품질이 예상과 다름
SVG Data URI 변환기에서 원본 해상도, 출력 크기, 품질 설정과 파일 형식을 하나씩 바꿔 다시 저장하세요.
SVG Data URI 변환기: 결과가 표시되지 않음
SVG Data URI 변환기의 필수 입력값과 선택 옵션을 확인한 뒤 작은 입력으로 다시 실행하세요.
활용 팁
- 자주 쓰는 작은 아이콘을 Data URI로 인라인 처리하면 이미지 파일을 따로 요청하지 않아 외부 파일 의존을 줄일 수 있습니다.
- CSS 배경에 SVG 무늬를 넣을 때 Data URI를 쓰면 별도 이미지 파일 관리 없이 스타일시트 하나로 깔끔하게 정리됩니다.
- SVG 코드 안의 색상 값을 미리 원하는 색으로 바꾼 뒤 변환하면, 디자인에 딱 맞는 인라인 아이콘을 만들 수 있습니다.