Cómo usar archivos en formato SVG en WordPress (métodos + seguridad)

¿Quieres mostrar tu logo o tus iconos en ultra alta calidad, pero WordPress rechaza tus archivos SVG?

Es frustrante, pero no te preocupes: no estás solo. El tema del SVG en WordPress genera tanta curiosidad como frustración.

Este formato ligero, nítido a todas las escalas e ideal para el rendimiento, está sin embargo bloqueado por defecto.

¿Por qué? ¿Cómo activarlo de manera segura? Y sobre todo, ¿cómo evitar las trampas que pueden poner en peligro tu sitio?

En este artículo descubrirás las buenas prácticas, los riesgos que debes conocer y los métodos fiables para integrar tus SVG sin comprometer tu sitio.

Síguenos, te explicamos todo sobre el tema… ¡ahora mismo!

¿Qué es el formato SVG?

Te encuentras a menudo con este acrónimo, pero ¿qué significa? SVG significa Scalable Vector Graphics (en español, «gráfico vectorial escalable»).

Es un formato abierto basado en XML (Extensible Markup Language) creado en 1998 por el W3C (un consorcio que establece normas y directrices para la web).

Recuerda bien esta palabra: «Scalable», o «adaptable» en español. A diferencia de los formatos clásicos como JPEG, PNG o GIF, que se basan en píxeles (se llaman imágenes rasterizadas), el SVG es una imagen vectorial.

¿Qué cambia eso? Muchas cosas. Una imagen en píxeles tiene un tamaño fijo. Si la agrandas, aparecerán cuadros borrosos. Esa es la pixelación.

Un SVG, en cambio, no es un conjunto de puntos. Es un conjunto de instrucciones matemáticas, código XML que le dice al navegador: «Dibuja un círculo aquí, una línea allá, con este color».

El resultado es impresionante. Puedes estirar un SVG hasta el infinito, siempre se mantendrá perfectamente nítido.

Es ideal para logos, iconos, ilustraciones simples… En resumen, para todos esos elementos gráficos que deben quedar impecables en una pequeña pantalla de smartphone como en una pantalla 4K enorme.

Para tus logos, iconos y gráficos sencillos, el SVG se impone como un formato de elección para una web moderna y rápida.

¿Cómo funciona un archivo SVG?

Para simplificar, un archivo SVG es un archivo de texto. Sí, leíste bien. Si abres un archivo .svg con un simple editor de texto, no verás una imagen, sino líneas de código que se parecen a HTML. Es XML.

Piénsalo como HTML. XML funciona con un principio similar, usando etiquetas para estructurar los datos. Es esta estructura textual la que ordena al navegador «dibujar» la imagen.

Esta naturaleza textual también le otorga superpoderes:

• ligereza: un logo simple en SVG pesa a menudo solo unos pocos kilobytes, mucho menos que su equivalente PNG. Una gran ventaja para la velocidad de carga de tus páginas y el SEO,
• manipulación: dado que es código, se puede modificar directamente con CSS o JavaScript. Cambiar un color, animar una forma: todo es posible,
• accesibilidad: el texto contenido en un SVG puede ser leído por los motores de búsqueda y los lectores de pantalla, lo cual es una ventaja para la accesibilidad.

Esta estructura basada en código es a la vez su mayor fortaleza… y su mayor debilidad, especialmente en el ecosistema de WordPress.

¿Por qué? Pues porque el núcleo del problema es que WordPress fue diseñado para imágenes rasterizadas como JPEG o PNG.

El CMS más popular del mundo no está preparado nativamente para interpretar y, sobre todo, para asegurar un archivo que en realidad puede ser un script potencial.

¿WordPress soporta nativamente los archivos SVG?

La respuesta es simple y directa: no. Si ya intentaste subir un archivo SVG a tu Biblioteca de medios de WordPress, sin duda conoces ese mensaje frustrante: «Este archivo no puede ser procesado por el servidor web»:

Es frustrante, ¿no? Entonces, ¿por qué este bloqueo? La razón fundamental se resume en una sola palabra: la seguridad. WordPress bloquea por defecto la subida de SVG por una buena razón. Se trata de proteger tu sitio contra riesgos importantes de seguridad.

A diferencia de las imágenes JPG o PNG, un archivo SVG se basa en código XML. Esta naturaleza lo hace vulnerable a ataques.

Para evitar lo peor, WordPress prefiere cerrar la puerta. Pero no te preocupes, luego veremos exactamente de qué riesgos se trata.

¿Cuáles son los problemas de seguridad relacionados con los SVG en WordPress?

Este es el núcleo del problema. Como vimos, un SVG es un archivo XML. Y donde hay XML, existe la posibilidad de ocultar código. No solo instrucciones de dibujo, sino también scripts potencialmente maliciosos, como JavaScript.

Un atacante podría crear un archivo SVG que parece un simple logo, pero que contiene un script capaz de robar información de sesión, redirigir tus usuarios a un sitio fraudulento o explotar otras vulnerabilidades de tu sitio. 

El simple hecho de subir un archivo SVG a tu servidor WordPress podría abrir una brecha de seguridad grave.

Por eso WordPress bloquea todo por defecto. No distingue entre un SVG limpio y uno peligroso. Aplica el principio de precaución.

¿La solución? Nunca permitir SVG sin una red de seguridad. Debes imperativamente «limpiar» o «desinfectar» (en inglés, se dice «sanitize») cada archivo SVG antes de aceptarlo.

Este proceso consiste en analizar el código del archivo y eliminar todas las etiquetas y atributos potencialmente peligrosos, dejando solo las instrucciones legítimas de dibujo.

Te explicamos cómo hacer esto fácilmente en la siguiente sección. Pero antes de mancharte las manos, veamos las amenazas más comunes si usas un SVG que contiene un script listo para causar daños sin que lo sepas: 

• ataques XSS (Cross-Site Scripting): un script JavaScript oculto en el SVG puede ejecutarse en el navegador de tus visitantes. Puede robar datos sensibles, como cookies de sesión, o redirigirlos a sitios de phishing,
• ataques por Entidad Externa XML (XXE): para simplificar, un SVG malicioso puede ordenar a tu servidor que le dé acceso a archivos confidenciales, como el importante archivo wp-config.php,
• ataques por Denegación de Servicio (DoS): un SVG diseñado para ser muy complejo puede agotar los recursos de tu servidor al mostrarse. Tu sitio se vuelve lento o incluso inaccesible.

El peligro viene principalmente de SVG procedentes de fuentes no fiables. Sin embargo, incluso un archivo que tú creaste puede estar comprometido. Una vulnerabilidad en tu software de creación basta.

La solución no es abandonar el SVG. No. El único método viable es la «sanitización» (o saneamiento). Se trata de limpiar el código del SVG para conservar solo lo necesario y eliminar todo script peligroso. Es un paso innegociable.

Quédate aquí. En la siguiente sección te mostramos paso a paso cómo realizar esta operación muy fácilmente, con y sin plugin.

Cómo habilitar el soporte de archivos SVG en WordPress con o sin plugin

Entonces, ¿listo para integrar SVG en tu sitio WordPress? Pero, ¿cómo hacerlo si WordPress los bloquea por defecto?

Principalmente existen dos vías. Una es simple, segura y recomendada para el 99% de los usuarios. La otra es más técnica y, seamos claros, potencialmente riesgosa si no se controla bien.

¿Mi consejo de experto? No juegues con fuego. Vamos a ver juntos por qué el método del plugin es la vía real para combinar simplicidad y seguridad.

Método 1: añadir un archivo SVG en WordPress con el plugin SVG Support

Hablemos de la solución más simple y segura para subir un archivo SVG a WordPress: el uso de un plugin dedicado.

En este campo, SVG Support se impone como una referencia (como alternativa, también existe Safe SVG).

Es un plugin muy popular (más de 1M de instalaciones activas), bien valorado (4,8 estrellas sobre 5) y sobre todo, mantenido activamente, un sello de seguridad.

¿La gran ventaja de este plugin? No se limita a abrir la puerta a los SVG. Va mucho más allá: los limpia automáticamente cada vez que subes un archivo.

Para aprovecharlo, ve al menú Plugins > Añadir nuevos en tu interfaz de administración de WordPress.

En la barra de búsqueda, escribe “SVG Support”, luego instala y activa el plugin:

Ahora puedes subir el archivo SVG que quieras a tu Biblioteca de medios: ya no aparecerá ningún mensaje bloqueante. 

Gracias a una biblioteca de limpieza integrada, SVG Support neutraliza todo código malicioso que pueda esconderse en el archivo. ¿No es genial?

Si quieres, puedes hacer una configuración un poco más avanzada desde el menú Ajustes > SVG Support.

Por defecto, solo el administrador del sitio puede subir archivos SVG a WordPress (menú « Restringir subida de SVG a ? »).

Te aconsejo no agregar otros roles de usuarios (Editor, Autor, Colaborador, Suscriptor) para mantener el control, es muy importante.

Si por alguna razón concreta necesitas agregar otro usuario, aquí es donde se hace: 

Para lo demás, puedes quedarte con las configuraciones por defecto. Con eso deberías estar seguro.

En principio, ya no deberías tener ningún motivo para ver el mensaje abajo cuando arrastras y sueltas un archivo en formato SVG en el editor de contenido de WordPress:

Método 2: añadir un archivo SVG con un fragmento de código en el archivo functions.php

Si ya tienes buenas bases técnicas y un perfil de desarrollador, el método nº2 consiste en añadir un fragmento de código (snippet) en el archivo functions.php de tu tema WordPress.

Para ello necesitarás: 

• un editor de código como Notepad++, Visual Studio Code, Brackets o Sublime Text,
• acceso a tu cliente FTP (Filezilla, Cyberduck, Transmit, etc.) para enviar el archivo a tu sitio en línea. 

Importante: no debes modificar directamente el archivo functions.php. Es necesario usar un tema hijo. Como alternativa, un plugin como Code Snippets permite añadir funciones desde la administración de WordPress. En cualquier caso, esto está dirigido a usuarios avanzados.

Antes de darte el código a usar, dos importantes precisiones para tener en cuenta: 

1. Usa este fragmento de código solo si estás seguro y tienes buenos conocimientos de PHP. Si no, evita este método y elige la tranquilidad que ofrece un plugin confiable como SVG Support.
2. Antes de añadir cualquier código, haz una copia de seguridad de tu sitio (archivos + base de datos) con un plugin dedicado como UpdraftPlus o una herramienta especializada en el mantenimiento de tus sitios WP como WP Umbrella.

¿Listo? Vamos, aquí tienes el fragmento de código en cuestión:

<?php
/**
 * Autorizar la importación de archivos SVG en WordPress
 */

// 1. Autorizar el tipo MIME SVG
function wpmarmite_allow_svg_uploads( $mimes ) {
    $mimes['svg']  = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'wpmarmite_allow_svg_uploads' );

// 2. Asegurar la visualización en la biblioteca de medios
function wpmarmite_fix_svg_display() {
    echo '<style>
        .attachment-266x266, .thumbnail img {
            width: 100% !important;
            height: auto !important;
        }
        .media-icon img[src$=".svg"] {
            width: 100% !important;
            height: auto !important;
        }
    </style>';
}
add_action( 'admin_head', 'wpmarmite_fix_svg_display' );

// 3. Limpieza y seguridad básica de los SVG subidos
function wpmarmite_sanitize_svg( $file ) {
    if ( isset($file['type']) && $file['type'] === 'image/svg+xml' ) {

        // Lectura del archivo
        $svg = file_get_contents( $file['tmp_name'] );

        // Verificación simple (una seguridad real requiere una limpieza completa)
        if ( stripos( $svg, '<script' ) !== false ) {
            $file['error'] = 'El SVG contiene scripts y ha sido bloqueado por razones de seguridad.';
        }
    }
    return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'wpmarmite_sanitize_svg' );

SVG en WordPress: las buenas prácticas que nunca debes olvidar

Ahora tienes una visión clara de los desafíos relacionados con el uso de archivos SVG en WordPress.

No es tan complicado, ¿verdad? Simplemente se trata de tomar las precauciones adecuadas para disfrutar de su ligereza y flexibilidad sin abrir la puerta a problemas de seguridad.

Para asegurarte de no olvidar nada, terminemos con una lista de verificación de puntos esenciales para tener en mente. Considérala como tu salvaguarda antes de cada subida: 

1. Siempre sanea tus SVG: ya sea mediante un plugin o manualmente, nunca subas un SVG sin limpiarlo. Es innegociable.
2. Limita los permisos: solo los administradores del sitio deberían tener derecho a subir archivos SVG. Configura tus plugins en consecuencia.
3. Usa fuentes fiables: prioriza los SVG que tú mismo creaste o que descargaste de fuentes reputadas. Desconfía de los archivos SVG encontrados al azar en internet.
4. Piensa en la visualización: si tus miniaturas SVG no se muestran correctamente en la biblioteca de medios, algunos plugins o fragmentos de código pueden corregir este problema forzando la detección de dimensiones.

Ahora tienes todas las cartas en la mano para dominar el uso de archivos SVG en WordPress.

Al privilegiar un método seguro como el plugin SVG Support y respetar las buenas prácticas, combinarás lo mejor de ambos mundos: visuales con una nitidez impecable y un sitio web rápido, sin comprometer la seguridad.

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

Acerca del autor

Equipo WPMarmite