TailwindreadyTailwindready
Free tool

SVG to Data URI Converter

Paste an SVG and get it as a data URI you can drop into CSS, an img tag, or a Tailwind arbitrary background class. No file to host.

Your SVG

Preview

Preview of the encoded SVG
Encoding

Original 213 bytes, data URI 242 bytes.

Tailwind class
bg-[url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2724%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%230e7490%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E')]
CSS
background-image: 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='%230e7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
HTML image
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E" alt="" />
Data URI
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E

Frequently asked questions

How do I use an SVG as a background in Tailwind CSS?

Use an arbitrary background: bg-[url('data:image/svg+xml,...')]. This tool encodes spaces and special characters so the class works inside Tailwind's brackets.

URL-encoded or Base64, which should I pick?

URL-encoded is usually smaller and stays readable, so it is the better default for SVG. Base64 adds about a third more bytes but is handy when a tool does not accept raw characters.

Why does my SVG data URI not show up?

Most often the xmlns attribute is missing, or characters like # and < are not encoded. This tool adds xmlns when needed and encodes the rest.

Can I change the color of an SVG background image?

Not with Tailwind color classes, because an SVG loaded as an image cannot inherit currentColor. Put the color you want directly in the SVG before converting, or use the SVG inline instead.

Guides that go with this tool

More free Tailwind CSS tools

Tailwind class cleanerDedupe, sort and find conflicts in a class list.Tailwind breakpointsA live breakpoint viewer plus the default values.CSS to Tailwind converterPaste CSS and get Tailwind v4 utility classes back.Box shadow generatorLayer shadows visually and copy the Tailwind class.Color palette generatorA full 50–950 shade scale and color combinations from any base color.Gradient generatorBuild a gradient and copy ready-to-use Tailwind classes.

Browse all 34 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

HTML to JSX converterPattern generatorBrowse components