WordPress permite a los usuarios subir bastantes tipos de archivos de imagen, como PNG y JPG. La visualización de otros tipos de archivos, como gráficos vectoriales, puede resultar más problemática.
Afortunadamente, existen algunas formas de incorporar archivos SVG a su sitio web. Con un poco de reconfiguración, podrás optimizar algunos de tus logotipos y otros gráficos utilizando este tipo de archivo.
Aproveche este artículo para saber más sobre los archivos SVG y por qué le conviene utilizarlos. Además, repasaremos dos formas de habilitar su uso en su sitio web. También vamos a cubrir algunas precauciones de seguridad importantes que es posible que desee tomar.
¿Qué es un SVG?
Un archivo SVG es un tipo de imagen vectorial que se compone de forma diferente a los tipos de archivo de imagen más comunes. Por ejemplo, un JPG se compone de miles de píxeles. Mientras que las imágenes vectoriales se parecen más a un conjunto de instrucciones escritas. No contienen píxeles que formen una imagen más grande. En su lugar, incluyen un conjunto de datos similar a un esquema que crea una imagen bidimensional.
¿Por qué utilizar SVG?
Los archivos SVG son mucho más pequeños que otros tipos de imágenes. Esto significa que su sitio no se verá atascado por los gráficos. Google indexa los archivos SVG. Esto puede ser de gran ayuda para la optimización de su sitio en los motores de búsqueda (SEO).
Cómo subir un SVG a WordPress
Dado que WordPress no incluye soporte para SVGs, tendrás que esforzarte un poco más para incluirlos en tu sitio web. Revisa las siguientes secciones de este artículo para obtener más información sobre cómo añadir archivos SVG a tu sitio web mediante un plugin y a través de un proceso manual.
Método 1: Utilizar un plugin
En primer lugar, tendrás que descargar e instalar un Compatibilidad con SVG Plugin.
Una vez que haya instalado y activado el plugin, tendrá una nueva opción de menú en su panel de WordPress bajo Configuración > Compatibilidad con SVG. Allí recibirá instrucciones sobre cómo dar estilo a los archivos SVG para su sitio web.
Además, podrá configurar algunos parámetros administrativos importantes. Esto incluye restringir los privilegios de carga de SVG sólo a los administradores. A continuación, podrá cargar archivos SVG directamente en su biblioteca multimedia.
Método 2: Activar manualmente la carga de archivos SVG
Para empezar, tendrás que editar el archivo functions.php de tu sitio web. Para ello, ve a Apariencia > Editar temas en el panel de control y selecciona el archivo functions.php. También puedes acceder a los archivos de tu sitio mediante una aplicación de protocolo de transferencia de archivos (FTP) como FileZilla.
En cualquier caso, es mejor crear un tema hijo o cambiar a un entorno de desarrollo antes de realizar cualquier trabajo importante en tu sitio web. Esto mantendrá tu sitio activo a salvo de cualquier daño mientras realizas los cambios.
A continuación, tendrá que añadir 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' );A continuación, podrá cargar imágenes SVG en su biblioteca multimedia. Allí podrás verlas e interactuar con ellas igual que con otros tipos de archivos de imagen.
