Can I use the data URI in an tag?

Yes. Choose the output for a ready tag, or CSS for a background-image rule.

SVG to Data URI & CSS Converter

Turn any SVG into an optimised, URL-encoded data URI, base64 string, CSS background or <img> tag.

Precision3MultipassPretty

Drop SVG files here, or paste SVG code

Up to 100 files at once · optimised with SVGO in your browser — nothing is uploaded.

Loading Tool...

Help shape SVG to Data URI & CSS Converter

The bug you just noticed will fade in 3 minutes. The feature idea will vanish after your next tab switch. Crazy peps don't suffer silently.

0/1000

URL-encoded is usually about 30% smaller than base64 for SVG and compresses better with gzip. Base64 is only needed by a few older tools.

Every byte ends up in your CSS. Removing metadata, comments and extra precision first keeps stylesheets small.

Yes. Choose the <img> output for a ready tag, or CSS for a background-image rule.

No. Encoding and optimisation happen in your browser.