¿Por qué no se carga mi SVG? 8 causas comunes y sus soluciones (2026)

Agregaste un SVG a tu sitio web, abres la página y no aparece nada: solo un espacio vacío donde debería estar tu imagen, un icono de imagen rota o el temido texto alternativo. Los problemas de carga de SVG son muy frustrantes, porque se supone que los SVG deberían funcionar sin complicaciones. Aquí te explicamos por qué suelen fallar y cómo solucionar cada problema.

Antes de pasarte una hora depurando errores: Abre el archivo SVG directamente en tu navegador (arrastra el archivo .svg a una pestaña del navegador). Si se muestra ahí, el propio archivo SVG está bien: tu problema está en la forma en la que lo estás incrustando o sirviendo.

1. Tipo MIME incorrecto (el problema de servidor más común)

Tu servidor web tiene que indicarle al navegador «este es un archivo SVG» enviando la cabecera Content-Type correcta. Si el servidor envía el tipo incorrecto, es probable que el navegador se niegue a renderizarlo.

Cómo comprobarlo: Abre las DevTools (F12) → pestaña Red → busca tu archivo SVG → comprueba en las Cabeceras de Respuesta que aparezca Content-Type: image/svg+xml.

2. Usar <img> con una cadena de SVG en línea

No puedes poner código SVG crudo dentro de <img src="...">: el atributo src espera una URL, no código XML. Esto no funciona:

Solución: O guarda el SVG como un archivo .svg independiente y enlázalo, o incrústalo directamente en línea en el HTML sin usar una etiqueta <img>.

3. Falta el espacio de nombres del SVG

Cuando incrustas un SVG en línea en HTML, la etiqueta SVG debe incluir el atributo de espacio de nombres:

Sin el atributo xmlns, el navegador trata tu SVG como elementos HTML personalizados desconocidos en lugar de gráficos vectoriales. Esta es la causa número 1 de que los SVG en línea no se rendericen.

4. Bloqueo por CORS (de origen cruzado)

Si tu SVG está alojado en un dominio distinto al de tu sitio web, es posible que el navegador lo bloquee por la política de Intercambio de Recursos de Origen Cruzado (CORS). Esto es muy frecuente cuando cargas SVG desde una CDN o un servicio de alojamiento de imágenes.

Solución: O aloja el SVG en el mismo dominio que tu sitio, o configura el servidor externo para que envíe las cabeceras Access-Control-Allow-Origin: *.

5. Confusión con la extensión del archivo

Tu archivo se llama logo.svg pero en realidad es un PNG o JPG al que alguien le cambió el nombre. Esto pasa más a menudo de lo que crees, sobre todo con archivos de herramientas de diseño que se exportan con la extensión incorrecta.

Solución: Abre el archivo en un editor de texto. Si empieza por <svg o <?xml, es un SVG de verdad. Si parece código binario ilegible, es una imagen rasterizada con la extensión equivocada.

6. Conflictos de CSS

El CSS de tu página podría estar ocultando o sobrescribiendo los estilos del SVG. Los causantes más comunes son:

Solución: Dale a tu SVG atributos explícitos de width y height, y revisa las DevTools para ver si el CSS lo está ocultando.

7. Código SVG no válido (especialmente de herramientas de exportación)

A veces el software de diseño exporta SVG con código XML no válido: etiquetas sin cerrar, caracteres ilegales o datos de ruta rotos. Los navegadores son muy estrictos con la sintaxis de SVG.

Solución: Pasa tu SVG por un validador/optimizador de SVG como SVGO. Limpia el marcado no válido de forma automática.

8. El navegador está guardando en caché la versión antigua

Ya arreglaste el SVG pero sigues viendo la versión rota? Limpia la caché (Ctrl+Shift+R) o abre la página en una ventana de incógnito para descartar problemas de caché.

Lista de comprobación rápida para solucionar problemas

Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Creé SVG2PNG después de cansarme de los archivos de clientes alojados en servidores aleatorios. Más sobre mí →

¿Por qué no se carga mi SVG? 8 causas y soluciones comunes