Convertir SVG a URI de datos seguro para CSS
Pegue el código SVG y obtenga un URI de datos que empieza por data:image/svg+xml, listo para un url() de CSS o para el origen de una imagen. Un color como #0a7 pasa a ser %230a7, así que ningún carácter rompe su hoja de estilos. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Corre en su navegador. Gratis y sin límite: sus datos no salen de esta página.
Convierta marcado SVG sin procesar en un URI de datos que puede colocar en un valor CSS url() o en cualquier lugar que acepte una URL de imagen. El conversor verifica primero que la entrada sea XML bien formado; después codifica el documento como UTF-8 y escapa cada carácter que podría alterar el análisis de la URL o del CSS. El resultado comienza con el tipo de medio SVG y no utiliza base64, por lo que resulta sencillo inspeccionarlo, copiarlo, almacenarlo en caché y versionarlo junto con sus estilos.
Por qué los URI de datos SVG requieren un escape cuidadoso
Un SVG es texto, pero pegarlo directamente en un token CSS <code>url()</code> no es fiable. Un color como <code>#0a7</code> introduce un fragmento de URL, los espacios pueden separar tokens y las comillas o los paréntesis pueden cerrar el valor CSS. Este conversor evita esas ambigüedades: codifica el SVG como bytes UTF-8 y solo deja legibles los caracteres no reservados de una URL.
El resto se transforma en escapes porcentuales, incluidas almohadillas, etiquetas angulares, comillas, apóstrofos, paréntesis, espacios y saltos de línea. Así, el resultado permanece intacto dentro de <code>url(...)</code>, con comillas simples o dobles. El prefijo es <code>data:image/svg+xml,</code> y después aparece el marcado codificado.
No existe una capa base64, de modo que las letras y cifras habituales siguen visibles. Copie la cadena completa, pues el prefijo indica al navegador cómo interpretar la carga.
La validación se realiza antes de convertir
Codificar marcado defectuoso produciría un valor correctamente escapado que seguiría fallando cuando el navegador intentara interpretar la imagen. Para evitar ese resultado engañoso, el conversor comprueba primero el documento XML. Exige un único elemento raíz SVG, etiquetas de apertura y cierre coincidentes y bien anidadas, valores de atributos entre comillas, atributos únicos, comentarios y secciones CDATA cerrados, y referencias de entidad válidas.
Se rechazan el texto fuera de la raíz y una segunda raíz. Se aceptan declaraciones XML, instrucciones de procesamiento, comentarios, CDATA y una declaración de tipo de documento cuando ocupan posiciones estructuralmente válidas. Esta comprobación confirma la sintaxis XML, pero no garantiza que todos los elementos, atributos, colores, animaciones o referencias SVG sean compatibles con todos los navegadores.
Cómo usar el resultado en CSS y HTML
Utilice el URI devuelto donde la plataforma espere una URL de imagen. En CSS puede servir como imagen de fondo, origen de máscara, marcador de lista o contenido generado. Puede encerrarlo entre cualquiera de los dos tipos de comillas para mejorar la lectura, aunque el escape estricto también protege un token <code>url()</code> sin comillas.
En HTML puede asignarlo al atributo <code>src</code> de una imagen usando el entrecomillado normal del atributo. Recuerde que los URI de datos duplican sus bytes en cada aparición, salvo que el sistema de compilación extraiga o reutilice la declaración; por eso convienen para iconos, insignias y adornos pequeños, no para ilustraciones grandes. La conversión es determinista: una entrada idéntica produce siempre la misma salida.
El conversor no descarga fuentes, imágenes ni estilos, no optimiza trazados y no sanea contenido SVG activo. Trate el marcado no fiable conforme a las reglas de seguridad del destino.
Qué puede hacer con ella
Insertar un icono pequeño en CSS
Convierta un recurso SVG versionado en una imagen de fondo segura sin añadir otra solicitud de red.
Generar estilos para distintos temas
Codifique variantes SVG durante la compilación e incluya URI deterministas en tokens de diseño o estilos de componentes.
Comprobar SVG generado
Rechace XML roto procedente de una plantilla antes de publicar la cadena de imagen codificada.
Preguntas frecuentes
¿Por qué se usa codificación porcentual y no base64?
SVG ya es texto. La codificación porcentual evita una capa base64, mantiene legibles los caracteres no reservados y crea un URI de imagen compatible con los estándares.
¿Puedo pegar el resultado directamente en CSS url()?
Sí. Las comillas, los paréntesis, los espacios, las almohadillas y otros caracteres sensibles del SVG quedan codificados.
¿El conversor optimiza o sanea el SVG?
No. Valida la estructura XML y codifica el marcado original sin eliminar metadatos, scripts, referencias externas ni datos redundantes.
¿Por qué se rechaza mi SVG?
Porque el código no está bien formado. Una etiqueta no se cierra o no se anida bien, un atributo va sin comillas o repetido, un comentario queda abierto, una entidad no es válida o hay texto o un segundo elemento fuera de la raíz svg.
¿Cuándo no conviene usar un URI de datos para un SVG?
Cuando la imagen es grande o se repite en muchos sitios. Un URI de datos copia todos sus bytes en cada lugar donde aparece, por lo que sirve mejor para iconos pequeños, insignias y adornos que para ilustraciones grandes.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/web/svg-to-data-uri \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}'const res = await fetch("https://api.kit.forhosting.com/web/svg-to-data-uri", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-to-data-uri",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-to-data-uri", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"svg":"<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"><path fill=\\"#0a7\\" d=\\"M2 2h20v20H2z\\"/></svg>"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-to-data-uri", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_to_data_uri",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
La validación se realiza antes de convertir
Si la comprobación falla, la solicitud devuelve un error <code>invalid_input</code> que describe el problema, no un URI.
Preguntas técnicas
¿Cuánto cuesta la conversión mediante API?
Cada solicitud a la API cuesta $0.002. La versión del navegador puede ejecutarse localmente en esta página.
¿Qué ocurre si el XML está mal formado?
La conversión se detiene y devuelve un error invalid_input que describe el defecto. No se entrega un URI parcial.