Web Tools tools.bryantsmith.com

Images & SVG

SVG to Data URI

Paste SVG markup to get a ready-to-use data URI for CSS backgrounds and HTML <img> tags. Everything runs in your browser — your SVG never leaves the page.

Runs in your browser v1.0.0

SVG source

paste markup

Paste a complete <svg>…</svg> element. XML declarations, comments and indentation are optional.

Encoding

Preview

live

Nothing to preview yet

Paste SVG markup above to see it rendered.

Output

data URI

Copy as

CSS output is a ready background-image declaration; HTML output is an <img> tag.

How it works

URL-encoded data URIs keep letters, digits and safe punctuation intact while percent-encoding the characters that break CSS or HTML contexts — spaces, quotes, angle brackets, ampersands and #. They are usually smaller and far more readable than Base64. Base64 is offered for maximum compatibility with older tooling. Missing viewBox, unescaped & and external references are flagged so the image does not fail silently later.

Related tools

  • Base64 Image ConverterConvert an image to a Base64 data URI or decode a data URI back into a downloadable image — all in your browser.
  • SVG Background GeneratorBuild lightweight, tileable SVG background patterns with a live preview, then copy the SVG or CSS.
  • Favicon GeneratorTurn one source image into favicon.ico, PNG icons, a web app manifest and copy-ready HTML link tags — entirely in your browser.
  • Image CompressorCompress images in your browser with a live before/after quality comparison and instant size savings.
  • Image CropperCrop images in your browser with freeform handles, exact pixel fields, or common aspect ratio presets.
  • Image Dimension InspectorDrop in an image to instantly read its dimensions, aspect ratio, file size, MIME type, and metadata — all in your browser.

More Images & SVG tools