¿Qué codificación debo usar — URL o base64?

La codificación URL produce una salida más pequeña y generalmente se prefiere. Base64 es útil cuando necesita evitar caracteres especiales en ciertos contextos.

¿Por qué minificar primero el SVG?

Eliminar comentarios y espacios en blanco innecesarios reduce la longitud del URI de datos, lo que resulta en cargas de página más rápidas.

¿Puedo usar la salida en Tailwind o CSS Modules?

Sí — el valor de la propiedad CSS generada funciona en cualquier lugar donde se acepte un CSS background-image estándar.

¿Cuáles son los iconos predefinidos?

20 iconos comunes como arrow, check, cross, star, heart, search, menu, close y más están disponibles como puntos de partida con un solo clic.

Conversor de SVG a fondo CSS

Acerca de esta herramienta

Pegue cualquier marcado SVG y obtenga instantáneamente la declaración CSS background-image en formatos codificados en URL y en base64. La herramienta minifica el SVG antes de codificarlo para mantener pequeño el tamaño del archivo y muestra una vista previa en vivo del SVG renderizado como fondo CSS. Incluye 20 preajustes de iconos comunes para que comience rápidamente.

Cómo usar

1 Paso 1: Pegue su código SVG en el área de entrada, o elija uno de los iconos predefinidos.
2 Paso 2: La herramienta minifica el SVG y genera fragmentos CSS codificados en URL y en base64.
3 Paso 3: Previsualice el SVG renderizado como fondo en el rectángulo de muestra.
4 Paso 4: Haga clic en Copy en su fragmento CSS preferido y péguelo en su hoja de estilos.

Why you would embed an SVG inside CSS

An SVG icon is just text — XML markup describing shapes. Because it is text, you can place the whole image directly inside a CSS background-image rule using a data: URI, instead of saving a separate .svg file and linking to it. The payoff is real: one fewer network request, an icon that loads with your stylesheet rather than after it (so no flicker), and a self-contained rule you can paste anywhere. This tool takes any SVG markup and produces that ready-to-use CSS line in two encodings, with a live preview.

Two encodings, and why URL-encoding usually wins

An SVG dropped into CSS contains characters — angle brackets, quotes, hashes — that can break the rule or the URI. There are two safe ways to encode it:

Encoding	How it works	Trade-off
URL-encoded	Replaces only the unsafe characters (`<` → `%3C`, etc.)	Stays human-readable; usually smaller than Base64
Base64	Re-encodes the entire SVG into an opaque ASCII blob	Always valid, but ~33% larger and unreadable

This tool labels the URL-encoded version "recommended" for good reason: because SVG is mostly plain ASCII already, encoding only the handful of special characters produces a shorter string than Base64, and you can still read the shape data in your CSS. Base64 is offered as a fallback for the rare pipeline or older tool that mangles raw SVG in a URI.

A worked example

Pick the Check preset (a tick mark) — or paste your own SVG — and click Convert to CSS. The tool first minifies the markup: it strips comments, collapses runs of whitespace, and removes the spaces between tags. Then it produces two lines:

background-image: url("data:image/svg+xml,%3Csvg…%3C/svg%3E");
background-image: url("data:image/svg+xml;base64,PHN2Zy…");

A 100×100 preview box shows the icon rendered straight from the encoded URL-data, so you can confirm it actually paints before you copy. Each block has its own Copy button.

The `currentColor` trick that makes these icons flexible

Look at the preset SVGs and you will see stroke="currentColor" or fill="currentColor". That is deliberate and worth understanding. currentColor means "use whatever the element's text color is." When an SVG is used inline in HTML, changing the CSS color recolours the icon for free — great for hover states and theming. Important caveat: once an SVG is embedded as a background-image data URI, it is rendered in isolation and currentColor no longer inherits your text colour — it falls back to black. So if you need a specific colour in a CSS background, bake a literal colour (e.g. stroke="%23ff0000" after encoding) into the SVG before converting, rather than relying on currentColor.

Practical use cases

Custom list bullets and checkboxes. Set the data URI as a list-style-image or pseudo-element background.
Button and input icons. A magnifier in a search box or a chevron on a dropdown, with no extra image file to deploy.
CSS-only decorations. Patterns, dividers, and badges that ship entirely inside the stylesheet.
Email and single-file pages. When you cannot rely on external image hosting, an embedded SVG travels with the markup.

Common mistakes and tips

Forgetting background-size and background-repeat. The preview sets background-size: contain and no-repeat; your CSS needs the same, or the icon tiles or crops.
Expecting currentColor to follow text colour in a background. As above, it will not — set an explicit colour for background-image use.
Pasting an SVG without a viewBox. Without one, the icon may not scale to your box. The presets all include a viewBox; keep one on custom SVGs.
Encoding an already-huge SVG. Data URIs bloat your CSS file; for large or many-times-reused illustrations, a linked file or sprite is better. These data URIs shine for small, single-use icons.
Single versus double quotes. The encoder swaps inner double quotes to single quotes so the data URI's own "…" wrapper is not broken — keep that wrapper intact when you paste.

Privacy

The minifying, encoding, and Base64 conversion all happen in your browser. The SVG you paste is never uploaded — it is transformed locally and the result appears instantly, so the tool works offline and is safe for proprietary artwork.