SVG Data URI Encoder
Convert SVG code into optimized Data URIs for inline use.
SVG Data URI Encoder
Convert SVG code into optimized Data URIs for CSS backgrounds or HTML tags instantly.
' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E)
Why use Data URIs for SVGs?
Inlining an SVG as a Data URI directly into your CSS (e.g., as a background-image) or HTML reduces the number of HTTP requests your browser makes when loading a page. This is a common performance optimization for small icons, logos, and UI elements.
URL Encoding vs Base64
For SVGs, URL Encoding is almost always better than Base64. Base64 encoding inflates the file size of the SVG text by ~33%, and when served over GZIP/Brotli compression, it doesn't compress as well as plain text.
URL encoding only escapes a few critical characters (like <, >, and #), keeping the Data URI extremely small while remaining perfectly readable to the browser.
Related Guides
Deepen your understanding with our expert articles.