Hosting WordPress Webempresa

Cómo usar imágenes SVG en WordPress

por | Sep 14, 2022 | Aprender WordPress, Plugins WordPress, Seguridad WordPress

Cómo usar imágenes SVG en WordPress

Las imagenes en formato SVG son muy populares entre los diseñadores y desarrolladores ya que permite redimensionar las imagenes sin perder calidad y ademas suelen tener un peso menor con lo que conseguimos mejorar el rendimiento de la web.

Por defecto WordPress no permite esta clase de archivos por temas de seguridad ya que a los archivos XML se puede añadir código malicioso y ese es el principal motivo por el que WordPress no permite esta clase de archivos pero siempre que la imagen sea nuestra no hay problemas en la carga de esa clase de archivos aunque veremos tambien como podemos sanear o desinfectar un archivo SVG

En este articulo vamos adentrarnos en los archivos SVG, que son, las ventajas que nos ofrecen y como habilitar el soporte SVG en WordPress.

Qué es un archivo SVG

Los archivos SVG (Scalable Vector Graphics) son gráficos vectoriales los cuales nos permiten escalar automaticamente las imagenes adaptándolas a cualquier resolución, básicamente son archivos de texto basados en el formato XML.

A diferencia de los formatos JPG o PNG que utilizan pixeles, este formato utiliza el lenguaje XML para escribir los atributos de la imagen.

Segun wikipedia:

Los gráficos vectoriales escalables o gráficos vectoriales redimensionables (del inglés: Scalable Vector Graphics (SVG) es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato de lenguaje de marcado extensible XML (Extensible Markup Language), es decir que se compone por código y cuya especificación es un estándar abierto desarrollado por el W3C desde 1999. A diferencia de aquellos gráficos codificados en webPJPGPNG, o TIFF (Rasters), los SVG pueden ser interactivos y dinámicos y esto se debe a que no se componen por mapa de bits, sino que están compuestos por vectores, que son instrucciones matemáticas que se le dan al navegador o programas de ediciones de estos gráficos vectoriales, para escalarlos de manera infinita y sin perder resolución o calidad en el gráfico.

Segun las estadísticas este formato, a fecha de septiembre del 2022, esta presente en el 52% de las webs y comparado con el mismo mes del 2021 que fue de un 38% vemos que el aumento es considerable convirtiéndose en uno de los formatos preferidos por los diseñadores y desarrolladores.

Podemos ver un ejemplo del el logo de Twitter en formato SVG.

 

Observando el código generado al carga la pagina con el inspector de la web vemos que esta cargando en formato SVG:

Vamos a ver un ejemplo del rendimiento de las imagenes en formato JPG, PNG y SVG

Imagen en formato JPG con un peso de 93KB

Imagen en formato PNG con un peso de 70KB

Imagen con formato SVG con un peso de 16KB

Como veis estamos reduciendo el peso de imagen en mas del 80% y ese es motivo por el cual muchos usuarios se decantan por este formato de imagen.

Una cosa a tener en cuenta es que las plataformas de redes sociales no soportan este formato de imagen pero podemos solucionarlo utilizando las opciones que nos ofrecen los plugins de SEO como Yoast o RankMath

La seguridad en los archivos SVG

Como comentamos antes los archivos SVG no es un archivo de imagen como tal si no un archivo XML y como todo archivo que contenga código esta expuesto a la inyección de código malicioso como puede ser la ejecución de javascript, redireccionar a comandos no deseados, inyección de código XXS, vulnerabilidades…. Pero esto no significa que no lo puedas utilizar solo hay que tener cuidado y si es posible utilizar nuestras propias imagenes en formato SVG, existen un sinfín de aplicaciones que nos permiten crear nuestras imagenes en ese formato como puede ser Photoshop o Gimp, incluso Adobe tiene una aplicación on-line gratuita que nos permite convertir imagenes en formato JPG, PNG a vectores SVG.

En esta misma entrada veremos varias opciones para poder usar imagenes SVG en WordPress, una de ellas es la utilización de plugin el cual cuando subamos un archivo SVG saneara el código y eliminara cualquier código no deseado que pueda contener.

Ventajas de los archivos SVG

Aunque para la mayoría de imagenes seguiremos utilizando archivos JPG o PNG, ya que al ser un vector es posible que si la imagen es complicada o muy cargada el resulta no sea el mejor, los archivos SVG son una muy buena opción para el diseño de logotipos, tablas, iconos, etc….
Las ventajas de utilizar esta clase de archivo son numerosas, escalabilidad ya que al ser un archivo vectorial conserva la misma calidad de imagen en todas las resoluciones, menor tamaño con lo que estamos mejorando en la carga de la web, SEO ya que Google permite la indexación de esos archivos con lo que aparecemos en las búsquedas de imagenes de Google.

Cómo habilitar soporte SVG en WordPress

Bueno visto todo lo anterior vamos a meternos ya en acción y ver las diferentes formas que tenemos de poder usar imagenes en formato SVG en nuestro WordPress, básicamente veremos dos forma una manual y otra con plugin.

Con una función

Podemos permitir la carga de archivos SVG simplemente añadiendo una función en el archivo functions.php o con un plugin como puede ser Code snippets.
Si te soy sincero este método es el que menos me gusta por lo que comentamos antes de los peligros que conlleva utilizar esta clase de archivos, con una función solo estamos permitiendo la subida de los archivo SVG pero no sanitizamos el código con lo que corremos el peligro de que nos lo cuelen si estamos utilizando alguna imagen externa que no sea nuestra pero como es una opción mas tenemos que tratarlo.

Accedemos al archivo functions.php que podemos encontra en wp-content -> themes -> tu_plantilla y añadimos el siguiente 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');

Una vez añadido si accedemos a la biblioteca de medios de WordPress e intentamos subir un archivo en formato SVG tendría que permitirnos la carga.

Con un plugin

Vamos a ver la opción que más me gusta para subir archivos en formato SVG y es utilizando un plugin que al mismo tiempo que permite las subidas en WordPress revisa el código del archivo y elimina cualquier código no deseado que podamos tener, el plugin que vamos a utilizar es SVG Support
Lo primero que tenemos que hacer es instalar el plugin a si que accedemos a Plugins -> Añadir nuevo, buscamos el plugin y lo activamos

Una vez instalado accedemos Ajustes -> SVG Support en el panel de administración de WordPress

El plugin es bastante sencillo y solo con instalarlo ya nos permite la subida de archivos CSV pero vamos a ir un poco mas:
En sus ajustes podemos restringir la subida de archivos solo a usuarios administradores, supongamos que tenemos una tienda, un blog o cualquier proyecto en el que estemos trabajando y aparte de nosotros tenemos colaboradores o trabajadores que tambien publican o añaden productos, estos colaboradores o trabajadores no podemos controlar la subida de archivos o imagenes con lo que nos es imposible saber si lo que estan subiendo proviene de fuentes de confianza o lo bajaron de otros sitios, con la opción ” ¿Restringir a los administradores? ” podemos indicarle que la subida de estos archivos sea solo para administradores impidiendo que otro rol de usuario puede cargar archivos SVG

La otra opción que tenemos que tener en cuenta es la de ” Sanear SVG al subir “, esto lo que hace es revisar el archivo durante la subida y sanear su código impidiendo ataques XSS y de inyección.

Con estas dos opciones es suficiente si solo lo vamos a utilizar para la carga de imagenes.

Conclusion

Las ventajas que aportan los archivos SVG esta provocando la creciente popularidad de este tipo de archivos pero, como hemos comentado los archivos XML son propensos a la inyección de código no deseado y ese es uno de los motivos por lo que WordPress no incluye el soporte de archivos en formato SVG ya que supone un problema de seguridad aunque como hemos visto con la opción de un plugin y limitando la subida a un rol especifico de usuario podemos subir archivos SVG de forma segura.

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa