Cómo subir SVG a WordPress (al detalle)

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.

Lo que sí te puedo decir desde ya, es que si sabes cómo contratar un diseño web en WordPress (que también tiene su ciencia), solicitar esta funcionalidad es casi una obligación.

Qué es un archivo 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.

Entonces ¿cómo están hechos los archivos SVG?

Los archivos SVG están formados por gráficos vectoriales. Es decir, a diferencia de otros formatos como JPEG o PNG, los archivos SVG no son mapas de bits, o sea, no están compuestos por píxeles.

Los gráficos vectoriales están formados por fórmulas matemáticas que representan puntos y líneas por coordenadas. Es por esto que una imagen vectorial puede escalarse a cualquier tamaño sin pérdida de calidad.

¿WordPress admite archivos SVG de forma nativa?

No, WordPress no admite estos archivos. Para permitirlo tendremos que, o instalar un plugin, o añadir un código como se explica más abajo.

WordPress tiene sus ventajas y desventajas, y el hecho de que no se admitan SVG de forma nativa también tiene sus pros y contras.

Qué riesgos hay permitir SVG en 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.

Qué ventajas hay al subir archivos 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
  3. Soportan estilos CSS
  4. Estos archivos pueden incluso incluir animaciones
  5. Son totalmente responsive: Permiten el uso de unidades relativas sin perdida de calidad ni mayor consumo de recursos y sin necesidad de usar atributos HTML especiales como srcset
Compatibilidad de archivos SVG con navegadores web
Imagen extraída de caniuse.com

¿Los archivos SVG son compatibles con todos los navegadores?

En la imagen de más arriba podéis ver la compatibilidad de SVG en línea con los navegadores web. Aunque algunos navegadores muy obsoletos no soportan algunos formatos de SVG, la inmensa mayoría tienen total compatibilidad.

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 en línea

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 instalar 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.

En WebHeroe también ofrecemos desarrollo de plugins para tu proyecto. Consúltanos.

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com