SVG to Data URI Converter
Turn any SVG into a compact data URI you can paste straight into background-image. VectorForge minifies the SVG first and percent-encodes it, which keeps the URI smaller than Base64 for typical icons — and you can see it render in the live preview before copying.
How to use
- 1 Paste your SVG markup into the editor, or drop an .svg file anywhere on the page.
- 2 The CSS Data-URI tab is already selected — the snippet updates live as you edit.
- 3 Copy the CSS snippet with one click, or download it as a .css file.
Frequently asked questions
Data URI or Base64 — which one is smaller?
For SVG, a percent-encoded data URI is usually smaller than Base64 (you avoid the ~33% encoding overhead), and this tool minifies the SVG first to shrink it further.
Why is the SVG minified before encoding?
Stripping comments, whitespace and metadata shrinks the URI without changing how the image renders.
Does the data URI keep the xmlns attribute?
Yes. Standalone usage (img tags, CSS backgrounds) requires xmlns, so it is preserved here — unlike JSX or React component output.