SVG to Base64
Upload an SVG file and get a Base64 string or data URI ready to embed in HTML or CSS.
Last updated: May 29, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is SVG to Base64?
SVG to Base64 reads an SVG file in your browser and encodes it as a Base64 string. The data URI output (data:image/svg+xml;base64,...) lets you embed the vector graphic directly in an HTML img src or CSS background-image without a separate file request. Alternatively, SVGs can often be inlined directly as encoded URIs without Base64, but Base64 is more universally compatible.
How to Use SVG to Base64
Drop an SVG file onto the upload area or click to browse.
Copy the Base64 string or data URI.
Paste into your HTML or CSS.
Common Use Cases
- Embedding SVG icons inline in a stylesheet or component without an img tag.
- Using an SVG as a CSS cursor image via data URI.
- Storing SVG illustrations as Base64 in a config or JSON file.
Alternative
For inline SVGs in HTML you can paste the raw SVG markup directly — no encoding needed. Use Base64 when embedding in a CSS background-image or a non-HTML context.