Cómo usar archivos SVG en WordPress de manera más segura

Como ya sabrás porque lo expliqué aquí mismo, los archivos SVG son potencialmente inseguros, básicamente porque no son imágenes sino código, susceptible de que alguien inyecte «más» código en ellos. De hecho, por defecto WordPress no permite subir archivos SVG.

Ahora bien, por otro lado son innegables también las ventajas de usar archivos SVG en tu web, especialmente para logotipos que quieras que se muestren siempre a gran calidad con archivos que al mismo tiempo sean de pequeño tamaño.

Cómo subir archivos SVG a WordPress fácilmente

Hay varias maneras de subir y utilizar archivos en formato SVG a WordPress, mediante código y plugins.

Para poder subir archivos .svg a WordPress mediante código añadido a tu plugin de funcionalidades, este:

/* Permitir subir archivos .svg */
function add_svg_to_upload_mimes( $upload_mimes ) {
$upload_mimes['svg'] = 'image/svg+xml';
$upload_mimes['svgz'] = 'image/svg+xml';
return $upload_mimes;
}
add_filter( 'upload_mimes', 'add_svg_to_upload_mimes', 10, 1 );

También puedes usar un plugin como Easy SVG Support, sin opciones ni ajustes, que no solo te permite subir archivos .svg sino que además se mostrarán en la biblioteca de medios y es compatible con el editor de bloques Gutenberg.

Ahora bien, el problema de usar los métodos anteriores es que no son seguros, porque permiten que cualquier usuario con la capacidad de subir archivos suba archivos .svg.

¿Entonces cómo puedo activar la compatibilidad con archivos SVG de manera más segura?

Un modo mucho más seguro de subir archivos SVG es mediante el plugin  SVG Support.

Además de permitir subir archivos SVG a tu web WordPress, también incluye las siguientes características:

• Permite la subida de archivos .svg solo a usuarios con perfil de administrador.
• Puedes cargar el script en el pie de página, para una mejor optimización.
• Permite cargar el script sin minimizar, para minimizarlo con tu plugin favorito de optimización.
• Puedes cargar el CSS necesario en portada si tu tema no muestra correctamente los archivos SVG.
• Puede insertar automáticamente una clase CSS si el tema no muestra correctamente los archivos .svg.
• Puedes añadir una clase CSS personalizada a la que aplicar los estilos de los archivos .svg.
• Puedes forzar que los archivos SVG se procesen integrados (inline), especialmente útil con maquetadores que no admitan insertar automáticamente la clase CSS del plugin.

Solo con activar la casilla de restringir la subida a administradores mejoras con mucho la seguridad, dejando en sus manos la tarea de subir este tipo de archivos potencialmente peligrosos.

Archivos SVG y el tema/constructor Divi

Si utilizas Divi debes saber que no se lleva bien con los archivos SVG, necesita algo de ayuda, y este plugin es genial en este aspecto también.

Habrá ocasiones en que, a pesar de dejarte subir los archivos SVG tras instalar el plugin, e incluso mostrarse en el maquetador, luego no se verán en la web.

Esto lo solucionas fácilmente en el 99% de los casos activando el ajuste de «¿Cargar el CSS de la portada?».

Si no se arregla con este ajuste entonces marca la casilla para activar el modo avanzado, guarda los cambios, y cuando se muestren los ajustes avanzados, activa la casilla «¿Forzar SVG integrados?»

Como habrás visto, es un plugin realmente útil y práctico, que hará que el uso de archivos en formato SVG en WordPress sea más seguro y óptimo.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!