Skip to developer tool
DEVELOPER TOOLKIT CSS & COLOR

SVG to CSS Data URI Converter

Embed a small SVG in CSS or HTML, or recover the XML from an existing SVG data URI. Choose an encoding and inspect the image without inserting its markup into the tool document.

Browser-based · No account required · Copy and export

Open workspace Read the guide
BUILT FOR THE DETAILS
  1. 01Add your input
  2. 02Inspect & adjust
  3. 03Use your result
Browse developer tools

Workspace

Ready to use

Never render untrusted SVG as active inline HTML. The preview uses an image element; review unknown SVG markup before reuse.

How to use SVG to CSS Data URI Converter

  1. Paste valid SVG XML, including an optional XML declaration.
  2. Choose percent encoding or Base64 and raw URI, CSS declaration or HTML image output.
  3. Encode and copy or download the snippet. To reverse a raw SVG data URI, paste it into the source and choose Decode data URI.

When to use this tool

Embed an SVG icon in a CSS background or move it through a text-only field. Compare percent encoding with Base64 and verify that the destination accepts data URIs.

Encoding preserves markup; it does not sanitize it

Percent encoding represents reserved characters explicitly, including spaces and quotes. Base64 first encodes Unicode as UTF-8 bytes. The preview loads the URI as an image. Decoding accepts the supported image/svg+xml URI forms and validates that the recovered XML has an SVG root.

Worked example

SVG: <svg xmlns="http://www.w3.org/2000/svg"/>
URI starts: data:image/svg+xml,%3Csvg
CSS: background-image: url("data:image/svg+xml,...");

Limits and output checks

Encoding is reversible and does not remove scripts, links or external references from source markup. The preview is an image context, not a sanitizer. Decode expects a raw URI rather than a complete CSS or HTML snippet. Large images are usually better served as separate assets.

Reference: Data URL syntax.

Frequently asked questions

Can I use an XML declaration?

Yes. The XML parser validates the document and SVG root rather than requiring the source to start literally with <svg.

Does Base64 make an SVG private?

No. Both supported encodings are reversible representations.

Can I decode CSS directly?

Copy the raw data URI out of the CSS url() wrapper before decoding.

Encoding an SVG does not sanitize it

Choose a supported encoding and inspect the image-context preview. When decoding, provide the raw data URI rather than its surrounding CSS wrapper.

Scope of this workflow

Base64 and URL encodings are reversible. Scripts, links or external references in source markup are not removed by encoding.

SVG Optimizer - Precision & ViewBox Preservation · All developer tools · Privacy policy · Contact PixelOkay