Conversor de SVG a URI de datos CSS
Pega marcado SVG en bruto para obtener un URI de datos codificado en URL que puedes insertar directamente en un background-image CSS, además de una vista previa en vivo del SVG renderizado.
Vista previa en vivo
Tu vista previa SVG aparecerá aquí
URI de datos
Fragmento CSS
Preguntas frecuentes
¿Por qué usar un URI de datos en lugar de un archivo SVG externo?
Un URI de datos incrusta el SVG directamente dentro de tu CSS o HTML, ahorrando una solicitud HTTP adicional. Es especialmente útil para iconos pequeños usados puramente como background-image, donde mantener todo en una hoja de estilo es más simple que gestionar un archivo separado.
¿Por qué está codificado en URL en lugar de base64?
Los URI de datos SVG codificados en URL son generalmente más pequeños que el equivalente en base64 y siguen siendo legibles, lo que los hace más fáciles de revisar o ajustar directamente en tu CSS. Los navegadores admiten ambos, esta herramienta usa la opción más compacta y legible.
¿Es seguro pegar SVG de una fuente no confiable?
La vista previa renderiza tu SVG como una '<img>', no se inyecta como HTML activo, así que los scripts incrustados en un SVG malicioso no se ejecutarán en la vista previa. Aun así, trata los archivos SVG como cualquier otro archivo, y pega solo marcado en el que confíes.