SVG to Data URI
Convert SVG Code to an Inline Data URI
Turn SVG markup into a compact data URI you can embed directly in CSS or HTML with no extra HTTP request.
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.
