SVG to Base64 and CSS data URIs

Inline SVG is great until a stylesheet needs a background image with no extra request. The SVG to Base64 & CSS Data URI encoder turns markup into Base64 or a data:image/svg+xml URI, and it can decode a URI back to SVG.

Encode, then paste

Drop a .svg file or paste the markup. Copy the Base64 string for an img src, or copy the CSS data URI for background-image. Decoding works the other way: paste a URI or a Base64 payload and get the SVG back.

Need JSX instead?

If the goal is a React component, skip Base64 and use the SVG to JSX converter. It rewrites attributes such as fill-rule into fillRule and keeps the conversion in the tab.

Same privacy rule as the other tools: FileReader stays in the browser. Supported uploads for this encoder are .svg, and URI/CSS paste also accepts .txt, .css, and .html.