Cómo usar imágenes SVG en tu WordPress
Una forma de mejorar el rendimiento de tu sitio web es que tus imágenes tengan el menor peso posible, en el blog ya te he comentado algunas herramientas y formas que te permitirán hacer este trabajo.
Otra de las formas es reemplazar tus imágenes por otras vectoriales, que por lo general son más livianas y tienen la gran ventaja de que al ser escaladas no pierden calidad, se ven de la misma forma.
El formato por excelencia para llevar las imágenes vectoriales a la web es el SVG o Scalable Vector Graphics que según la Wikipedia
Es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML, cuya especificación es un estándar abierto desarrollado por el W3C desde el año 1999
Lamentablemente, o no, no es llegar y subir a tu WordPress una imagen en este formato, la razón principal para que sea así es relacionada con la seguridad debido a que personas malintencionadas podría incorporar código maliciosos dentro del código de la imagen para ser ejecutado cuando alguien acceda a ella.
En este artículo te voy a comentar cómo hacer que tu blog acepte este tipo de imágenes y las precauciones que has de tener para no tener problemas de seguridad con ellas.
Donde consigo imágenes SVG
Anteriormente te he mencionado algunos bancos de imágenes gratuitos, en el listado hay uno en donde puedes encontrar imágenes en formato SVG y ese es Pixabay, de ahí yo he sacado más de una vez alguna imagen.
En Pixabay hay una sección con imágenes vectoriales, lamentablemente no todas están en formato SVG, algunas las puedes encontrar en AI, el formato de Adobe Illustrator, solo tendrás que abrirlas en dicha aplicación y exportarla a SVG.
Por último si no te quieres liar mucho tienes la opción de utilizar la imagen en formato PNG, aunque el peso de la misma aumentará, lo puedes ver con la siguiente imagen que he descargado de Pixabay.
La imagen en formato SVG tiene un peso de 43 kB,mientras en PNG a una resolución de 640px x 490px tiene un peso de 160 kB, a resoluciones superiores el peso va en aumento.
Cómo crear una imagen SVG
Para crear imágenes vectoriales en formato SVG tendrás que utilizar algún programa especialmente preparado para ello, algunos de ellos pueden ser Adobe Ilustrator, Corel Draw o Inkscape, este último totalmente libre y es el que yo utilizo a día de hoy.
No pretendo que este artículo sea una guía de como utilizar uno u otro programa gráfico, quizás más adelante sea la oportunidad, pero me gustaría dejarte con un video sobre como exportar a SVG desde Adobe Illustrator, si utilizas Inkscape no tienes problemas porque SVG es su formato nativo
Existen algunos otras aplicaciones que te harán más sencilla la creación de imágenes vectoriales, especialmente porque son aplicaciones en línea, por lo que no tendrás que instalar ningún programa en tu computador.
Cómo incorporar SVG a WordPress
Existen varias formas de hacer que tu WordPress acepte las imágenes en formato SVG, ya sea incorporando un pequeño código a tu archivo de funciones (o plugin personal) o a través de alguno de los plugins que encontrarás en el repositorio de WordPress.
Método 1: functions.php
La opción “barata” y no tan segura es incorporar el siguiente código en tu archivo de funciones functions.php
function enable_svg_upload( $upload_mimes ) {
$upload_mimes['svg'] = 'image/svg+xml';
$upload_mimes['svgz'] = 'image/svg+xml';
return $upload_mimes;
}
add_filter( 'upload_mimes', 'enable_svg_upload', 10, 1 );
Si utilizas este método te sugiero que solo subas tus propias imágenes, así sabrás que no tienen código malicioso en ellas
Método 2: utilizando un plugin seguro.
En el repositorio oficial de WordPress, ese que puedes acceder desde tu propio WordPress, existe un centenar de plugins que habilitan la utilización de imágenes vectoriales en formato SVG, algunos más seguros que otros.
La instalación de ellos en tu Blog es muy sencilla, solo tienes que dirigirte a Plugins -> Añadir nuevo desde el Escritorio y ahi en la casilla de busqueda escribir el nombre del Plugin, para mas detalles puedes ver el artículo que he escrito sobre Cómo instalar Plugins.
SVG Support
El primero de ellos es SVG Support de Benbodhi, no es estrictamente el más seguro, deja en tus manos la responsabilidad de chequear la seguridad de tus imágenes svg, limitando a su vez cual de los tipos de usuario tiene la posibilidad de subir archivos SVG, así lo puedes limitar solo a los Administradores (tú).
Safe SVG
El segundo plugin es Safe SVG de Daryll Doyle y como su nombre lo sugiere es más seguro que el anterior al realizar la santificación o limpieza de los archivos SVG que subas a tu WordPress, eliminando las vulnerabilidades que puedan tener.
Safe SVG, junto a la versión gratuita, tiene una versión Premium que te dará la posibilidad de con el mismo plugins optimizar tus archivos SVG, limitar quienes tienen la posibilidad de subirlos, además de incorporar SVG inline
Palabras al cierre.
Como espero que te haya quedado claro, la utilización de imágenes SVG te ayudarán a que tu Blog sea un poco más ligero, lo que a ayudará a la experiencia de tus usuarios en él y de paso también le agradará a Google.
Lo que tienes que tener siempre en cuenta es que tan seguros son los archivos SVG que tienes en tu web, por lo que si utilizas archivos creados por terceros siempre realiza el proceso de Santificación, Safe SVG te vendrá muy bien.
Como siempre estoy atento a tus dudas a través de los Comentarios, del Formulario del blog y en mi Twitter. No dudes en compartir este artículo en tus redes sociales, te lo agradeceria un montón.
