Habilitar soporte SVG en WordPress

WordPress permite a los usuarios cargar bastantes tipos diferentes de archivos de imagen. Es probable que reconozca los sospechosos habituales, como PNG y JPG. Mostrar otros tipos de archivos, como gráficos vectoriales, puede ser más problemático.

Afortunadamente, hay algunas formas de incorporar archivos vectoriales en su sitio web. Si bien no es una función nativa, los archivos de gráficos vectoriales escalables (SVG) se pueden usar para mostrar imágenes bidimensionales en los sitios de WordPress. Con un poco de reconfiguración, podrá optimizar algunos de sus logotipos y otros gráficos utilizando este tipo de archivo.

Nota: si está alojando con WP Engine, admitimos de forma nativa la compresión GZIP en archivos SVG.

En este artículo, aprenderemos más sobre qué son los archivos SVG y por qué es posible que desee usarlos. Luego, veremos dos formas de habilitar su uso en su sitio web. También cubriremos algunas precauciones de seguridad importantes que quizás desee tomar. ¡Empecemos!

¿Qué es un SVG?

Un archivo SVG es un tipo de imagen vectorial. Los archivos vectoriales se componen de manera diferente a los tipos de archivos de imagen más comunes. Por ejemplo, un JPG se compone de miles de píxeles. Con un archivo SVG, por otro lado, ese no es el caso.

Las imágenes vectoriales son más como un conjunto de instrucciones escritas. No contienen píxeles que formen una imagen más grande. En cambio, incluyen un conjunto de datos similar a un esquema que crea una imagen bidimensional. Esto significa que hay algunos beneficios únicos al usar archivos SVG.

¿Por qué usar SVG?

Los SVG tienen una serie de ventajas. Dado que son altamente escalables, puede manipular el tamaño según sea necesario sin afectar la calidad de la imagen. Como sabrá muy bien, si intenta aumentar el tamaño de un JPG, la calidad se degrada a un nivel inutilizable muy rápidamente.

Ahí es donde los SVG pueden ser útiles. Si bien no están diseñados para mostrar fotografías tradicionales, son una excelente opción para logotipos comerciales, íconos y otros gráficos simples en su sitio web.

Además, los archivos SVG tienden a ser significativamente más pequeños que otros tipos de imágenes. Esto significa que su sitio no se empantanará con gráficos. Además, los archivos SVG están indexados por Google y lo han estado durante bastante tiempo. Esto puede ser una gran ayuda para la optimización de motores de búsqueda (SEO) de su sitio.

Cómo subir un SVG a WordPress

Dado que WordPress no incluye soporte para archivos SVG listos para usar, tendrá que esforzarse un poco más para incluirlos en su sitio web. En las próximas secciones, veremos cómo agregar archivos SVG a su sitio web con un complemento y mediante un proceso manual.

Método 1: usar un complemento

Al igual que con muchas tareas de WordPress, los complementos pueden simplificar la habilitación de la compatibilidad con SVG. Todo lo que tiene que hacer es elegir la herramienta adecuada y configurar algunos ajustes.

Paso 1: Descarga el complemento

Primero, deberá descargar e instalar un complemento SVG. Recomendamos compatibilidad con SVG:

Una vez que haya instalado y activado el complemento, tendrá una nueva opción de menú en su tablero de WordPress en Configuración> Soporte SVG . Allí, recibirá instrucciones sobre cómo diseñar archivos SVG para su sitio web:

Además, podrá configurar algunos ajustes administrativos importantes. Esto incluye restringir los privilegios de carga de SVG solo a los administradores:

Después de eso, podrá cargar archivos SVG directamente a su biblioteca multimedia. Sin embargo, hay algunos otros elementos importantes que debe cuidar primero.

Paso 2: habilite la compatibilidad con GZip de archivos SVG en su servidor

La forma en que aborde este paso dependerá de la configuración de su servidor web y servidor. Por ejemplo, aquí en WP Engine, GZip ya está habilitado para una lista específica de tipos de archivos. Dicho esto, "image/svg+xml" no es uno de ellos.

Agregar este tipo a la lista de su sitio web garantizará que sus archivos SVG se optimicen de manera adecuada y rápida. Deberá incluir este tipo de archivo en su archivo .htaccess para que todo funcione sin problemas.

Paso 3: asegúrese de que el complemento esté protegiendo correctamente los archivos

Una de las desventajas de usar archivos SVG, y la razón principal por la que este tipo de archivo aún no se ha incorporado al núcleo de WordPress, se debe a problemas de seguridad. Dado que los archivos SVG están basados ​​en XML, son vulnerables a los ataques de entidades externas, entre otros riesgos.

Cuando configure su complemento SVG, se recomienda que limite el acceso de carga SVG solo a los administradores. Sin embargo, un enfoque aún más seguro es "desinfectar" sus archivos SVG antes de cargarlos. Esto elimina cualquier código XML innecesario que podría dejar su sitio abierto a ataques.

El complemento SVG Support no incluye desinfección automática, pero hay otros complementos que sí lo hacen. Safe SVG es uno de ellos:

Alternativamente, también puede instalar su propio desinfectante y usarlo de forma independiente. El creador de Safe SVG ha proporcionado el código desinfectante del complemento en GitHub, para que cualquiera lo use.

Tener su propio desinfectante también es una buena opción si planea usar el siguiente método para habilitar SVG en su sitio web de WordPress.

Método 2: habilite manualmente las cargas de archivos SVG

Si prefiere ensuciarse las manos antes que usar un complemento, puede habilitar manualmente su sitio de WordPress para que acepte archivos SVG. A continuación, veremos cómo funciona ese proceso.

Paso 1: edite el archivo Functions.php de su sitio

Para comenzar, deberá editar el archivo functions.php de su sitio web. Para hacer esto, puede ir a Apariencia > Editar temas en su tablero y seleccionar el archivo functions.php :

Alternativamente, puede acceder a los archivos de su sitio utilizando una aplicación de Protocolo de transferencia de archivos (FTP) como FileZilla.

De cualquier manera, es mejor crear un tema secundario o cambiar a un entorno de desarrollo antes de realizar cualquier trabajo importante en su sitio web. Esto mantendrá su sitio en vivo a salvo de daños mientras realiza cambios.

Paso 2: agregue un fragmento de código

A continuación, deberá agregar el siguiente fragmento de código a su archivo functions.php :

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

Después de eso, podrá cargar imágenes SVG en su biblioteca multimedia. Allí, puede verlos e interactuar con ellos al igual que con otros tipos de archivos de imagen.

Paso 3: acceso seguro y limitar los permisos de carga de SVG

Como mencionamos anteriormente, habilitar archivos SVG implica ciertos riesgos. Para mantener su sitio seguro, puede establecer permisos de carga para SVG mediante la creación de funciones de usuario personalizadas. Puede usar un complemento como User Role Editor o WPFront User Role Editor para lograr esto.

Estos complementos le permiten personalizar los niveles de acceso y permiso para sus roles de usuario existentes. En otras palabras, le permitirán designar qué usuarios tendrán permiso para cargar archivos SVG. Esto lo ayudará a controlar la seguridad de esos archivos.

Manténgase seguro con WP Engine

De forma nativa, WordPress no permite el uso de archivos SVG. Eso es lamentable, ya que estos archivos tienden a ser la mejor opción para mostrar logotipos y otros gráficos. La buena noticia es que con la ayuda de algunos de nuestros recursos favoritos para desarrolladores, podrá habilitar y proteger el uso de archivos SVG en su sitio.

Además, tenga en cuenta que en nuestros planes de alojamiento de WordPress, obtendrá acceso a soporte profesional y soluciones de seguridad de sitios web bien desarrolladas. ¡Asegure su sitio con nosotros hoy!