Cómo Añadir archivos SVG a WordPress

Como bien sabes WordPress soporta múltiples formatos de imágenes, incluyendo JPEG, GIF, o PNG. Sin embargo, seguro que has intentado subir uno de los formatos más de moda en la web, y no has podido hacerlo. O al menos de una forma sencilla. Por supuesto, estamos hablando de archivos de imagen en formato SVG. Los SVG los podemos usar para iconos o ilustraciones que queramos en nuestra web. Las aplicaciones son múltiples, y en este artículo veremos algunas de sus ventajas.

Los Gráficos Vectoriales Escalables, o Scalable Vector Graphics (SVG) son un formato de gráficos vectoriales bidimensionales. Pueden presentarte tanto de forma estática como animada, en formato XML. Y su especificación es un estándar abierto desarrollado por el W3C desde el año 1999. Como veis no es que sea un formato que se haya descubierto hace pocos años. Pero es con el avance de resoluciones de pantalla mayores cuando se están usando con mayor frecuencia. Aunque su aplicación es aun pequeña, estando presente en menos de un 15% del total de webs.

En este artículo queremos tratar varios asuntos. Desde como podemos crear nuestros propios SVGs para agregarlos a nuestra web, y ver sus beneficios e inconvenientes. Además de, como no, explicar un par de métodos para conseguir poder subir archivos en este formato a nuestra biblioteca de medios de WordPress.

Creando nuestros propios SVGs

Y para ver que es un SVG, que mejor manera de crear uno por nosotros mismos. Para ello, nos valdremos de algún programa de gráficos vectoriales. Los más conocidos son Adobe Illustrator, Corel Draw, Inkscape, o Affinity Designer.

El proceso es tremendamente sencillo. Una vez tengamos creada nuestra imagen, solo tendremos que guardarla o exportarla como SVG. Así de simple. Si vamos a ver el archivo resultante, veremos que no debe de ocupar mucho espacio. Algo de lo que hablamos hace pocos días, cuando vimos el tema de la sostenibilidad y la web.

¿Qué beneficios nos da usar SVGs?

Las ventajas principales que encontramos son dos. Por un lado, el peso de los archivos. Hemos hecho una prueba con el logotipo de Silo Creativo, exportando a diferentes formatos de imagen. Y este es el resultado.

Como veis, las diferencias son notables. Además, al ser gráficos vectoriales, no hay que preocuparse de que, a ciertas resoluciones, nuestras imágenes vayan a pixelarse. Se acabaron las preocupaciones por subir nuestro logotipo, y que en pantallas de altas resoluciones, como las Retina Display, no se ven de forma adecuada.

Hasta hace unos años no pasaba esto, pero actualmente todos los navegadores web soportan SVG. Además de que podemos animarlos mediante CSS. Por último, Google indexa este tipo de archivo como cualquier otra imagen, así que no nos penalizará el SEO de nuestra web. Pero como todo en esta vida, tiene una parte negativa, que veremos a continuación.

Por desgracia, también existen inconvenientes

Bajo mi punto de vista, estas desventajas podríamos entrecomillarlas, ya que mas que inconvenientes, son aspectos con los que tener cuidado. El primero y más preocupante, es que es fácil insertar un código malicioso en un archivo SVG. Por este motivo, no debemos descargar un archivo en este formato desde cualquier web, y subirlo a nuestro WordPress. Mucho cuidado con esto. Por eso, es recomendable crear nosotros mismo nuestros logos o ilustraciones en SVG, o descargarlos de sitios de mucha confianza. Esta falta de seguridad es uno de los motivos por los que WordPress no permite subir este tipo de archivo por defecto.

Como os habréis dado cuenta, hablamos continuamente de logotipos e ilustraciones. Y esto es porque es muy difícil crear imágenes complejas en formato SVG. Además de que pueden llegar a ser demasiado pesadas. Para ello, es mejor usar otro tipo de archivos, como PNG, JPEG o GIF. En un artículo hablamos que formato de imagen es el más idóneo para cada ocasión.

Una vez que hemos hecho un repaso general, veamos como podemos habilitar la subida de SVG a nuestro WordPress.

Cómo Añadir SVG a WordPress

Una vez que hemos puesto en el mapa la relación entre los SVG y WordPress, vamos a ver como podemos subirlos a la biblioteca para usarlos en nuestra web.

Método 1 – Modificando el archivo functions.php

Este método solo lo recomendamos bajo un concepto. Y es si todos los archivos SVG que vayamos a subir a nuestro WordPress estén creados por nosotros mismos. Así nos aseguramos al 100% de que no contengan ningún código malicioso.

Lo bueno de este método es que no necesitaremos instalar ningún plugin extra, con los beneficios que ello conlleva. Dicho esto, solo tendremos que ir, desde el panel de administración de nuestro WordPress, a Apariencia > Editor. Solo tendremos que añadir al archivo functions.php las siguientes líneas 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_action('upload_mimes', 'add_file_types_to_uploads');

Como siempre que editamos este tipo de archivos, os recomendamos crear un tema hijo de la plantilla que estéis usando en ese momento. Nos ahorraremos futuros quebraderos de cabeza.

Método 2 – Mediante el uso de plugins

Lo más sencillo y seguro es activar algún plugin disponible para esta tarea. Si no sabes como instalar un plugin, mírate nuestro artículo. Navegando un poco por el repositorio de plugins de WordPress, encontraremos varios de ellos. La ventaja de estos plugins es que analizarán el código de los archivos SVG que subamos, cerciorando que no contengan ningún tipo de código malicioso.

Uno de los más conocidos y usados es SVG Support. Una vez instalado y activado, tenemos un par de opciones extra. Una nos da la opción de enlazar nuestros SVGs con CSS, en el caso que vayamos a animarlos. La otra, restringe la subida de SVG a WordPress solo para los administradores de la web.

Resumen

Como habéis podido ver, el uso de SVGs en nuestros proyectos pueden darle un plus de calidad en varios aspectos. Pero como siempre, deberemos de sopesar tantos sus aspectos positivos como negativos que derivan de su uso. Deberemos reflexionar en que situaciones su aplicación nos será beneficiosa, y en cuales será mejor usar otros tipos de archivos.

Y vosotros, ¿hacéis uso de archivos en formatos SVG en vuestra web? Tenéis los comentarios abiertos para que nos conteis vuestras experiencias y valoraciones sobre este tema.