SVG a CSS
Convierte SVGs en snippets CSS para fondos, máscaras y uso inline.
Arrastra y suelta tu archivo SVG
o haz clic para buscar, o pega el código SVG
Por qué usar SVG a CSS
Snippets background-image
Genera URLs para background-image a partir de SVG en segundos. Ideal para iconos, patrones y decoraciones UI.
Salida inline
Útil para prototipos rápidos o CMS donde no puedes añadir archivos nuevos.
Colores amigables con temas
Funciona con currentColor para heredar color desde CSS. Combínalo con variables CSS y tokens.
Listo para copiar
Se encarga de la codificación para evitar errores con caracteres especiales en CSS.
Procesamiento local
Sin subidas y con resultados instantáneos.
Cómo convertir SVG a CSS
Añade tu SVG
Arrastra y suelta o pega el marcado. Se carga localmente y se prepara para codificación.
Genera el snippet
Elige Base64 o URL-encoded y genera un data URI listo para CSS.
Pega en tu CSS
Úsalo en background-image: url(...), estilos inline o variables CSS.
Preguntas frecuentes: SVG a CSS
¿Cómo uso un SVG como fondo CSS?
¿Base64 o URL-encoded?
¿Tengo que escapar caracteres especiales?
¿Puedo usar currentColor?
¿Se suben archivos?
¿Hay límite de tamaño?
¿Conviene optimizar antes?
¿Es gratis?
¿Necesito cuenta?
Herramientas SVG relacionadas
Optimiza y ajusta el SVG antes de embebir para obtener CSS más corto y fiable.
SVG a Data URI
Compara Base64 vs URL-encoded y longitudes de salida.
Abrir herramientaSVG Optimizer
Comprime el origen para reducir el string final.
Abrir herramientaReemplazador de color SVG
Ajusta colores y currentColor antes de generar el snippet.
Abrir herramientaMinificador SVG
Reduce whitespace para mantener el CSS compacto.
Abrir herramienta