SVG a CSS

¿Qué es una data URI de SVG en CSS?

Una data URI permite incrustar una imagen directamente dentro del CSS en lugar de apuntar a un archivo separado. Para SVG, aparece como un background-image cuya url apunta a un recurso data:image/svg+xml, con el SVG codificado en base64 o percent-encoded en el propio valor. Incrustar un SVG de esta forma elimina una petición de red, lo cual es útil para iconos pequeños, patrones decorativos y gráficos hechos solo con CSS. Esta herramienta genera ambas codificaciones a partir del código que pegas y las formatea como una regla background-image que pegas directamente en la hoja de estilos.

Cómo convertir SVG en una data URI de CSS

Transformar tu SVG en CSS toma solo unos pocos pasos:

1. Pega tu código SVG sin procesar en el cuadro de entrada.
2. Haz clic en Convertir a CSS para generar ambas codificaciones de data URI.
3. Compara el tamaño en bytes que se muestra junto a cada codificación.
4. Revisa la vista previa en vivo para confirmar que el SVG se renderiza correctamente.
5. Copia la declaración background-image URL-encoded o base64 en tu hoja de estilos.

URL-encoded o base64: ¿cuál es más pequeño?

El base64 siempre infla los datos en cerca de un tercio, porque representa cada tres bytes con cuatro caracteres. La codificación por URL solo escapa el puñado de caracteres que son inseguros dentro de una data URI, como los signos de mayor y menor, la almohadilla, el signo de porcentaje, las comillas y los espacios, manteniendo intacto el resto del texto SVG legible. Para SVG comunes, la forma URL-encoded es notablemente más pequeña y además se mantiene legible. Esta herramienta informa el tamaño en bytes de cada una para que simplemente elijas la menor, y selecciona la codificación más ligera para la vista previa en vivo automáticamente.

¿Convertir SVG en CSS es seguro y privado?

Sí. La conversión ocurre por completo en tu navegador con JavaScript, así que tu código SVG nunca se sube a un servidor. La vista previa en vivo se renderiza apuntando un elemento de imagen a la data URI generada, lo que muestra el arte sin ejecutar ningún script dentro del SVG, y toda la salida se muestra como texto plano. Nada de lo que pegas se almacena ni se transmite.

¿Por qué usar este conversor de SVG a CSS?

• 100 % gratis, sin anuncios, registro ni límites.
• Genera las data URIs en base64 y URL-encoded de una sola vez.
• Produce una declaración background-image lista para pegar en cada una.
• Muestra el tamaño en bytes de cada codificación para que elijas la menor.
• La vista previa en vivo renderiza tu SVG directamente desde la data URI.
• Funciona por completo en tu navegador, así que tu código nunca sale de tu dispositivo.

Preguntas frecuentes