La popularidad de las imágenes en formato SVG ha aumentado casi exponencialmente desde 2018, donde en la actualidad, agosto 2020, ha superado en uso a las imágenes GIF según las estadísticas de formatos de imágenes de W3Techs, seguro estás por este artículo interesado en cómo cargar y usar imágenes SVG en WordPress, debido a que esto no es posible por defecto desde el core del mismo, pero aun así es posible cambiar esto mediante código o el uso de plugins.
¿Por qué usar imágenes SVG en WordPress o página web?
Las imágenes SVG son gráficos vectoriales escalables, archivos basados en el marcado de texto XML tiene ventajas que la han hecho sobresalir en los últimos años, a pesar de ser un estándar abierto desde 1999 por la W3C.
- Ocupa menos espacio en el almacenamiento web, excelente para la optimización del rendimiento web o WPO.
- Las imágenes son escalables sin perder calidad, tanto en pantallas de alta resolución como en retina.
- Google indexa las imágenes SVG desde 2010, apareciendo en los resultados del buscador de imágenes, buenas noticias de SEO.
- Se puede aplicar código CSS, para modificar las propiedades de estilo de los elementos del SVG así como para animarlos también.
- Se puede insertar código JavaScript, aunque esto es una ventaja, si es bien usada, también es la razón por la que no está permitida la carga de imágenes desde el core de WordPress.
¿Por qué no se puede cargar imágenes SVG en WordPress?
Desde el año 2013 se inició una conversación en los foros de WordPress sobre habilitar la carga de archivos SVG desde el core de WordPress, pero en toda la historia de WordPress esto no ha sido posible por la razón de que su «ventaja» de insertar código JavaScript puede imponer riesgos en las páginas web si este llegara a ser malicioso, siendo más del 38% de las páginas en la web basadas en el CMS WordPress podría ser catastrófico tener una pequeña vulnerabilidad que afecte la seguridad del sistema con los usuarios.
Aun así podemos habilitar la carga de imágenes SVG en WordPress con código en el functions.php o mediante el uso de plugins especializados. Antes hay que seguir unos criterios sobre el uso seguro de las imágenes SVG sin arriesgar nuestras páginas web en WordPress.
¿Cómo usar las imágenes SVG de manera segura para WordPress y páginas web?
Aún conociendo que el uso de imágenes SVG puede ser peligroso para nuestras páginas web en WordPress, hay métodos o criterios que podemos seguir para mantener la seguridad en nuestros sitios.
Crear imágenes SVG desde cero
Si eres el creador de las imágenes SVG no corres riesgo de que se incluya código malicioso que pueda afectar tu página, entendiendo que no agregarías JavaScript que perjudique a WordPress.
Puedes diseñar y crear imágenes SVG desde programas de ilustración vectorial como Illustrator o Inkscape que es libre y de código abierto. Al diseñar tus imágenes en estos programas solo debes guardarlos como archivos en formato SVG y listo.
Excelente, pero no soy ilustrador y aun así me interesa usar imágenes SVG en WordPress. Podemos usar repositorios de imágenes como Freepik o Flaticon para descargar iconos o gráficos que le darán el estilo y diseño a nuestras páginas web, pero antes de usarlas debemos desinfectarlas.
Desinfectar las imágenes SVG de páginas web externas
Las imágenes SVG que descarguemos de repositorios de imágenes o de cualquier página web externa, nos puede incluir código que no queremos, sea malicioso o que ensucia el archivo de alguna manera, por esto debemos desinfectar las imágenes SVG de este código y mantener solo los elementos gráficos de la imagen.
Para desinfectar imágenes SVG podemos usar la librería en github SVG-sanitizer de Daryll Doyle, que podemos aplicar fácilmente en su página SVG-sanitizer demo. Solo debemos ingresar el código XML de la imagen SVG a usar, que podemos copiar desde un editor de texto como notepad o Bloc de notas y luego suplantarlo con el código limpio que genera el desinfectante SVG.
Restringir la carga de imágenes SVG a usuarios no administradores
Un criterio importante a tener en cuenta es restringir la carga de imágenes SVG a otros usuarios que puedan, sin querer, agregar una imagen SVG infectada de código malicioso y perjudicar la seguridad de la página web.
Es recomendable que solo el administrador o administradores de la página web en WordPress sean los únicos con los privilegios de cargar imágenes SVG por seguridad, siempre conociendo y tomando en cuenta que el archivo debe estar desinfectado.
Habilitar la carga de las imágenes SVG en WordPress
Ya cumplimos con los criterios de seguridad para el uso de imágenes SVG en nuestra página web, sea una imagen creada por nosotros mismos o descargada de un repositorio de imágenes a la vez desinfectada de código malicioso, ahora solo queremos cargarla y usarla en nuestra página WordPress, por lo que podemos recurrir a estos métodos.
Agregando código al archivo functions.php
Una manera de habilitar la carga de imágenes SVG a WordPress es mediante código en el archivo functions.php de nuestro tema activo. Recomiendo usar un tema hijo (Child Theme) para hacer este tipo de modificaciones.
Código para habilitar la carga de imágenes SVG en WordPress
function add_svg_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_types');
Este código habilita la carga de imágenes SVG en WordPress para todos los usuarios, por lo que si eres el único usuario o los usuarios del sitio web entienden los criterios de seguridad para estas imágenes, no habría problema, pero si queremos restringir la carga solo para administradores debemos incluir una línea de código extra.
Código para habilitar la carga de imágenes SVG en WordPress solo para administradores
/* Habilitar carga de imágenes .svg */
function add_svg_mime_types($mimes) {
if ( current_user_can('administrator') ){
$mimes['svg'] = 'image/svg+xml';
}
return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_types');Con este código se habilita la carga de imágenes SVG en WordPress solo para los usuarios con roles de administrador, puedes cambiar o agregar más roles a los que se quiera permitir el uso de imágenes SVG en WordPress.
Plugins para habilitar la carga de imágenes SVG en WordPress
Entiendo si no quieres agregar o modificar código en el archivo functions.php por inseguridad o no saber bien cómo hacerlo sin, tal vez, tumbar tu página web en WordPress, por lo que hay dos (2) plugins que nos facilitan este proceso.
Plugin SVG Support
Como su nombre lo indica habilita el soporte de las imágenes SVG en WordPress con la ventaja de poder restringir su uso solo a usuarios administradores, cumpliendo con la seguridad de uso.
Plugin Safe SVG
Plugin creado por Daryll Doyle que habilita la carga de las imágenes SVG en WordPress y además incluye la desinfección automática de los archivos SVG con el uso de la librería SVG-sanitizer del mismo autor. En su versión paga puede restringir el uso a usuarios por roles.
Conclusión
A pesar de que parezca un riesgo usar imágenes SVG en WordPress, la verdad es que cumpliendo ciertos criterios de seguridad, podemos utilizar este formato de imágenes que tiene ventajas que satisfacen los requerimientos de optimización web de la actualidad, por esto la razón de que su uso este creciendo cada día más.
Anímate a usar las imágenes SVG en tus páginas web para aprovechar los beneficios de peso, calidad, entre otros, que solo este tipo de archivos provee en la actualidad, siempre basado en los criterios que se han establecido.