Subir imágenes SVG a WordPress: Una Guía Definitiva

SVG, que significa «Scalable Vector Graphics», es un formato de imagen bastante popular. En la era digital de hoy, optimizar su sitio web de WordPress incluye entender cómo subir SVG a WordPress para situaciones concretas donde es la mejor opción.

¿Por Qué Usar SVG en WordPress?

Los gráficos vectoriales escalables o imágenes SVG son ideales para usar en tu sitio web de WordPress en elementos como logos o iconos. Debido a su naturaleza escalable y resolución independiente. En otras palabras, no importa el tamaño al que los cargues, siempre mantienen su nitidez y claridad. Y teniendo como tenemos hoy tantos tamaños y resoluciones de pantalla esto es muy útil. Además, los archivos SVG son a menudo más pequeños en tamaño, lo que significa que pueden ayudar a acelerar la carga de tu web.

Cómo Habilitar el Soporte SVG en WordPress con plugins

Por defecto, WordPress no permite la subida de archivos SVG debido a preocupaciones de seguridad. Sin embargo, hay varias formas de habilitar la subida de archivos SVG.

Una opción es utilizar un plugin como «SVG Support» o «Safe SVG«. Una vez que has instalado cualquiera de ellos podrás subir archivos SVG a tu biblioteca de medios de WordPress.

Pasos para Subir un Archivo SVG a WordPress

1. Descarga e instala un plugin de soporte SVG: Para empezar, vete al panel de administración de WordPress y luego a ‘Plugins > Añadir nuevo’. Busca «SVG Support» o «Safe SVG», luego instálalo y actívalo.
2. Sube tu archivo SVG: Vete a ‘Medios > Añadir nuevo’ en tu panel de administración de WordPress. A continuación, seleccione tu archivo SVG y haz clic en ‘Abrir’ para subirlo.
3. Incorpora tu archivo SVG en el contenido: Ahora que ty archivo SVG está en la biblioteca de medios, puedes añadirlo en tus páginas o entradas como lo haría con cualquier otra imagen. O en sitios como el personalizador para añadir el logo del menú o el footer.

Subir SVG a WordPress sin Plugins

Si prefieres no utilizar plugins para habilitar la carga de archivos SVG en WordPress, puedes hacerlo manualmente siguiendo estos pasos:

1. Añadir un filtro al archivo functions.php

Para habilitar el soporte de SVG en WordPress sin plugins puedes agregar un filtro al archivo functions.php de tu tema.

Si quieres hacerlo puedes seguir estos pasos:

a. Desde el panel de administración de WordPress, vete a ‘Apariencia > Editor de temas’.

b. En la lista de archivos a la derecha, busca el archivo ‘functions.php’ y haz clic en él para editarlo.

Esto solo es posible si tienes activada la edición de temas. Si no es así tendrás que ir a buscar el archivo vía ftp o en el gestor de archivos de tu hosting.

c. Copia y pegue el siguiente código al final del archivo:

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

d. Haz clic en ‘Actualizar archivo’ para guardar los cambios.

Este código permitirá la carga de archivos SVG en tu biblioteca de medios.

2. Solucionar problemas de visualización de SVG en la biblioteca de medios

Cuando subas archivos SVG a tu biblioteca de medios de WordPress, es posible que no puedas ver las imágenes en miniatura. Para solucionar este problema, deberás agregar otro fragmento de código a tu archivo functions.php:

function fijar_vista_previa_svg($response, $attachment, $meta) {
    if ($response['mime'] === 'image/svg+xml') {
        $response['sizes'] = [
            'thumbnail' => [
                'url' => $response['url'],
                'width' => $response['width'],
                'height' => $response['height'],
            ],
        ];
    }
    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'fijar_vista_previa_svg', 10, 3);

Esto solucionará el problema de las miniaturas en la biblioteca de medios.

3. Subir y utilizar archivos SVG en tu contenido

Una vez que hayas habilitado el soporte de archivos SVG en WordPress con o sin plugins, puedes seguir estos pasos para subir y utilizar archivos SVG en el contenido:

a. Vete a ‘Medios > Añadir nuevo’ en tu panel de administración de WordPress.

b. Selecciona tu archivo SVG y haz clic en ‘Abrir’ para subirlo.

c. Una vez subido, puede agregar el archivo SVG a tus páginas o entradas como lo harías con cualquier otra imagen en jpg o png.

Tenga en cuenta que subir archivos SVG sin plugins puede ser menos seguro que utilizar un plugin específico para ello, ya que los plugins suelen incluir medidas de seguridad adicionales. Asegúrese de mantener sus archivos SVG limpios y libres de código malicioso para minimizar los riesgos de seguridad.

Una vez que hayas subido tus imágenes SVG a WordPress, te recomendamos leer nuestra guía para optimizar imágenes en WordPress para asegurarte de que tus imágenes no solo se vean geniales, sino que también ayuden a que tu sitio web funcione de manera óptima.

Problemas Comunes al Subir SVG a WordPress y Cómo Resolverlos

Aunque subir archivos SVG a WordPress puede ser una tarea sencilla con la ayuda de plugins, a veces pueden surgir problemas. Uno de los más comunes es que el archivo SVG no se muestra correctamente después de ser subido. Esto puede ser causado por un error en el propio archivo SVG, por un problema con el plugin de soporte SVG que estás utilizando, o por un problema con la configuración de seguridad de su servidor.

Si su archivo SVG no se muestra correctamente, prueba a abrirlo en un editor de gráficos vectoriales, como Adobe Illustrator, y a guardarlo de nuevo. Si esto no funciona, intenta desactivar y volver a activar tu plugin de soporte SVG, o prueba con un plugin diferente. Si todavía tienes problemas, puede que necesite ponerte en contacto con tu proveedor de hosting para discutir las posibilidades de cambiar la configuración de seguridad.

Conclusión

Subir imágenes en formato SVG a WordPress puede ser una excelente manera de mejorar la apariencia y el rendimiento de tu sitio web. Con la ayuda de plugins de soporte SVG, este proceso puede ser fácil y sin problemas. Asegúrate de tener en cuenta los problemas potenciales y cómo resolverlos para garantizar que tu experiencia con SVG en WordPress sea lo más fluida posible.