SVG to Data URI
Convert SVG to an inline data URI, base64 string, CSS background-image snippet, or HTML img tag. Embed SVGs without external files.
URL-encoded vs Base64
URL-encoded (Recommended)
Encodes only characters that are invalid in URLs using %XX notation. The SVG markup remains mostly readable. Results in smaller output than base64 for most SVGs because alphanumeric characters pass through unencoded.
data:image/svg+xml,%3Csvg... Base64
Encodes the entire SVG as a base64 string. Required for use in some older environments. Typically 33% larger than the original due to base64 overhead, but universally supported in all contexts.
data:image/svg+xml;base64,PHN2Zy4uLg== Output Formats
Data URI
The raw data: string, usable anywhere a URL is expected - src, href, url() in CSS.
CSS Background
A ready-to-paste CSS rule using background-image with background-size: contain and no-repeat.
HTML img tag
An <img> element with the data URI as the src. Drop into any HTML without needing a separate SVG file.