Permitir subir imágenes SVG a WordPress

Cómo subir SVG en WordPress

Siguiendo la línea de optimización web no podía faltar un artículo dedicado a los archivos SVG. Pero no todo son pros, sigue leyendo y descubrirás diferentes métodos para subir SVG a WordPress, los pros y contras, qué es un SVG, etc.

Qué es una imagen SVG

No, SVG no es una imagen sino un archivo basado en XML y escrito en lenguaje SVG para que nuestro buscador lo interprete y pinte. Este tipo de archivos también puede ser manipulado mediante CSS y/o JavaScript.

Riesgos al subir imágenes SVG a WordPress

Los archivos SVG pueden manipularse y contener código malicioso en JavaScript. Es por esto que WordPress, por defecto, no permite subir estos archivos de forma nativa. Si queremos subir SVG a WordPress debemos obtenerlos de una fuente fiable. Esta característica de WordPress es, para muchos, una de las desventajas de este CMS. Pero no desesperemos, para todo hay soluciones en WordPress.

Ventajas de subir imágenes SVG a WordPress

Las ventajas más destacadas sin duda son:

  1. Archivo ligero: Los archivos SVG pesan mucho menos que cualquier archivo de imagen, con el consecuente impacto en la carga de nuestra web
  2. Escalabilidad: Al ser un archivo vectorial puede escalarse a cualquier proporción sin pérdida de calidad ni pixelación. Podéis imaginaros las ventajas en cuanto al diseño responsive
Diferentes métodos para subir SVG a WordPress

Formas de subir imágenes SVG a WordPress

A continuación ofrezco una serie de métodos diferentes que funcionan al 100% a día de hoy:

Permitir SVG en WordPress mediante código nativo

Este método es quizá el más sencillo ya que tan solo tendremos que incluir el siguiente código en nuestro functions.php para permitir la subida de SVG a WordPress:

Código WordPress para permitir subir archivos SVG

function webheroe_svg($data, $file, $filename, $mimes) {
  $tipo = wp_check_filetype( $filename, $mimes );
  return [
      'ext'             => $tipo['ext'],
      'type'            => $tipo['type'],
      'proper_filename' => $data['proper_filename']
  ];
};
add_filter( "wp_check_filetype_and_ext", "webheroe_svg", 10, 4);

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

Contras:

Si nuestra web es manipulada por varias personas quizá no sea el método más apropiado, ya que no conoceremos si todas las fuentes de las que se obtienen los archivos SVG son 100% fiables.

Subir SVG a WordPress mediante FTP

Subir SVG a WordPress mediante FTP

Este método es algo más tedioso pero nos garantizará que solo los que tengan acceso FTP puedan subir imágenes SVG. Sigamos los siguientes pasos:

  1. Accedemos a nuestro servidor mediante FTP
  2. Buscamos la carpeta wp-content/uploads
  3. Hacemos clic derecho y creamos una carpeta llamada “svg”
  4. Voilá, podremos subir a esta carpeta nuestros archivos

La url de nuestro archivo SVG será: midominio.com/wp-content/uploads/svg/miarchivo.svg. Sustituyendo midominio.com y miarchivo.svg por los respectivos nombres.

Incrustar SVG en WordPress mediante código

Si prefieres añadir los SVG directamente con código no te precipites. De hecho, si intentas incrustarlo en un bloque HTML de Gutenberg comprobarás que desaparecerá. Para hacer esto tendrás que incrustarlo mediante un shortcode. Sigue los siguientes pasos:

Código para incrustar SVG en WordPress

function webheroe_svg_shortcode(){
    $svg = 'El código SVG a incrustar';
    return $svg;
}
add_shortcode("webheroe-svg", "webheroe_svg_shortcode");
  1. Ve a tu functions.php y pega el código anterior
  2. En la página que quieras contar con tu imagen SVG solo tendrás que crear un bloque de shortcode y pegar el siguiente código: [webheroe-svg]

Al incrustar SVG mediante código  en WordPress contamos con varias ventajas. La más destacable es sin duda el mayor control sobre la imagen. De hecho podremos cambiarle el color con la sencilla propiedad CSS “fill”:

.svg{
  fill: green;
}

Aunque si queremos cambiar el color de un archivo SVG tampoco es imposible. Te lo explico más abajo. Otra ventaja a tener en cuenta es la seguridad; según w3.org aún no hay modelo de seguridad definido para el SVG incrustado. Por lo que, de momento, no se ha encontrado ningún agujero de seguridad notable.

Plugins para permitir subir SVG a WordPress

Como ya sabéis soy un total defensor de picar código antes que usar plugins desarrollados por terceros, por los problemas que pueden traer. Si queréis desarrollar un plugin personalizado siempre podéis poneros en contacto con nosotros. Aunque si preferís usar un plugin del directorio de WordPress podéis elegir entre los siguientes:

  1. SVG support: Permite la subida de archivos SVG y restringir su subida al administrador, entre otras funciones
  2. Safe SVG: Otro plugin de WordPress que nos permite subir archivos SVG. Para restringir las subidas a diferentes usuarios tendremos que adquirir el plan premium

Cómo copiar un SVG de otra web en nuestro WordPress

Si hemos visto un archivo SVG del que nos hemos enamorado en otra web existe una sencilla herramienta para poder descargarlo. Se llama SVGOMG y podremos usarla siguiendo estos pasos:

  1. Abrimos la página donde se encuentra el SVG que queremos descargar
  2. Hacemos clic en ctrl+shift+i para abrir los web dev tools
  3. En la esquina superior izquierda debe haber una flechita que, al hacer clic, se pondrá azul
  4. Hacemos clic sobre el archivo de imagen y veremos que en el web dev tool se seleccionará un elemento
  5. Este elemento debería empezar por “<svg “ (si no es así tendremos que buscarlo por esa zona haciendo clic en las flechitas que hay a la izquierda de los elementos de código)
  6. Una vez localizado el elemento SVG haremos clic derecho / copiar/copiar elemento
  7. Abrimos SVGOMG y lo pegamos en “paste markup”
  8. Hacemos clic en el icono de descarga
  9. Epa! ta deberíamos tener nuestro archivo SVG en la carpeta de descargas
Cómo cambiar el color de un archivo SVG mediante CSS

Cómo modificar color de nuestro archivo de imagen SVG

Para modificar el color de un archivo SVG podremos hacerlo, o bien con código CSS o directamente modificando el archivo en un programa compatible con esta extensión de archivos. A continuación te explico cómo hacerlo:

Mediante CSS

Para modificar un archivo de imagen mediante CSS podremos combinar varios filtros de la propiedad “filter”. Para encontrar el color exacto puede llevarnos una vida y media. Pero no nos desanimemos, se ha desarrollado una herramienta que nos podrá convertir colores hexadecimales a la combinación de filtros a usar. Haz clic aquí para descubrirla.

Mediante programa vectorial

Hay muchos programas que nos permiten modificar archivos SVG entre los que tengo que destacar illustrator. Es un programa de la suite de Adobe que nos permitirá trabajar en un buen número de formatos vectoriales.

Si tienes alguna pregunta, sugerencia o simplemente quieres dar tu opinión no lo dudes y deja tu comentario

Aviso Legal

Política de Privacidad

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo