Cómo se usa
- Suelta un archivo .svg en la zona de arrastre, haz clic para elegir uno o pega una imagen.
- Deja Convertir a en Mantener original para codificar el propio código SVG, o elige PNG, JPEG o WebP para convertirlo en píxeles.
- Si lo rasterizas, fija un Ancho máximo para controlar el tamaño en píxeles.
- Copia la salida de background-image de CSS para una hoja de estilo, o la versión en data URI, Base64 puro, etiqueta img o Markdown.
SVG como data URI
SVG (Scalable Vector Graphics, tipo MIME image/svg+xml) describe formas como texto XML, así que se ve nítido a cualquier tamaño. Su Base64 suele empezar por PHN2Zy (el <svg codificado) o por PD94bWw cuando el archivo comienza con una declaración XML.
Cuando un SVG se usa como imagen, el elemento raíz debe llevar xmlns="http://www.w3.org/2000/svg". Muchos fragmentos de SVG copiados directamente del HTML lo omiten, y entonces el data URI no muestra nada. Además, en el modo imagen se bloquean los recursos externos, así que las fuentes web y las imágenes enlazadas dentro del SVG no se cargan; convierte antes el texto en trazados o incrusta esos recursos.
¿Base64 o codificación URL?
Como SVG ya es texto, un data URI puede llevar el código directamente, con solo unos pocos caracteres en codificación porcentual (<, >, #, % y las comillas). Para un icono típico en CSS, eso es más corto que Base64 y se comprime mejor con gzip. Base64 es la opción más segura cuando la cadena pasa por sistemas que estropean las comillas o los caracteres especiales, o cuando una API espera Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Codificación porcentual */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Para generar la forma con codificación porcentual, usa el Generador de data URI y elige Codificación porcentual.
Sanea los SVG que no sean de confianza
Un SVG puede contener elementos <script>, atributos de controladores de eventos como onload y enlaces a otros documentos. Los navegadores no ejecutan scripts en un SVG mostrado mediante <img> o como fondo CSS, pero el mismo archivo insertado en el HTML o abierto por sí solo sí puede ejecutarlos. Si los usuarios pueden subir archivos SVG a tu aplicación, sanéalos, por ejemplo con DOMPurify, antes de guardarlos o incrustarlos. Base64 solo oculta el código a simple vista; no lo hace seguro.
Preguntas frecuentes
¿Qué es mejor para SVG, Base64 o la codificación URL?
Para SVG en CSS, la codificación URL suele ocupar menos y sigue siendo legible. Base64 es más robusto cuando la cadena pasa por otros sistemas o cuando una API exige Base64.
¿Por qué no se muestra mi data URI SVG?
xmlns en el elemento raíz, que haya un # sin escapar en un URI con codificación porcentual o que el SVG cargue fuentes o imágenes desde otros archivos.¿Puedo convertir un SVG en una cadena Base64 PNG?
Sí. Elige PNG en Convertir a. El navegador renderiza el SVG en píxeles, y la opción Ancho máximo te permite reducir el resultado.