SVG to Data URI
Turn SVG markup into a compact data URI you can embed directly in CSS or HTML with no extra HTTP request.
Runs entirely in your browser.
Convert SVG Code to an Inline Data URI
Preview
About SVG Data URIs
A data URI embeds the contents of a file directly inside a URL using the data: scheme. Embedding a small SVG icon as a data URI removes a separate network request, which can speed up page rendering for icons, bullets, backgrounds, and decorative shapes that appear on many pages.
For SVG specifically, URL-encoding usually produces a smaller result than Base64. Base64 inflates data by roughly 33 percent, while SVG is plain text that compresses well and only needs a handful of characters escaped. This tool URL-encodes the markup and then restores characters that are safe inside a CSS url() value, such as quotes and angle brackets, for the most compact output. Use the Base64 option when a tool or environment requires it. Learn more in the SVG Tutorial and the CSS background-image reference.
