SVG to CSS Converter

Convert SVG icons and graphics to optimized CSS data URIs with background-image, mask-image, and Tailwind CSS output. Runs entirely in your browser.

Was this tool helpful?

How to Use

Convert any SVG into optimized CSS code in real time. The tool encodes your SVG as a data URI and generates ready-to-use CSS snippets for background images, mask images, and Tailwind CSS classes.

Step-by-Step Usage

Paste your SVG code into the input area on the left. The tool accepts raw SVG markup — copy it from your code editor, Figma export, or any SVG file. The conversion starts instantly as you type.
Choose your encoding method using the toggle at the top. URI encoding (default) produces smaller output for most SVGs. Base64 is a universal fallback that works in every context including CSS custom properties.
Select an output tab on the right panel. "Background" generates a CSS class with background-image. "Mask" generates a color-changeable mask. "Tailwind" produces an arbitrary value class. "Data URI" gives you the raw encoded string.
Customize the class name for CSS outputs. The default is .icon but you can change it to match your naming convention.
Copy the output using the copy button next to the tabs. Paste it directly into your stylesheet, component, or HTML file.
Check the preview to verify your SVG renders correctly at multiple sizes from 16px to 128px on a checkerboard background that reveals transparency.

Output Formats

Background Image: Standard CSS background-image: url("...") with positioning and sizing. Best for decorative graphics, patterns, and fixed-color icons.
Mask Image: Uses mask-image with background-color: currentColor. The SVG acts as a transparency mask, so the icon inherits the element's text color. Change colors with color in CSS — no SVG edits needed.
Tailwind CSS: Generates an arbitrary value class like bg-[url('...')] that you can add directly to your HTML elements.
Data URI: The raw encoded data URI string. Use this when you need the URI for custom CSS, JavaScript, or HTML img tags.

About This Tool

Data URI Encoding: URI vs Base64

SVG files can be embedded in CSS using two encoding methods. Base64 converts every 3 bytes of binary data into 4 ASCII characters, adding approximately 33% overhead regardless of content. URI encoding takes advantage of SVG being text-based XML — it only escapes the few characters that are illegal in URLs (angle brackets, hash symbols, percent signs, curly braces) and leaves the rest of the ASCII content untouched. For typical SVG files, URI encoding produces data URIs that are 15-25% smaller than base64. This tool defaults to URI encoding for this reason.

The encoding algorithm used here mirrors the approach popularized by Taylor Hunt and implemented in the mini-svg-data-uri npm package. It replaces double quotes with single quotes (valid in SVG attributes), then percent-encodes only the characters that CSS url() values cannot contain. The result is a compact, human-readable data URI where you can still see the SVG structure in the encoded string.

The Mask Image Technique for Recolorable Icons

The CSS mask-image property uses an image as a transparency mask. White (or opaque) areas of the mask become visible; transparent areas are hidden. When you combine this with background-color: currentColor, the visible areas take on the element's inherited text color. This gives you a CSS-only icon system where changing the color property changes the icon's color — no JavaScript, no multiple SVG files, no icon font.

Browser support for mask-image is excellent in modern browsers (Chrome 120+, Firefox 53+, Safari 15.4+). This tool includes the -webkit-mask-image prefix for older WebKit browsers. The mask technique works best with monochrome icons — multicolor SVGs will lose their color information since the mask only preserves opacity/luminance data.

Tailwind CSS Integration

Tailwind CSS v3+ supports arbitrary values with square bracket notation. Instead of defining a custom utility, you can write bg-[url('data:image/svg+xml,...')] directly in your HTML. The tool generates the complete class string with the encoded SVG, ready to paste into your markup. For production builds, Tailwind's JIT compiler will include only the utility classes you actually use, so there is no file-size penalty from long arbitrary values in your source.

SVG Optimization Tips

Before converting SVG to CSS, optimize the SVG source to minimize the data URI size. Remove editor metadata added by tools like Illustrator, Sketch, and Inkscape — this tool strips some automatically, but running SVGO (SVG Optimizer) first can reduce file size by 30-60%. Convert shapes to paths where possible, reduce decimal precision to 1-2 places, and remove unused defs blocks. For icons, ensure the viewBox is set correctly so the SVG scales properly at all sizes. The preview panel in this tool shows how your icon renders from 16px to 128px, which helps catch rendering issues early.

Why Use This Tool

Embedding SVGs as CSS data URIs eliminates HTTP requests and gives you fine-grained control over how icons and graphics render. Here are the most common scenarios where this approach is preferred:

Icon systems without icon fonts — Icon fonts have accessibility issues (screen readers may announce font ligatures), anti-aliasing problems at small sizes, and require loading an entire font file even if you use one icon. SVG data URIs in CSS are individually addressable, scale perfectly, and can be color-changed with the mask-image technique.
CSS-only decorations — Background patterns, dividers, arrows on tooltips, custom list markers, and decorative elements can all be SVG data URIs. This keeps your HTML semantic and your visuals in your stylesheet where they belong.
Reducing network requests — Every external SVG file is an HTTP request. For sites with 20-50 small icons, inlining them as data URIs in CSS eliminates 20-50 requests. The CSS file is larger but arrives in a single request and is cached as a unit. HTTP/2 multiplexing reduces this advantage, but the simpler deployment (no image assets to manage) remains valuable.
Email HTML templates — Email clients strip external resources and sometimes block inline SVG. CSS data URIs in background images survive most email client sanitization, making them one of the few reliable ways to include vector graphics in HTML emails.
Component libraries — When building reusable React, Vue, or Svelte components, embedding small SVG icons as CSS data URIs avoids the complexity of SVG import pipelines, bundler plugins, and asset management. The icon travels with the CSS, not as a separate file.
Custom cursor icons — CSS cursor: url("data:image/svg+xml,..."), auto lets you use SVG cursors without external files. This is commonly used for drawing tools, custom crosshairs, and branded cursor experiences.

When Not to Use Data URIs

Data URIs are not cached independently — they are part of the CSS file. If you change one icon, the entire CSS file must be re-downloaded. For large SVGs (over 5-10KB), external files with proper cache headers are more efficient. Complex SVGs with filters, animations, or interactivity should be inlined in HTML rather than embedded in CSS, because CSS data URIs do not support JavaScript event handlers or CSS animations on internal SVG elements.

Privacy

All SVG encoding and CSS generation happens entirely in your browser using JavaScript. Your SVG content is never sent to any server. There are no network requests, no server-side processing, and no data storage. The encoding algorithms are implemented as pure functions that run in the browser's main thread with zero external dependencies.

FAQ

Why is URI encoding smaller than base64 for SVG files?

Base64 encoding converts every 3 bytes into 4 ASCII characters, adding ~33% overhead. URI encoding for SVG only escapes a handful of characters (angle brackets, hash, percent, curly braces) while leaving ASCII text untouched. Since SVG is XML-based text, most of the content passes through unchanged, resulting in data URIs that are roughly 20% smaller than base64.

What is the mask-image technique and why would I use it?

The CSS mask-image property uses an SVG as a transparency mask rather than a direct image. Combined with background-color: currentColor, the SVG shape takes on whatever text color is set on the element. This lets you change icon colors with a single CSS property instead of editing the SVG, making it ideal for icons that need to match theme colors or hover states.

Can I use SVG data URIs in Tailwind CSS?

Yes. Tailwind supports arbitrary values with the bg-[url('...')] syntax. This tool generates the exact Tailwind class you need, including the encoded SVG data URI. Paste the class directly into your HTML element. For mask-image, you will need to use arbitrary properties with the bracket syntax.

Is my SVG data sent to a server for processing?

No. All SVG encoding and CSS generation happens entirely in your browser using JavaScript. The SVG content never leaves your machine. There are no network requests, no server-side processing, and no data storage. You can verify this by disconnecting from the internet and using the tool.

What SVG cleanup does this tool perform?

The tool strips XML processing instructions, HTML comments, editor metadata attributes from tools like Sketch and Inkscape, and collapses redundant whitespace. This reduces the data URI size without affecting how the SVG renders. The original SVG is never modified — cleanup only applies to the encoded output.