SVG to Data URI Converter
Paste SVG text and copy a Data URI for HTML, CSS, or previews.
What it does
An SVG Data URI embeds SVG markup directly inside a URL string. That makes small icons and UI details portable in CSS, HTML, markdown, tests, and documentation without shipping a separate file.
URL-encoded SVG is often shorter and more readable in CSS. Base64 SVG can be useful when a system expects an opaque data URL or when copy/paste tooling handles punctuation poorly.
Common uses
- Paste raw SVG markup copied from an icon, design export, or hand-written vector.
- Copy the URL-encoded Data URI for CSS backgrounds when you want a compact inline asset.
- Use the preview pane to sanity-check that the pasted SVG still renders after conversion.
Watch outs
- This tool accepts pasted SVG text only. It does not upload or inspect files.
- Large SVGs can make CSS and HTML harder to maintain. Keep inline Data URIs for small assets.
- The preview uses a sandboxed iframe so SVG markup is not injected into the main page DOM.
Privacy
SVG text stays in your browser. Conversion, CSS generation, and preview rendering happen locally.
FAQ
Is Base64 or URL-encoded SVG better?
For CSS, URL-encoded SVG is often shorter and easier to inspect. Base64 is useful when a tool expects a fully opaque data URL.
Can I upload an SVG file?
No. This first version intentionally accepts pasted text only, which keeps the workflow simple and avoids file handling.
Is the preview safe?
The SVG preview renders inside a sandboxed iframe and the markup is never inserted into the main document.