바로 실행
SVG to Data URI 실행
SVG 코드를 Data URI로 바꿔 바로 붙여넣을 수 있게 만들어요.
SVG를 Data URI로 바꿔 바로 붙여넣습니다
공백을 정리한 SVG 원문을 인코딩해 CSS 배경이나 프론트엔드 자산에 바로 쓸 수 있게 만들어요.
Data URI 결과
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2096%22%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%2242%22%20fill%3D%22%231f6b4f%22%2F%3E%3Ctext%20x%3D%2248%22%20y%3D%2254%22%20text-anchor%3D%22middle%22%20font-size%3D%2228%22%20fill%3D%22%23fff%22%3Eu%3C%2Ftext%3E%3C%2Fsvg%3E
미리보기
결과
실행 뒤 결과를 확인해요
위 입력 패널에서 실행하면 결과 영역에서 복사, 초기화, 다시 실행으로 이어져요.
입력 후 결과
실제 결과는 위 도구 입력값을 처리한 뒤 확인해요.
도구
SVG to Data URI
예상 결과
SVG 코드를 Data URI로 바꿔 바로 붙여넣을 수 있게 만들어요.
활용
CSS 배경 이미지, 아이콘 임베드
프론트엔드 유틸리티
3개 사용 상황
실행 뒤 복사·다운로드
Pro
반복해서 쓰는 도구는 저장해요
저장 항목, 최근 기록, 반복 실행이 많아질 때 Pro 필요 지점을 확인해요.
저장반복 실행최근 기록
사용 팁
짧게 보고 바로 실행할 수 있게 구성했어요
이 도구는 별도 결과 URL을 만들지 않고, 입력과 결과를 같은 페이지 안에서 처리해요. 기본적인 복사·다운로드와 초기화 흐름도 함께 제공해요.
SVG 미리보기는 가능한가요?
네. 원본 SVG와 Data URI 적용 결과를 함께 미리볼 수 있어요.
불필요한 공백도 정리하나요?
기본적인 공백 정리와 인코딩을 함께 적용해요.