2 formas de a√Īadir SVG WordPress ūüĎĆ

Por motivos de seguridad no puedes subir imágenes SVG a WordPress. Y si tratas de subir un fichero con la extensión SVG verás este error:

Lo siento, este tipo de archivo no est√° permitido por motivos de seguridad.

Resulta que los SVG son ficheros de texto —puedes abrirlos con el bloc de notas y ver√°s que define puntos y l√≠neas geom√©tricas que conforman una im√°gen— y son peligrosos ya que pueden guardar y ejecutar Javascript.

Por eso tienes que ser precavido y evitar descargar ficheros svg de cualquier sitio, ya que pueden estar manipulados por personas malintencionadas.

Y por el contrario, las im√°genes SVG bien utilizadas tienen sus ventajas:

  • El tama√Īo de los ficheros es muy peque√Īo: unos pocos KB en comparaci√≥n con las decenas o cientos de KB de una imagen jpg o png.
  • Al ser peque√Īas, su descarga y tu web son m√°s r√°pidas.
  • No tienen p√©rdida de calidad al cambiar su tama√Īo (son responsivas).
  • Cualquiera puede editar la imagen y a√Īadir o eliminar elementos, ya que son puntos y l√≠neas.

Y por encima de todo, es el formato que usan los ilustradores en programas como: Corel Draw, Inkscape e Illustrator. Por eso —c√≥mo dise√Īador— puedes necesitar activar svg en WordPress y desbloquear esta medida de seguridad.

Te mostrar√© dos formas, la primera es tan f√°cil como instalar un plugin. La segunda opci√≥n consiste en a√Īadir unas l√≠neas de c√≥digo y te servir√° si estas creando un tema personalizado.

Opción 1 - Instalar un plugin (fácil)

Es la opción que te recomiendo si quieres una solución fácil. Sólo tienes que instalar y activar el plugin Save SVG y podrás subir ficheros SVG desde la biblioteca de medios de WordPress.

Encontrar√°s el plugin en el repositorio p√ļblico de WordPress y esta es su apariencia:

Adem√°s de permitir la subida de ficheros svg, el plugin se encarga de analizar y neutralizar cualquier amenaza que pudiera tener dentro.

La versi√≥n b√°sica es gratuita y es la que te recomiendo cuando eres el √ļnico administrador del sitio. En cambio, si tienes varios usuarios o redactores, es mejor que instales el plugin SVG Support que permite restringir la subida de ficheros SVG s√≥lo a los administradores.

Opción 2 - Programar un filtro (mejor rendimiento)

Para el segundo lugar he dejado la opci√≥n m√°s compleja que consiste en programar un filtro —sirven para modificar el funcionamiento original de WordPress— que permite a√Īadir los SVG a WordPress. Si eres valiente y te atreves a enredar con los entresijos de WordPress conseguir√°s ahorrar la instalaci√≥n de un plugin y que tu sitio est√© optimizado.

En este enlace te explico como crear un tema hijo que es una técnica que usan los programadores para hacer modificaciones en el tema principal de forma segura y rápida.

Con el tema hijo activo, edita el fichero functions.php al que tienes que a√Īadir est√°s l√≠neas:

function custom_mimes( $mimes = array() ) {
	// New allowed mime types.
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'custom_mimes' );

A la hora de subir las imágenes es importante que estén en formato xml, en caso contrario obtendrás un error de seguridad.

Es f√°cil solucionarlo, abre el fichero de la imagen con un editor de texto y a√Īade este c√≥digo al principio del fichero:

<?xml version="1.0" encoding="utf-8"?>

Guarda el fichero y trata de subir la imagen de nuevo.

As√≠ que tienes dos m√©todos, uno f√°cil y otro con mejor rendimiento para a√Īadir svg a WordPress.


¬ŅTe ha gustado? M√°ndame √°nimos con un comentario. ¬°Gracias!

Mabel.


Creative Commons License

Esta obra est√° bajo una licencia de Creative
Commons Reconocimiento-NoComercial-CompartirIgual
4.0 Internacional
.