How to use the SVG to CSS Data URI Converter
- 1. Paste SVG codeFrom your icon set or design tool's Copy as SVG.
- 2. Choose encoding and useURL-encoded or base64, and background, mask or list bullet.
- 3. Copy the CSSPaste the rule into your stylesheet.
What happens to the sample
The sample is a 24 × 24 check-mark icon with an XML declaration, a comment and indentation. The converter parses it in your browser, keeps only the svg element, removes the comment and whitespace between tags, and turns double quotes into single quotes so the result can sit inside url("…"). It then percent-encodes only the characters that need it, such as <, > and #, which keeps the URI short and still readable. The summary shows the length before and after.
The result is a rule that starts background-image: url("data:image/svg+xml, followed by the encoded icon; a preview shows the icon drawn from the data URI itself.
Background or mask?
- background-image shows the icon exactly as drawn, with its own colours.
- mask-image uses the icon's shape only and fills it with background-color, so
currentColormakes the icon match the text colour and hover states. - list-style-image turns the icon into a custom bullet.
URL encoding is usually smaller than base64 for SVG, because base64 adds about a third to the size and is not compressible text. Icons shown through CSS cannot have alt text, so use them only for decoration; meaningful icons belong in the HTML with a label. The preview uses an img element, so any script inside the SVG cannot run, and the tool warns if it finds one. Turn colours into CSS values with the colour code converter, or encode other files with the Base64 encoder.
Frequently asked questions
Why does my data URI not show in Firefox?
Usually an unencoded # in a colour like #ff5421. This tool encodes # as %23, which fixes it.
Is a data URI faster than a separate file?
For small icons used once it saves a request. For large or repeated images, a separate cached file is better.
Is the SVG to CSS Data URI Converter free?
Yes, the SVG to CSS Data URI Converter is free. The first time you convert your first SVG, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.