EnglishSVG a data URI (CSS y HTML)
Convierte código SVG en un data URI optimizado para usar en CSS (background-image, mask) y HTML, con codificación URL más corta que Base64 y vista previa de la imagen.
Cómo usarPega el código SVG.
Disponible en: 
SVG a data URI (CSS y HTML): para qué sirve
Pega el código SVG y elige el formato de salida. La herramienta elimina espacios extra, cambia las comillas y codifica solo los caracteres necesarios, generando un data URI más pequeño que Base64, muestra la vista previa de la imagen y el tamaño final.
El código no se envía a ningún servidor: la conversión ocurre en tu navegador.
Cómo usar
- Pega el código SVG.
- Elige CSS, data URI, img o Base64.
- Copia el resultado.
Cuándo usar
- Incrustar iconos en CSS sin archivos adicionales.
- Usar SVG en mask-image.
- Reducir solicitudes de la página.
Preguntas frecuentes
¿Por qué no usar Base64?
Para SVG, la codificación URL suele generar un resultado más pequeño que Base64, porque el SVG ya es texto. Solo hay que codificar los caracteres especiales, como <, >, # y las comillas.
¿Cómo usarlo en CSS?
Copia el resultado en el formato background-image: url("data:image/svg+xml,..."). También funciona en mask-image, list-style-image y en el atributo src de una etiqueta img.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.