Cómo subir a WordPress archivos SVG: 2 métodos seguros

Los administradores y diseñadores web están obligados a utilizar diferentes formatos de archivo multimedia en su trabajo. Hoy en día, uno de los formatos más populares es SVG, un formato vectorial basado en XML. Lastimosamente, no todos los navegadores y plataformas son compatibles con SVG y es necesario habilitarlo manualmente de antemano.

Este artículo cubrirá los pasos para cargar archivos SVG en un sitio web de WordPress utilizando el plugin SVG Support. También responderemos a algunas preguntas relacionadas con los problemas de seguridad que rodean a este formato de archivo multimedia en particular y por qué vale la pena utilizar SVG.

Para empezar, vamos a familiarizarnos con SVG y su funcionamiento.

Los gráficos vectoriales escalables (Scalable Vector Graphics o mejor conocidos como SVG) son un formato de imagen gráfica vectorial basado en el texto XML. Mientras que los formatos de imagen habituales, como JPG y PNG, se componen de toneladas de pequeños cuadrados llamados píxeles, este formato se basa en el lenguaje de marcado XML para describir los atributos de la imagen.

En enero de 2022, el 42% de todos los sitios web del mundo utilizan el formato SVG. Este porcentaje ha aumentado desde enero de 2021, cuando sólo el 29,4% de los sitios web lo utilizaban. Al igual que los formatos PNG y JPG, SVG es popular entre los sitios web de alto tráfico como Google, Wikipedia y YouTube.

Otro aspecto positivo de SVG es que es ampliamente compatible con los principales navegadores. A continuación se muestra una lista de navegadores que admiten el formato de archivo SVG:

NavegadorSoporte parcialSoporte total
EdgeVersión 12-18, 79-96, 97
FirefoxVersión 2Versión 3-94, 95, 96-97
Firefox para AndroidVersión 95
CromoVersión 4-96, 97, 98-100
Chrome para AndroidVersión 96
SafariVersión 3.1Versión 3.2-15.1, 15.2, TP
OperaVersión 10-81, 82
Opera MiniTodas las versiones
Opera MobileVersión 12-12.1, 64
Safari en iOSVersión 3.2-15.1, 15.2
Navegador AndroidVersión 3-4.3Versión 4.4-4.4.4, 96
UC Browser para AndroidVersión 12.12
Samsung InternetVersión 4-14.0, 15.0
Navegador QQVersión 10.4
Navegador BaiduVersión 7.12
Navegador KaiOSVersión 2.5

¿Cómo funciona SVG?

Los gráficos vectoriales escalables utilizan XML para producir imágenes vectoriales bidimensionales. A diferencia de JPG y PNG, los gráficos vectoriales no se componen de píxeles. En su lugar, su comportamiento se describe en archivos de texto XML.

Por lo anterior, los gráficos vectoriales escalables pueden buscarse, indexarse, programarse, editarse y comprimirse como el código. Por ello, cualquiera puede crearlos con un editor de texto o un software de gráficos vectoriales.

¿Es compatible WordPress con SVG?

No hay soporte para SVG en WordPress por defecto debido a los riesgos de seguridad que impone. Más adelante cubriremos los problemas de seguridad que rodean a SVG en mayor profundidad.

El siguiente es un mensaje de error que aparece al subir un gráfico SVG a un sitio web de WordPress:

Mensaje de error de WP al subir un SVG

Se debate actualmente la posibilidad de que SVG forme parte de las funciones principales de WordPress. Hasta entonces, tenemos que ser creativos y utilizar otras soluciones para subir imágenes SVG a WordPress.

¿Por qué utilizar SVG en WordPress?

Diferencia entre SVG y SVG (compex)

A pesar de sus problemas de seguridad, muchos usuarios siguen utilizando este formato de imagen ya que tiene varios beneficios. Estas son algunas de las ventajas de utilizar archivos SVG:

  • Escalabilidad: como el SVG es un formato de imagen vectorial, los archivos SVG conservan la misma calidad en todas las resoluciones de pantalla. Esta ventaja también está presente después de ampliarlos, por lo que mucha gente utiliza este formato de imagen escalable para iconos y logotipos.
  • Menor tamaño de archivo: el uso de archivos SVG facilita la mejora del rendimiento del sitio web con imágenes a escala, ya que ocupan menos espacio de almacenamiento en la web y se cargan mucho más rápido que las imágenes raster.
  • SEO-friendly: Google indexa los archivos SVG, permitiéndoles aparecer en la Búsqueda de Imágenes de Google y mejorando tus esfuerzos de SEO. Con las imágenes rasterizadas, te limitas a optimizar sus atributos alt.
  • Basados en el código: los SVG son modificables mediante un editor de texto o un software de edición de gráficos vectoriales. Puedes optimizar los archivos de imagen SVG para sitios web o incluso añadir animaciones para que los gráficos sean interactivos.

WordPress SVG: seguridad

Dado que SVG es básicamente un archivo de texto XML, tiene vulnerabilidades explotables que no afectan a otros formatos de imagen. En consecuencia, la gente puede secuestrarlo fácilmente con código malicioso para lanzar ataques de secuencias de comandos entre sitios (XSS) y de entidades externas XML (XXE) en tu sistema.

Por esta razón, hay que tener cuidado al manejar archivos SVG y añadirlos a WordPress.

Para minimizar los riesgos de seguridad, asegúrate de desinfectar los archivos SVG antes de subirlos a la biblioteca multimedia de WordPress. Este proceso elimina el código sospechoso y los errores, haciendo que las imágenes sean seguras para tu sitio.

Puedes desinfectar las cargas de archivos SVG utilizando un plugin de SVG. Cubriremos los pasos para hacerlo más adelante. Sin embargo, recomendamos hacer una doble desinfección con el SVG Sanitizer Test, una herramienta online de Darryll Doyle, un desarrollador de WordPress.

Otra forma de asegurar tu sitio web de WordPress es limitando las cargas de SVG sólo a los usuarios de confianza. Los usuarios seleccionados deben ser conscientes de los problemas de seguridad que rodean al formato SVG. Esto les hará pensar dos veces antes de obtener archivos SVG de fuentes dudosas. 

¿Cómo subir archivos SVG a WordPress utilizandos 2 métodos seguros?

Técnicamente, hay dos formas de añadir soporte para SVG a WordPress: utilizando un plugin o habilitándolo manualmente. Independientemente de tu elección, te recomendamos encarecidamente que limites los privilegios de carga a los administradores y a los usuarios de confianza para minimizar las cargas maliciosas.

Utilizar un plugin

En este tutorial, vamos a utilizar el soporte SVG. Este plugin utiliza una biblioteca de desinfección de SVG que se activará automáticamente al subir archivos SVG a la biblioteca de medios. También es fácil de configurar y de uso gratuito.

Estos son los pasos para configurar el soporte SVG:

  1. Instala el plugin y actívalo.
Plugin SVG Support en WP
  1. Ve a Ajustes -> SVG Support desde tu panel de control de WordPress.
Ubicación del plugin SVG Support en ajustes de WP
  1. Marca la casilla junto a la opción Restrict to Administrator para limitar los privilegios de carga. Haz lo mismo con la opción Enable Advanced Mode si deseas acceder a funciones avanzadas, como la representación de SVG en línea y el estilo CSS. 
Configuración del plugin SVG Support
  1. Después de guardar los cambios, puedes empezar a subir los archivos SVG de forma segura a la biblioteca multimedia. 

Consejo profesional

La opción de renderizar las imágenes destacadas en línea aparecerá en las entradas de WordPress que utilicen archivos SVG como imágenes destacadas si activas el modo avanzado.

Añadir manualmente la compatibilidad SVG de WordPress

Este método implica editar el archivo functions.php de tu sitio web de WordPress. Por lo tanto, te recomendamos que sigas estos pasos cuidadosamente si estás familiarizado con PHP y entiendes perfectamente el tema de la seguridad de los SVG.

¡Importante! Asegúrate de hacer una copia de seguridad de tu sitio web de WordPress antes de realizar cualquier cambio para evitar cualquier pérdida de datos en caso de una mala configuración.

Los siguientes pasos explicarán cómo habilitar SVG en WordPress manualmente a través del Administrador de Archivos de Hostinger. Dicho esto, también puedes utilizar un cliente FTP como FileZilla en su lugar.

  1. Accede a hPanel y ve a Archivos -> Administrador de Archivos.
  2. Dirígete a public_html -> wp-includes. Desplázate hacia abajo hasta que encuentres functions.php.
Ubicación del archivo functions.php en el Administrador de Archivos
  1. Haz doble clic en el archivo para abrirlo y pega el siguiente fragmento de código:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
  1. Guarda los cambios e intenta subir un archivo de tipo SVG. Si el proceso es exitoso, tu biblioteca de medios debería aceptar la carga del archivo.

Conclusión

Las numerosas ventajas de los archivos SVG contribuyen a la creciente popularidad de este tipo de archivos. Por desgracia, los archivos de texto XML son propensos a la inyección de código, que es la principal razón por la que WordPress no incluye soporte para SVG por defecto, suponiendo un problema para la seguridad de la web.

Dicho esto, hay dos maneras de hacer que tu sitio de WordPress acepte archivos SVG: utilizando un plugin de WordPress o modificando el archivo functions.php del sitio. Junto con la limitación de los privilegios de carga, conseguirás subir de forma segura los archivos SVG a la biblioteca multimedia del sitio.

Esperamos que este artículo te haya dado una idea de las ventajas y los riesgos de subir archivos SVG a un sitio web de WordPress. ¡Buena suerte!

Author
El autor

Deyimar A.

Deyi es una entusiasta del marketing digital, con experiencia en diseño de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo de SEO & Localization de Hostinger. En su tiempo libre, le gusta desarrollar proyectos, leer un libro o ver una buena película.