SVG a Base64 y Data URI
Inserta SVG directamente en CSS o HTML. Obtén data URI codificados para URL y en Base64, fragmentos CSS listos y una etiqueta <img>.
- Sin subidas
- Funciona sin conexión
- Gratis, sin registro
- Tus archivos no salen del navegador
Suelta archivos SVG aquí
o pega código SVG en el editor. Puedes abrir varios archivos a la vez.
Tu SVG se queda en este dispositivo. No se sube nada.
Cómo usar el Conversor de SVG a Base64 / Data URI
- 1
Pega tu SVG
Pega código SVG o suelta un archivo. También puedes pegar un data URI existente para decodificarlo de nuevo a SVG.
- 2
Elige una salida
Elige un data URI codificado para URL (normalmente el más pequeño), Base64, fondo CSS, máscara CSS o una etiqueta HTML <img>.
- 3
Copia
Copia el fragmento en tu hoja de estilos o tu HTML. El tamaño de cada opción aparece a su lado.
Cuándo insertar un SVG como data URI
Un data URI mete toda la imagen dentro de tu CSS o HTML, así que el navegador no hace una petición aparte para ella. Es ideal para gráficos pequeños y muy usados: iconos en CSS, casillas y flechas de select personalizadas, patrones de fondo y marcadores de posición.
Para ilustraciones grandes suele ser mejor un archivo .svg aparte: el navegador puede guardarlo en caché por separado y no engorda tu hoja de estilos.
SVG codificado para URL frente a Base64
Base64 convierte cada 3 bytes en 4 caracteres, así que siempre añade alrededor de un 33 % al tamaño. Un SVG codificado para URL solo escapa los pocos caracteres que no son seguros en una URL (<, >, #, % y las comillas), así que sigue siendo legible y normalmente es más pequeño, sobre todo con gzip. viewsvg muestra ambos, con su tamaño, para que elijas.
Todo lo que necesitas para trabajar con SVG
El Conversor de SVG a Base64 / Data URI forma parte de un único espacio para ver, editar, optimizar y convertir archivos SVG, sin registro, sin anuncios y sin subidas.
Vista previa al instante
Zoom hasta el 6400 %, desplazamiento, ajuste a la pantalla y fondo transparente, blanco, negro o del color que quieras.
Editor de código en vivo
Resaltado de sintaxis, marcadores de error por línea, formatear y minificar, búsqueda e historial de deshacer completo.
Contorno y cuadrícula
Ve cada trazado en modo contorno y comprueba la alineación de píxeles con la cuadrícula al hacer zoom.
Inspeccionar
Tamaño del archivo y con gzip, viewBox, árbol de elementos con resaltado y cambio de colores con un clic.
Optimizar con SVGO
Reduce archivos comparando antes y después, con precisión ajustable. Optimiza todos los archivos abiertos a la vez.
PNG, JPG, WebP e ICO
Exporta a cualquier tamaño hasta 16384 px, con transparencia, o copia el PNG directamente al portapapeles.
React, Vue y Svelte
Componentes JSX/TSX, React Native, Vue y Svelte limpios, con soporte para currentColor y props.
Varios archivos a la vez
Abre muchos SVG como pestañas y optimízalos en lote o descárgalos en un ZIP de SVG o PNG.
Privado y sin conexión
Sin subidas ni cuentas. Tu trabajo se guarda en el navegador y la app funciona sin conexión tras la primera visita.
Preguntas frecuentes
¿Uso data URI en Base64 o codificados para URL para SVG?
Para SVG, un data URI codificado para URL suele ser entre un 20 y un 30 % más pequeño que Base64 y se comprime mejor con gzip. Base64 es útil donde los caracteres especiales dan problemas.
¿Cómo cambio el color de un icono SVG usado en CSS?
Usa el fragmento de máscara CSS. El SVG se convierte en una máscara y el background-color del elemento, currentColor por defecto, la rellena, así que puedes cambiar el color del icono con CSS.
¿Puedo convertir un data URI de nuevo a SVG?
Sí. Pega un URI data:image/svg+xml o una cadena Base64 en el editor y viewsvg lo decodifica a SVG automáticamente.
¿Se suben mis archivos SVG a algún sitio?
No. viewsvg funciona por completo en tu navegador. Los archivos se leen, se muestran, se optimizan y se convierten en tu dispositivo, y nada se envía a un servidor. Después de la primera visita funciona incluso sin conexión.
¿viewsvg es gratis?
Sí. Todas las funciones son gratuitas, sin registro, sin marcas de agua y sin límite de archivos.