Codificador de SVG a Base64
Codifica cualquier SVG como Base64 y un data URI para incrustarlo de forma inline en CSS, HTML o React. Obtén cinco variantes listas para copiar, incluida una versión URL-encoded más pequeña. Gratis, privado e instantáneo.
Arrastra tu SVG aquí o haz clic para subir
Acepta archivos .svg, o pega el código SVG abajo
Por qué incrustar SVG como Base64
Cinco formatos listos
Obtén el base64 en bruto, un data URI, una regla CSS background-image, una etiqueta img HTML y una variante URL-encoded, cada una con su propio botón de copia.
Variante URL-encoded más pequeña
La versión UTF-8 URL-encoded suele ser más pequeña que base64 para SVG, así que tu CSS y HTML se mantienen ligeros sin dejar de incrustarse inline.
Seguro para UTF-8
La codificación gestiona correctamente emojis, acentos y caracteres no latinos, de modo que tu SVG nunca se rompe con caracteres especiales.
Elimina una petición HTTP
Incrustar un SVG pequeño como data URI elimina una petición de red adicional, lo que puede acelerar el primer renderizado de iconos y logotipos.
100% privado
La codificación se ejecuta íntegramente en tu navegador. Tu SVG nunca se sube, lo que lo hace seguro para recursos de marca privados.
Gratis y sin límites
Sin registro, sin créditos, sin límites. Codifica todos los SVG que quieras y copia cualquier variante con un solo clic.
Cómo codificar SVG a Base64
Añade tu SVG
Arrastra y suelta un archivo .svg, haz clic para buscarlo, o pega tu código SVG en el cuadro.
Obtén las variantes
El codificador genera al instante el base64 en bruto, un data URI completo, una regla CSS background, una etiqueta img y una versión URL-encoded.
Elige la adecuada
Usa el data URI en src o href, la variante CSS en background-image, o la variante URL-encoded cuando quieras la cadena más pequeña.
Copia y pega
Pulsa el botón de copiar junto a cualquier variante y pégala directamente en tu hoja de estilos, HTML o componente.
Elige la herramienta correcta
Por qué existe esta página
Use the SVG to Base64 encoder to embed a vector inline as a data URI for CSS, HTML, or JSON, removing a network request. Copy the raw base64, the data URI, a CSS background, an img tag, or a smaller URL-encoded variant.
Mejor para
- Inlining icons in CSS background-image rules
- Embedding small SVGs directly in HTML or React without a separate file
- Cutting an extra HTTP request for tiny vector assets
Herramientas relacionadas que suelen necesitarse después
Preguntas frecuentes: SVG a Base64
Un data URI te permite incrustar una imagen directamente en CSS o HTML en lugar de enlazar a un archivo separado. Para SVG tiene el aspecto data:image/svg+xml;base64,PHN2Zy... y el navegador lo decodifica y renderiza inline, sin petición de red adicional.
Para SVG, la variante UTF-8 URL-encoded (data:image/svg+xml,...) suele ser más pequeña que base64 porque SVG es texto. Usa la versión URL-encoded cuando quieras el CSS o HTML más ligero. Usa base64 cuando una herramienta o plataforma requiera específicamente entrada en base64.
Copia la variante CSS background-image y pégala en una regla, por ejemplo background-image: url("data:image/svg+xml;base64,..."). El icono se renderiza entonces como fondo sin necesidad de cargar un archivo de imagen separado.
Sí. El codificador es seguro para UTF-8, por lo que los acentos, escrituras no latinas y emojis dentro de tu SVG se codifican correctamente y se renderizan sin problemas.
Incrustar como data URI funciona mejor para SVG pequeños como iconos y logotipos, donde eliminar una petición HTTP acelera la carga. Para SVG grandes o reutilizados con frecuencia, un archivo en caché separado suele ser mejor, ya que el data URI añade peso a cada página que lo incluye.
No. La codificación ocurre íntegramente en tu navegador, por lo que el SVG nunca abandona tu dispositivo. Esto hace que la herramienta sea segura para recursos confidenciales o no publicados.
Codificador de SVG a Base64
Codifica cualquier SVG como Base64 y un data URI para incrustarlo de forma inline en CSS, HTML o React. Obtén cinco variantes listas para copiar, incluida una versión URL-encoded más pequeña. Gratis, privado e instantáneo.