Guide
SVG data URIs for CSS backgrounds and masks
Small icons, patterns and decorations do not need to be separate files. Placed in CSS as a data URI, an SVG arrives together with the stylesheet, so there is no extra request and no flash of missing image. The catch is the syntax: a data URI has to be encoded correctly or the browser silently ignores it. This page does the encoding, shows both common forms and previews the result.
How the value is made
An SVG image in CSS is written url("data:image/svg+xml,..."). In the URL-encoded form the SVG source is placed after the comma, with double quotes inside it changed to single quotes so they do not end the CSS string, and characters that are special in URLs or CSS percent-encoded: # becomes %23, < becomes %3C, > becomes %3E. In the Base64 form the whole file is turned into text, data:image/svg+xml;base64,..., which needs no escaping but is about a third longer.
A worked example
Press Sample for a 24 by 24 check mark drawn with an indigo stroke #6366f1. URL-encoded, the value starts url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236366f1' … and the page reports 242 characters. The Base64 version of the same icon is 306 characters. The background rule adds background-repeat: no-repeat;, background-position: center; and background-size: contain;, so the icon sits centred in its element without tiling.
Background or mask
As a background, the SVG keeps its own colours: the sample check mark stays indigo. As a mask, the browser uses the shape of the SVG as a stencil and shows whatever is behind it, here background-color: currentColor. The mask rule is written twice, -webkit-mask and mask, with no-repeat center / contain. The result takes the text colour of the element, so hover and dark mode work with one icon file, and the preview paints it in a rose colour to show that. The original stroke colour in the SVG no longer matters.
Choosing an encoding
URL-encoding is usually shorter and keeps the SVG readable inside the stylesheet, which helps when reviewing code and compresses well with gzip. Base64 is safer in pipelines that mishandle quotes or percent signs, for example some email clients and older tools. The page shows both lengths so you can choose with numbers. If the stylesheet is compressed in transit, the difference shrinks further.
Edge cases
An SVG used as an image needs xmlns="http://www.w3.org/2000/svg"; the converter adds it when the source lacks one, and removes the XML declaration, DOCTYPE and comments. Images loaded this way cannot run scripts or load external resources, and CSS from the page does not reach inside them, so currentColor inside the SVG does not follow the page: use the mask version when you want that. Very large images make a heavy stylesheet that blocks rendering and cannot be cached on its own. Keep data URIs for icons and small patterns.
Limits
The converter does not optimise the SVG, so run the optimiser first for the smallest value. It does not handle several images or sprites. Mask support is broad in current browsers, although older versions need the -webkit- form that is included. The text must contain an <svg> element, or the page shows an error. Everything is processed in your browser.
Related tools
- SVG Optimizer shrinks the source before encoding.
- SVG to JSX Converter is the alternative for component-based projects.
- SVG Sprite Generator serves many icons from one file.
- Image to Base64 encodes raster images the same way.
Checked against the current version of the SVG to CSS Data URI Converter on .