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:

Resulta que los ficheros 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, usar imágenes SVG tienen sus ventajas:

  • El tama├▒o de los ficheros es muy peque├▒o: unos pocos KB.
  • 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.

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
.