Convertir un SVG en fondo CSS
Pegue un SVG y obtenga directamente una regla CSS background-image lista para pegar en su hoja de estilos, sin necesidad de alojar un archivo de imagen aparte.
¿Por qué usar un SVG como fondo CSS en lugar de un archivo de imagen?
Codificar un SVG directamente en la hoja de estilos como data URI evita una petición HTTP adicional para cargar un archivo de imagen aparte, lo que puede acelerar ligeramente la visualización de iconos pequeños. También resulta práctico para componentes autónomos (un único archivo CSS ya contiene su icono).
¿Por qué el SVG se codifica como URL y no en base64?
La codificación como URL (con algunos caracteres escapados como #, < y >) suele producir un data URI más corto y legible que el base64 para texto como el SVG, lo que reduce ligeramente el peso final del CSS.
¿Puedo cambiar el color del icono después de integrarlo como fondo CSS?
No, una vez codificado en background-image, el color del SVG queda fijado en el data URI: para cambiar de color, modifique el color en el SVG de origen antes de volver a generar el CSS (por ejemplo, con nuestra herramienta de reemplazo de color SVG).
Procesamiento 100% local: la codificación se realiza íntegramente en su navegador; su SVG nunca se envía a un servidor.