jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas de imágenes, SVG y recursos

Gratis Convertidor SVG a URI de Datos CSS

Convierta SVG a URI de datos CSS. Opciones URL-codificado y Base64 con vista previa en vivo.

Cargando herramienta...

Qué es Convertidor SVG a URI de Datos CSS?

Transforma SVG bruto en URI de datos para CSS y HTML. Metodos: codificacion URL y Base64.

Respuesta rápida

Obtenga URI de datos CSS desde SVG. URL-codificado o Base64. background-image, mask, img src.

Last updated: 2026-06-09

Limitaciones

  • URI mayores de 4KB no recomendadas.
  • Sin validacion de SVG.
  • Comportamiento variable segun navegador para mask-image.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Pegue su SVG.
  2. Elija codificacion: URL (recomendada) o Base64.
  3. Seleccione el formato de salida.
  4. Copie el codigo en su CSS o HTML.

Para qué puedes usarla

  • Integrar iconos SVG en CSS para reducir solicitudes HTTP.
  • Usar URI en CSS mask-image.
  • Integrar SVG en correos electronicos.

Casos de uso

Ejemplos prácticos

Ejemplo

Iconos sin sprites CSS

10 iconos SVG convertidos a URI e integrados en la hoja de estilos.

Ejemplo

Firma de correo autonoma

Logo SVG convertido a URI Base64 para firma de correo.

Errores comunes

  • Base64 innecesario. La codificacion URL es mas compacta.
  • Espacios sobrantes antes de codificar.
  • URI para SVG grandes (mas de 2-4KB).

Verificación

  1. Convierta un circulo SVG con URL-codificado y verifique el renderizado.
  2. Compare con el renderizado Base64.

FAQ

Preguntas sobre Convertidor SVG a URI de Datos CSS

Que codificacion elegir?

URL-codificado, aproximadamente 10-20% mas pequeno.

Compatibilidad con navegadores?

Todos los navegadores modernos.

En atributos style?

Si, cuidado con las comillas.

Tamano maximo?

Mantengalo bajo 2KB por rendimiento.

Herramientas relacionadas

Más herramientas de imágenes, svg y recursos

Prueba también

Prueba también

Herramientas de CSS y diseño

Generador de carruseles CSS

Genera el marcado de un carrusel CSS nativo con scroll-snap, botones de desplazamiento, marcadores y una estructura de lista accesible. No requiere JavaScript.

Abrir herramienta