SVG to Data URI
Encode an SVG into a URL-encoded or base64 data URI for CSS or img src.
or drop a file here
Preview
URL-encoded (recommended for CSS)
Output updated — 328 characters
Base64
CSS background
Inlining SVG as a data URI
A data URI embeds an entire SVG directly into your CSS or HTML, removing a network request — perfect for small icons, backgrounds, and bullets. The URL-encoded form is usually smaller and more readable than base64 and is the recommended choice for CSS background-image; the base64 form is handy when a tool requires it. Both are generated locally — your SVG never leaves your browser.
Working with raster images or other strings? The Base64 encoder and URL encoder cover the general cases.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Inlining an icon into CSS as a background image without a separate request.
- Embedding an SVG in a single self-contained HTML file.
- Putting a small graphic into a config or a template that cannot reference a file.
- Comparing percent-encoded against Base64 size for the same SVG.
- Producing a data URI for an image src attribute.
Frequently Asked Questions
- Should an SVG data URI be base64-encoded?
- Usually not. Base64 inflates the data by a third, while SVG is text that only needs a few characters percent-encoded. URL-encoding an SVG typically produces a shorter string than base64 and stays readable, which is why the tooling convention shifted away from base64 for SVG specifically.
- Which characters must be escaped?
- `#` first and foremost — it starts a fragment identifier, so an unescaped hex colour truncates the URI at that point. Also `<`, `>`, `"` and `%`. Single quotes around the URI let double quotes inside the SVG survive unescaped, which shortens the result noticeably.
- What is the trade-off against a separate file?
- A data URI costs no request and cannot be cached separately; a file costs one request and is cached across pages. For a small icon used on one page the URI wins; for a logo on every page the file wins, because the URI is re-downloaded inside the CSS every time it changes.
- Is there a size limit?
- No formal one, but practical ceilings exist — very long URIs slow CSS parsing and some tooling truncates them. The usual guidance is to stay under a few kilobytes, which comfortably covers icons and patterns and rules out anything illustration-sized.
- Can a data-URI SVG run script?
- Not when used as a CSS background or an `<img>` source — both contexts disable scripting in SVG. Injected inline into the DOM it absolutely can, which is the distinction that makes `<img src="data:image/svg+xml,…">` safe and `innerHTML` of the same string not.
Common errors and gotchas
- Choosing Base64 when percent-encoding is smaller for SVG and stays readable.
- Forgetting to encode the `#` in a hex colour, which terminates the URI at that point.
- Leaving double quotes in the markup unescaped inside a CSS url() that also uses them.
- Inlining a large SVG, which is re-downloaded with every document rather than cached separately.
- Omitting the xmlns attribute, which the SVG needs when it is not parsed as part of a document.
Related Converters tools
JSON to YAML
Convert JSON into clean, readable YAML instantly.
YAML to JSON
Convert YAML configuration into valid JSON.
JSON to XML
Convert JSON structures into nested XML markup.
HWB to HEX Converter
Convert an HWB color to HEX.
JSON to SQL
Turn a JSON array of objects into SQL INSERT statements.
CSV to XML
Convert CSV rows into structured XML records.
XML to CSV
Flatten repeated XML records into CSV rows.
INI to JSON
Parse INI config sections and keys into JSON.