SVG to Data URI Converter
Convert your SVG code into a CSS-ready Data URI for background images.
\s+<')
.replace(/\s{2,}/g, ' ')
.replace(/[\r\n%#()<>\[\\\]^`{|}]/g, encodeURIComponent);
const dataUri = `data:image/svg+xml,${encoded}`;
const cssRule = `background-image: url("${dataUri}");`;
output.value = cssRule;
previewBox.style.display = 'block';
previewDisplay.style.backgroundImage = `url("${dataUri}")`;
}
function copyUri() {
const el = document.getElementById('uriOutput');
if(!el.value) return;
el.select();
document.execCommand('copy');
alert("CSS URI copied!");
}
function resetSvgUri() {
document.getElementById('svgInput').value = '';
document.getElementById('uriOutput').value = '';
document.getElementById('svgPreviewBox').style.display = 'none';
}