SVG data URI
SVG data URI generator for CSS and HTML
Use this SVG data URI generator to encode SVG code for CSS background-image, HTML img src, or a plain data URL.
SVG data URI generator
Paste SVG code or load a .svg file. The encoded outputs are generated locally.
Original SVG
-
Data URI
-
Best use
Small icons and CSS backgrounds
Encode SVG for CSS background-image
An SVG data URI lets you use SVG directly inside CSS or HTML without a separate file request. It works well for small icons, masks, bullets, simple backgrounds, and UI details.
This tool cleans and minifies the SVG before encoding it. Use the CSS output for background-image, the plain data URI for code that expects a URL string, or the HTML img output for a quick inline image.
Large SVG files can make CSS harder to read. If the file is big, use the SVG minifier first or keep the SVG as a normal asset.
Common questions
Can I encode SVG for CSS background-image?
Yes. The tool generates a CSS-ready url("data:image/svg+xml,...") string for background-image and similar CSS properties.
Does the SVG data URI generator upload my file?
No. The SVG is cleaned, minified, encoded, and previewed in the browser.
When should I use an SVG data URI?
Use it for small icons, masks, bullets, and simple UI graphics. For large SVG files, a separate SVG asset is usually easier to cache and maintain.