TUTORIAL

Cómo usar e insertar imágenes en formato SVG en WordPress

Si quieres aprender a utilizar el formato SVG en tu WordPress de forma rápida y sencilla. A continuación te dejo está guía que estoy seguro que te podrá ayudar. En esta guía te contaré sobre 2 alternativas para habilitar el SVG en WordPress. La primera será a través de un Plugin y la segunda es a través de la edición del function.php

Que es el formato SVG

En palabras sencillas es el SVG (Scalable Vector Graphics) es una imagen basada en vectores. Donde una de sus mayores ventajas es que no importará el tamaño del ordenador o smartphone tus imágenes siempre, pero siempre, se verán en una muy buena calidad.

Sus ventajas

  • Las imágenes en SVG son responsive
  • Pesan muy poco
  • Pueden ser animadas como un GIF

Pero ¿Cómo es un SVG por detrás?

Codigo-SVG

Plugin para WordPress

Una de las formas más fáciles de utilizar el formato en SVG en WordPress es instalando un plugin.

El que yo te recomiendo es el SVG Support Una vez que lo tengas instalado, simplemente debes subir tus imágenes en formato en SVG como si se tratará de cualquier otro formato.

No puede ser más fácil.

Editando el Function.php

Si sabes de que estoy hablando, puedes seguir adelante, pero si no. Mejor instala el plugin y así te evitas problemas.

Como ya sabrás tendrás que irte a Apariencia -> Editor -> function.php para luego ingresar el siguiente código:

// Para usar SVG en WordPress
 
add_filter('upload_mimes', 'activar_svg');
function activar_svg($mimes = array()) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}

Con esto ya podrás utilizar las imágenes en formato SVG.

IMPORTANTE

Tal vez no lo sabes, pero las imágenes en formato SVG generalmente se exportan desde Illustrator. Donde tienes dos opciones: guardarla en formato .SVG o copiar el código que esa imagen para pegarla.

Después de varios intentos fallidos, logré dar con la solución al problema de no poder mostrar los códigos SVG en WordPress.

Resulta que WordPress lee sólo los códigos SVG que estén en linea. Para ello, necesitarás utilizar la herramienta Svgomg en dónde simplemente tienes que subir tu imagen en formato SVG y de forma automática te comprimirá el archivo, pero además te dará el código lineal para pegarlo en WordPress.

NOTA: Si quieres darle una dimensión exacta a tu imagen debes incorporar este código: width=”300px” height=”300px” donde el “300” lo puedes cambiar por el tamaño que necesites.

TE PODRÍA INTERESAR