Archivos SVG en WordPress: por qué no funcionan y cómo solucionarlo

#1

Archivos SVG en WordPress: por qué no funcionan y cómo solucionarlo

¿Qué es un archivo SVG?

SVG (Scalable Vector Graphics) es un formato de imagen basado en XML que, a diferencia de los formatos rasterizados como JPG o PNG, utiliza fórmulas matemáticas para definir formas y líneas en lugar de píxeles. Esto permite que las imágenes SVG se escalen a cualquier tamaño sin perder calidad, lo que las hace ideales para logotipos, iconos, ilustraciones e infografías.

Además de su escalabilidad, los archivos SVG suelen ser significativamente más ligeros que sus equivalentes en PNG o JPG, lo que mejora los tiempos de carga de las páginas web. Google también los indexa, por lo que pueden contribuir positivamente al SEO del sitio.

¿Por qué WordPress bloquea los archivos SVG?

Si alguna vez has intentado subir un archivo SVG a la biblioteca de medios de WordPress, habrás visto el conocido mensaje de error:

"Lo siento, este tipo de archivo no está permitido por razones de seguridad."

WordPress bloquea la subida de archivos SVG por defecto debido a que este formato presenta riesgos de seguridad inherentes a su naturaleza XML. A diferencia de un JPG o PNG, que simplemente contienen datos de píxeles, un archivo SVG puede contener código ejecutable, lo que abre la puerta a varios tipos de ataques.

Los riesgos de seguridad concretos

1. Cross-Site Scripting (XSS)

Un archivo SVG puede contener etiquetas <script> con código JavaScript malicioso incrustado. Si un atacante sube un SVG con este tipo de contenido y otro usuario lo visualiza en su navegador, el código se ejecuta en el contexto de la sesión de ese usuario. Esto podría permitir el robo de cookies de sesión, datos privados o la toma de control de cuentas.

Un ejemplo simplificado de un SVG malicioso sería:

<svg xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
    alert('Código malicioso ejecutado');
  </script>
</svg>

2. XML External Entity (XXE)

Dado que SVG es un formato XML, es vulnerable a ataques de inyección de entidades externas. Un atacante puede definir entidades que hacen referencia a archivos internos del servidor (como /etc/passwd) o a servicios internos de la red. Si el parser XML del servidor procesa estas entidades, puede filtrar información sensible o facilitar ataques de tipo SSRF (Server-Side Request Forgery).

3. Inyección de HTML y redirecciones

Los archivos SVG también pueden contener elementos HTML embebidos, etiquetas <foreignObject>, o referencias a recursos externos que podrían utilizarse para redirigir a los usuarios a sitios maliciosos.

Referencia: OWASP

Tanto los ataques XSS como XXE están documentados extensamente por la OWASP Foundation (Open Web Application Security Project). XXE fue incluido en el OWASP Top 10 de 2017 como una de las vulnerabilidades más críticas en aplicaciones web. Las guías de OWASP recomiendan expresamente que las aplicaciones que aceptan archivos SVG implementen sanitización rigurosa del contenido XML.

¿Desde cuándo WordPress bloquea los SVG?

El debate sobre el soporte nativo de SVG en WordPress tiene más de una década de historia. En 2013 se abrió el ticket #24251 en el sistema de seguimiento de desarrollo de WordPress (WordPress Trac), proponiendo la inclusión de SVG como formato permitido en las subidas de medios.

A pesar del reconocimiento de las ventajas del formato (especialmente con la creciente adopción de pantallas de alta resolución), los desarrolladores del core de WordPress identificaron rápidamente los riesgos de seguridad asociados a la estructura XML de los SVG. La decisión fue marcarlo como “wontfix” (no se arreglará), argumentando que WordPress necesita ser seguro por defecto para todos los usuarios, especialmente teniendo en cuenta que la mayoría de su base de usuarios no es técnica.

Posteriormente, en WordPress 4.7.1 (enero de 2017), se reforzó aún más la validación de tipos MIME en las subidas, lo que afectó también a los SVG y otros formatos no estándar (ticket #39550).

A día de hoy, en 2026, el ticket #24251 sigue abierto y el soporte nativo de SVG sigue sin incorporarse al core de WordPress. La postura oficial permanece sin cambios: hasta que no exista una biblioteca de sanitización SVG suficientemente robusta y probada integrada en el core, no se habilitará este formato por defecto.

Soluciones para habilitar SVG en WordPress

Existen varias formas de habilitar el soporte SVG. Las ordenamos de más recomendada a menos recomendada según su nivel de seguridad.

Solución 1: Plugin “Safe SVG” (Recomendada)

El plugin Safe SVG es la solución más equilibrada entre facilidad de uso y seguridad. Fue creado originalmente como prueba de concepto para el ticket #24251 del core de WordPress.

¿Qué hace?

  • Permite subir archivos SVG a la biblioteca de medios.
  • Sanitiza automáticamente cada SVG al subirlo, eliminando código potencialmente malicioso (scripts, entidades externas, elementos peligrosos).
  • Genera previsualizaciones de los SVG en la biblioteca de medios.
  • Permite restringir qué roles de usuario pueden subir archivos SVG.
  • Opcionalmente optimiza los SVG con SVGO para reducir su tamaño.

Instalación:

  1. En el panel de WordPress, ir a Plugins → Añadir nuevo.
  2. Buscar “Safe SVG”.
  3. Instalar y activar.
  4. Configurar los roles autorizados desde los ajustes del plugin.

Nota: La sanitización se realiza mediante la biblioteca svg-sanitizer, que elimina etiquetas y atributos peligrosos del XML del SVG.

Solución 2: Plugin “SVG Support”

El plugin SVG Support es otra opción muy popular (más de 1 millón de instalaciones activas) que también incluye sanitización automática.

¿Qué ofrece además?

  • Restricción de subidas SVG por rol de usuario.
  • Modo avanzado para renderizado inline de SVG (permite aplicar CSS directamente al SVG).
  • Minificación automática de archivos SVG.
  • Previsualización en la biblioteca de medios.

Instalación:

  1. En el panel de WordPress, ir a Plugins → Añadir nuevo.
  2. Buscar “SVG Support”.
  3. Instalar y activar.
  4. Configurar desde Ajustes → SVG Support.

Solución 3: Snippet de código en functions.php (Solo para usuarios avanzados)

Se puede añadir un filtro al archivo functions.php del tema (o mejor aún, en un plugin de funciones personalizado) para permitir el tipo MIME de SVG:

function permitir_svg_uploads($mimes) {
    $mimes['svg']  = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'permitir_svg_uploads');

:warning:️ ADVERTENCIA: Este método no incluye ningún tipo de sanitización. Los archivos SVG se suben tal cual, con todo su contenido XML sin filtrar. Solo debe utilizarse si el administrador es la única persona que sube archivos y estos provienen de fuentes de absoluta confianza (creados por uno mismo en herramientas como Inkscape o Illustrator).

Solución 4: Constante ALLOW_UNFILTERED_UPLOADS (NO recomendada)

WordPress incluye una constante que se puede definir en wp-config.php para eliminar todas las restricciones de tipos de archivo:

define('ALLOW_UNFILTERED_UPLOADS', true);

:no_entry_sign: NO RECOMENDAMOS ESTA OPCIÓN. Esta constante desactiva todas las restricciones de tipo de archivo para todos los usuarios administradores, no solo para SVG. Esto significa que se podrían subir archivos ejecutables, scripts PHP y cualquier otro tipo de archivo potencialmente peligroso. Supone un riesgo de seguridad muy alto, especialmente en instalaciones multiusuario.

Buenas prácticas al trabajar con SVG en WordPress

Independientemente de la solución que elijas, es fundamental seguir estas recomendaciones:

  1. Sanitiza siempre los SVG antes de subirlos. Si tu método de habilitación no incluye sanitización automática, utiliza herramientas externas como SVG Sanitizer Test o SVGOMG antes de la subida.

  2. Restringe quién puede subir SVG. Limita la capacidad de subir archivos SVG exclusivamente a usuarios administradores o de máxima confianza.

  3. Usa solo SVG de fuentes fiables. No subas SVG descargados de fuentes no verificadas. Si es posible, crea tus propios SVG o utiliza bibliotecas de iconos reconocidas.

  4. Prueba los cambios en un entorno de staging. Antes de modificar la configuración de producción, verifica que todo funciona correctamente en un entorno de pruebas.

  5. Mantén los plugins actualizados. Los plugins de soporte SVG se actualizan periódicamente para corregir vulnerabilidades en sus bibliotecas de sanitización.

  6. Ten un backup reciente. Como antes de cualquier cambio en la configuración de WordPress, asegúrate de tener una copia de seguridad actualizada.

Resumen comparativo

Método Seguridad Dificultad Sanitización Recomendado
Plugin Safe SVG :white_check_mark: Alta Fácil :white_check_mark: Automática :white_check_mark: Sí
Plugin SVG Support :white_check_mark: Alta Fácil :white_check_mark: Automática :white_check_mark: Sí
Snippet functions.php :warning:️ Media Media :x: No incluida :warning:️ Solo expertos
ALLOW_UNFILTERED_UPLOADS :no_entry_sign: Baja Fácil :x: No incluida :no_entry_sign: No

Referencias

Si tienes dudas sobre cómo habilitar SVG en tu instalación de WordPress o necesitas asistencia, no dudes en contactarnos (soporte@aspl.es).