SVG to CSS Data URI Converter

What is an SVG data URI?

A data URI embeds a file directly in your CSS instead of linking to it: background-image: url("data:image/svg+xml,…"). For small icons, dividers, patterns and custom checkboxes this saves an HTTP request, avoids a flash of missing images and keeps the asset next to the styles that use it.

URL-encoding vs Base64

SVG is text, so it doesn’t need Base64. Base64 inflates any file by about 33% and turns it into an unreadable blob that compresses poorly with gzip or Brotli. A URL-encoded SVG stays close to its original size and readable. Only a few characters must be escaped:

Use Base64 only when a tool or framework rejects anything else. The size cards under the preview show both results so you can compare.

Recolourable icons with mask-image

An SVG used as a background image is rendered in isolation: CSS on the page can’t change its fills, and currentColor inside it won’t follow your text colour. The mask-image snippet solves this by using the SVG only as a stencil and painting it with background-color: currentColor, so one icon works in any colour, hover state or dark mode. The -webkit-mask line is still needed for some browsers.

Cleanup and limits

Cleanup removes the XML declaration, comments, <metadata>, <title> (meaningless in a background), Inkscape/Sodipodi/Sketch attributes and extra whitespace, and adds the required xmlns if it’s missing — without it the browser won’t render the image. Embed only small SVGs (a few KB): large data URIs bloat every CSS download and can’t be cached separately. For complex graphics, link the file instead. Need a React component rather than CSS? Use SVG to JSX; for raster images, see Image to Base64.

Using it in Webflow

Webflow’s Backgrounds panel expects an uploaded image, so paste the generated rule into a <style> tag in an Embed element or in the page/site custom code, and give your element the matching class (e.g. icon).

Tools that pair well with the SVG to CSS Converter

• CSS Minifier — Paste a stylesheet to shrink it instantly.
• CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
• Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
• Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.