Engineering Tool

SVG to Data-URI

Convert raw SVG code into a CSS-ready Data-URI string. Perfect for embedding icons and small graphics directly in your stylesheets.

Latency Optimized

Client Side

Paste SVG Code

173 characters

Data-URI String

data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /%3E%3C/svg%3E

CSS Background Property

background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /%3E%3C/svg%3E");

Embedding SVGs as Data-URIs reduces HTTP requests, but makes CSS files larger. Use only for small icons.