Figma plugin
Search SketchValley illustrations and drop them straight into your Figma frames.
- Search the whole library inside Figma
- Inserts editable vectors, not flat images
- Free, no account needed
Tailwind SVG Encoder — SVG to Data URI
Turn any SVG into a Tailwind bg-[url()] class that actually compiles, an icon that changes color with text-*, plain CSS or a data URI. The SVG is cleaned up and shrunk first, you can recolor it, and you get reusable snippets for Tailwind v3 and v4.
100% private — your SVG never leaves your browser
Or try a sample
How to use an SVG as a Tailwind background
1
Add your SVG
Drop one or more .svg files, or paste SVG code, JSX from a React icon library, or an existing data URI.
2
Pick how you’ll use it
Background for patterns, dividers and illustrations; Icon mask for icons that follow the text color; img for an image tag. Adjust fit, size and colors while the live preview shows exactly what the class renders.
3
Copy and paste
Copy the Tailwind class, the CSS, or a reusable tailwind.config.js / @utility snippet so you can write bg-wave instead of a long URL.
Why this encoder is different
Classes that compileSpaces, quotes, brackets and underscores are escaped, so Tailwind doesn’t silently drop the class. Checked with Tailwind v3 and v4.
Icons that take text colorIcon mask mode works with
text-*, hover: and dark mode — something background images can’t do.Smaller outputRemoves editor junk, unused IDs and comments, compacts paths and shows the bytes saved.
Recolor firstChange any fill or stroke color, or replace
currentColor, before encoding.Whole icon setsAdd many SVGs at once and copy one config block or CSS file for all of them.
Decode, tooPaste a data URI or a
bg-[url()] class to get the SVG back.Frequently asked questions
How do I use an SVG as a background image in Tailwind CSS?
Use an arbitrary value: bg-[url('data:image/svg+xml,…')]. The SVG has to be percent-encoded first, and Tailwind classes can’t contain spaces, so every space, quote, bracket and underscore inside the SVG must be encoded too. Paste your SVG here and copy the finished class — it is tested against the real Tailwind v3 and v4 compilers.
Why does my Tailwind bg-[url()] class not work?
Almost always because the SVG inside it contains spaces or quotes. A space splits the class into two broken classes, and Tailwind silently generates nothing. Underscores also turn into spaces in arbitrary values. This encoder escapes all of those characters so the class compiles.
How do I change the color of an SVG icon with Tailwind?
A background image can’t inherit text color. Switch to Icon mask mode: the SVG becomes a CSS mask over bg-current, so the icon takes the color of any text-* class, like text-indigo-600 or hover:text-white. It works best with single-color icons.
Should I use URL-encoding or base64 for SVG data URIs?
URL-encoding. It is usually 20–35% smaller than base64, compresses better with gzip and stays readable. Use base64 only if a tool or email client requires it — you can switch between both here and compare the sizes.
Does this work with Tailwind v3 and v4?
Yes. The arbitrary-value classes work in both. For icons you reuse, the tool also writes a tailwind.config.js entry for v3 or an @utility block for v4, so you can use short classes like bg-wave or icon-arrow.
Can I decode a data URI back into an SVG?
Yes. Paste a data URI, a CSS url(…) or a Tailwind bg-[url(…)] class and the tool decodes it back into editable SVG code.
Does the encoder optimize my SVG?
Yes. It removes editor metadata from Illustrator, Inkscape, Figma and Sketch, comments, unused IDs and empty groups, compacts path data and can round decimals — and shows exactly how many bytes you saved. You can also paste JSX from React icon libraries.
Is my SVG uploaded anywhere?
No. Everything happens in your browser. Your SVG code never leaves your device.
Need SVGs to encode?
Download a free SVG illustration from SketchValley, recolor it with the SVG Color Changer, or make one with the AI SVG Generator.
Browse free SVG illustrations →