SVG to Data URI encoder

SVG

Input

Data URI

Output


Markup

Example

Preview

Result

Image using SVG as encoded data URI
Inlined SVG
An image tag using inlined SVG

Why

Save a server request by inlining SVG contents right into the code. Encode SVG contents as data URI and use it as image source. The SVG will be rendered right from the code without triggering a server request.

About

This tool will:

  • Encode only unsafe characters
  • Remove redundant white space
  • Remove comments
  • Remove XML declaration
  • Remove doctype declaration
  • Replace double quotes with single quotes
  • Add XML namespace if needed

Fun facts

  • Inlining a small SVG as data URI will save an HTTP request
  • Inlined files must be URI-encoded to avoid conflict with URL delimiters and protocols
  • Use encodeURIComponent to encode plain-text files, use base64 to encode binary files
  • SVGs are plain text XML files, JPG/PNG/GIF are binaries
  • Base64-encoding inflates file size by ~30%, URI-encoding can be optimized to do better
  • SVGs can be highly optimized, especially by hand
  • URI-encoded SVG gzips better than base64 because its content is more repetitive
  • Enable gzip compression for SVG on your server
  • Limit the use of inlining to small files ~1KB
  • You should almost never inline files bigger than 4KB
  • Inlining inside CSS is a render-blocking procedure
  • Inlined SVGs cannot be cached
  • Do not inline too many images, prefer SVG sprites from a cacheable external SVG file
  • HTTP 2 (parallel responses) will make inlining obsolete (that is if you only intended to save HTTP requests)
  • Inlining small files is still convenient for bundling small images in a single file