SVG to Base64
Encode SVG markup to Base64 for CSS/HTML data URIs. Working with raster images instead? Try Image to Base64.
Using the data URI
Once you have the Base64 string, build a data URI and drop it straight into CSS or HTML:
.icon {
background-image: url("data:image/svg+xml;base64,PASTE_BASE64_HERE");
}SVG to Base64 — FAQ
How do I Base64 encode an SVG?+
Paste your SVG markup above and switch to Encode. Because SVG is plain XML text, it Base64 encodes the same way any other text does — no binary image conversion is needed.
How do I use a Base64 SVG in CSS or HTML?+
Wrap the Base64 output in a data URI: background-image: url("data:image/svg+xml;base64,PASTE_HERE") in CSS, or <img src="data:image/svg+xml;base64,PASTE_HERE"> in HTML.
Should I URL-encode or Base64 encode my SVG data URI?+
Either works. URL-encoding (percent-encoding) usually produces a shorter, more compressible data URI for SVG since it stays mostly readable text; Base64 is simpler when the SVG already needs to travel as an opaque blob (e.g. inside JSON).
Does Base64 encoding affect SVG file size?+
Yes — Base64 adds about 33% overhead versus the raw SVG text. For large icon sets, consider an SVG sprite or <symbol> reuse instead of inlining every icon as Base64.