Convertidor de SVG a fondo de CSS Codifica el código SVG como una imagen de fondo de CSS utilizando la codificación URI de datos.

🎨

SVG a fondo de CSS

Codifica el código SVG como una imagen de fondo de CSS utilizando la codificación URI de datos.

Pega el código SVG

Introduce o pega tu marcado SVG en el campo de entrada.

Configura las propiedades del fondo

Configura los ajustes de tamaño, repetición y posición del fondo.

Copia el CSS

Previsualiza el SVG como un fondo y copia el código CSS.

Loading tool...

What Is SVG a fondo de CSS?

La herramienta de conversión de SVG a fondo CSS convierte el código SVG en una imagen de fondo CSS utilizando la codificación URI de datos. Esta técnica incrusta el SVG directamente en tu CSS sin requerir archivos de imagen separados o solicitudes HTTP. Simplemente pega tu código SVG, configura tamaño de fondo, repetición de fondo y posición de fondo, y la herramienta genera el CSS codificado. La codificación URI de datos reemplaza caracteres especiales (como <, >, #) con equivalentes seguros para URL para que el SVG se pueda incrustar de manera segura en una función url() de CSS. La vista previa muestra el SVG aplicado como fondo en un elemento de ejemplo. Este enfoque es ideal para iconos pequeños, patrones y elementos decorativos que deseas incluir en tu CSS sin dependencias de archivos externos.

Why Use SVG a fondo de CSS?

No se necesitan archivos de imagen separados: el SVG está incrustado directamente en el CSS
Elimina las solicitudes HTTP para activos SVG pequeños
Tamaño, repetición y posición del fondo configurable
La previsualización en vivo muestra el SVG como un fondo CSS

Common Use Cases

Fondos de iconos

Incrusta iconos SVG pequeños directamente en el CSS para botones y marcadores de lista.

Fondos de patrones

Codifica patrones SVG repetidos como fondos CSS sin archivos de imagen.

Elementos decorativos

Agrega decoraciones SVG a pseudo-elementos mediante fondos CSS.

Plantillas de correo electrónico

Incrusta gráficos SVG en el CSS para plantillas de correo electrónico donde es posible que se bloqueen las imágenes externas.

Technical Guide

Los URI de datos SVG utilizan el formato: url("data:image/svg+xml,<svg-codificado>"). El contenido del SVG se codifica en URL reemplazando caracteres especiales: < se convierte en %3C, > se convierte en %3E, # se convierte en %23 y las comillas se convierten en comillas simples. Esta codificación es más eficiente que Base64 para SVG ya que mantiene la legibilidad y suele ser más pequeña. La propiedad background-image acepta el URI de datos y las propiedades de fondo estándar (tamaño, repetición, posición) controlan la representación. Para SVG grandes, considera usar archivos externos en su lugar, ya que los URI de datos grandes aumentan el tamaño del archivo CSS y no se pueden almacenar en caché de forma independiente. Tamaño de fondo: contain escalas el SVG para que quepa dentro del elemento manteniendo la relación de aspecto. Tamaño de fondo: cover llena el elemento, potencialmente recortando el SVG. Valores específicos en píxeles o porcentajes dan un control preciso.

Tips & Best Practices

1
Utiliza la codificación URL (no base64) para un tamaño de archivo más pequeño con SVG
2
Elimina los atributos SVG innecesarios para minimizar el tamaño codificado
3
Mantén los SVG pequeños: las URI de datos grandes hacen que el CSS se inflen y no pueden ser almacenadas en caché por separado
4
Utiliza comillas simples en el SVG para evitar problemas de escape en el CSS

Related Tools

Patrón de fondo CSS

Crea patrones de fondo de CSS repetidos, incluyendo rayas, tablero de ajedrez, puntos y más.

🎨 CSS & Design

Búsqueda de Iconos

Busca y personaliza iconos SVG de código abierto con tamaño, color y trazo ajustables.

🎨 CSS & Design

Generador de Variables CSS

Genera propiedades personalizadas de CSS (variables) para colores, espaciado y tipografía.

🎨 CSS & Design

Generador de patrones SVG

Genera patrones repetitivos basados en SVG para fondos CSS con diversas formas.

🎨 CSS & Design

Frequently Asked Questions

Q ¿Es mejor la codificación de URI de datos que base64 para SVG?

Sí, el SVG codificado por URL es generalmente más pequeño que base64 y sigue siendo legible para humanos en el CSS.

Q ¿Puedo utilizar cualquier SVG?

Sí, se puede codificar cualquier código SVG válido. Elimina los atributos y espacios innecesarios para un tamaño óptimo.

Q ¿Funciona en todos los navegadores?

Sí, las URI de datos SVG en fondos CSS están soportadas en todos los navegadores modernos.

Q ¿Qué pasa con los SVG grandes?

Para SVG grandes o complejos, utiliza archivos SVG externos en su lugar. Las URI de datos no se pueden almacenar en caché de forma independiente del CSS.

Q ¿Puedo utilizar SVG de URI de datos en etiquetas <img>?

Sí, el mismo formato de URI de datos funciona en los atributos src de img y background-image de CSS.

About This Tool

SVG a fondo de CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.