FromSVG provides focused tools for both directions: SVG to Data URI creates an embeddable URI, while SVG to Base64 and Base64 to SVG help move between encoded and readable forms. Keep a readable SVG source in version control even when a generated Data URI is used in a stylesheet.
URL-encoded SVG in CSS
URL encoding keeps the SVG recognizable while escaping characters that have meaning inside a URL or CSS string. A minimal example looks like this:
.icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
}Quotes, hash characters, angle brackets, spaces, and parentheses deserve attention. A CSS preprocessor or build step may apply its own escaping, so inspect the generated stylesheet rather than assuming that a string which looks right in source will be emitted unchanged.
Base64-encoded SVG
Base64 represents the SVG bytes as ASCII characters and can be convenient when a pipeline already handles Base64 data. It is less readable and commonly adds encoding overhead, so compare the result with URL-encoded XML for the specific asset and delivery path.
.icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTMgMTJoMTgiLz48L3N2Zz4=");
}URL encoding versus Base64
| Choice | Useful when | Trade-off |
|---|---|---|
| URL-encoded XML | You want readable output or CSS variables that are easy to inspect. | Escaping rules can be fiddly, especially with quotes, hashes, and preprocessors. |
| Base64 | Your pipeline already handles Base64 or you want the payload to avoid XML punctuation. | Output is opaque and may be larger than a compact URL-encoded form. |
| External SVG file | You want independent caching, a clean stylesheet, or one asset shared across pages. | It requires a separate request and asset deployment path. |
| Inline SVG markup | You need accessible markup, CSS styling, or direct DOM interaction. | It adds markup to the document and requires careful handling of untrusted input. |
When Data URIs are a good fit
Data URIs can be convenient for small, stable icons that are tightly coupled to a stylesheet or generated component. They also make an asset self-contained. That convenience must be balanced against HTML or CSS size, cache behavior, source readability, and the fact that a large repeated Data URI can be duplicated across documents.
Color and theming considerations
An SVG embedded as an image or CSS background does not automatically behave like inline SVG for inherited CSS color. If the icon should follow text color, prepare an appropriate currentColor variant with SVG to currentColor and test it in the destination context. Multicolor artwork may need explicit fills instead of inherited color.
Review and test the final output
- Keep the original SVG and generate the Data URI from a known, reviewable source.
- Paste the final declaration into the actual CSS, HTML, or component build pipeline.
- Check quotes, escaping, fragments, transparency, and background behavior in supported browsers.
- Compare the stylesheet or document size with an external asset or inline SVG alternative.
- Do not embed untrusted SVG without applying an application-appropriate security policy.