Cómo usar: Conversor SVG a CSS
- Pega tu código SVG, abre un archivo
.svgo carga el ejemplo. - Deja activado Limpiar SVG para eliminar comentarios, metadatos y atributos del editor, y elige URL-codificado o Base64.
- Revisa las dos vistas previas: la imagen de fondo normal y la versión de máscara de un solo color.
- Copia el data URI o la regla CSS completa y pégala en tu hoja de estilos.
¿Qué es un data URI de SVG?
Un data URI incrusta un archivo directamente en tu CSS en lugar de enlazarlo: background-image: url("data:image/svg+xml,…"). Para iconos pequeños, separadores, patrones y casillas personalizadas, esto ahorra una petición HTTP, evita el parpadeo de imágenes que aún no han cargado y mantiene el recurso junto a los estilos que lo usan.
Codificación URL vs Base64
SVG es texto, así que no necesita Base64. Base64 aumenta cualquier archivo alrededor de un 33 % y lo convierte en un bloque ilegible que se comprime mal con gzip o Brotli. Un SVG codificado en URL conserva un tamaño cercano al original y sigue siendo legible. Solo hay que escapar unos pocos caracteres:
| Carácter | Codificado | Por qué |
|---|---|---|
# | %23 | De lo contrario inicia un fragmento de URL: colores como #fff rompen la imagen. |
% | %25 | El propio carácter de escape. |
< > | %3C %3E | Recomendado para la compatibilidad con analizadores estrictos. |
" | ' o %22 | Las comillas de los atributos se cambian a comillas simples para que el CSS pueda envolver el URI entre comillas dobles. |
Usa Base64 solo cuando una herramienta o framework rechace cualquier otra opción. Las tarjetas de tamaño bajo la vista previa muestran ambos resultados para que puedas compararlos.
Iconos recoloreables con mask-image
Un SVG usado como imagen de fondo se renderiza de forma aislada: el CSS de la página no puede cambiar sus rellenos, y currentColor dentro de él no seguirá el color de tu texto. El fragmento mask-image resuelve esto usando el SVG solo como plantilla y pintándolo con background-color: currentColor, así un mismo icono funciona en cualquier color, estado hover o modo oscuro. La línea -webkit-mask sigue siendo necesaria en algunos navegadores.
Limpieza y límites
La limpieza elimina la declaración XML, los comentarios, <metadata>, <title> (sin sentido en un fondo), los atributos de Inkscape/Sodipodi/Sketch y los espacios sobrantes, y añade el xmlns necesario si falta; sin él, el navegador no renderiza la imagen. Incrusta solo SVG pequeños (unos pocos KB): los data URI grandes inflan cada descarga de CSS y no se pueden cachear por separado. Para gráficos complejos, enlaza el archivo. ¿Necesitas un componente React en lugar de CSS? Usa SVG a JSX; para imágenes raster, consulta Imagen a Base64.
Uso en Webflow
El panel de Fondos de Webflow espera una imagen subida, así que pega la regla generada en una etiqueta <style> dentro de un elemento Embed o en el código personalizado de la página o del sitio, y asigna a tu elemento la clase correspondiente (por ejemplo, icon).
También se busca como: svg a css, svg data uri, svg a data url, codificar svg en url, svg background image, svg a base64, mask-image, svg inline css.
Herramientas que combinan con: Conversor SVG a CSS
- Codificar / Decodificar URL — Codifica texto en porcentaje para usarlo con seguridad en URL, decodifica cadenas codificadas a texto legible y desglosa cualquier URL en sus partes y parámetros de consulta.
- Codificación y descodificación Base64 — Convierte texto a Base64 y viceversa con compatibilidad total con UTF-8 (acentos, emojis), cambia a Base64 compatible con URL o arrastra un archivo para obtener su cadena Base64 o su URI de datos.
- Minificador CSS — Pega una hoja de estilos para reducirla al instante.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
Preguntas frecuentes
¿Por qué no se muestra mi data URI de SVG?
# sin escapar (en colores como #fff), la falta del atributo xmlns="http://www.w3.org/2000/svg" o comillas desbalanceadas entre el url("…") del CSS y los atributos del SVG. Esta herramienta corrige las tres.¿Es mejor codificar en URL o en Base64 para SVG en CSS?
¿Puedo cambiar el color de una imagen de fondo SVG con CSS?
mask-image y define background-color, que puedes cambiar en hover o en modo oscuro.¿Necesito incluir charset=utf-8 en el data URI?
data:image/svg+xml, basta.