Cómo Habilitar Soporte de WordPress SVG de Manera Segura

Por , Actualizado: junio 26, 2017
Traducido por Peter Kovacs

SVG es una imagen vectorial en formato XML que es comúnmente utilizada por sitios web y marcas para mostrar logos e iconos en sus sitios web. La principal razón por la que son especialmente populares entre los desarrolladores y diseñadores es porque es un formato de imagen redimensionable, generalmente menor en tamaño de archivo (a veces por un poco), y no pixelan en las pantallas retina. WordPress por defecto, no le permite cargar el formato de archivo SVG, principalmente debido a las preocupaciones de seguridad. Hoy vamos a sumergirnos en una forma de habilitar de manera segura el soporte de WordPress SVG, discutir el soporte del navegador, así como algunas advertencias si decide cambiar al formato de imagen vectorial.

Con un poco de suerte un día vamos a tener SVG como parte de WordPress core, pero todavía no llegamos ahí.

¿Qué es SVG?

De acuerdo con Wikipedia, un SVG es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. Incluso puede manipularlos con código o con su editor de texto. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium desde 1999. Los SVGs son actualmente utilizados sólo por 3.4% de todos los sitios web, pero como se puede ver a continuación, la tasa de adopción está creciendo rápidamente. Sitios populares como Google, Reddit, Dropbox, ESPN, e incluso nuestro propio sitio web aquí en Kinsta usan SVGs.

Estadística del uso de SVG

Estadística del uso de SVG entre 01.04.16 y 01.04.17.

Soporte de SVG por Navegadores

SVGs son actualmente compatibles con todos los principales navegadores y navegadores móviles. El único problema que puede encontrar es si aún necesita soporte para IE8, que esperamos que no sea el caso. IE8 sólo tiene alrededor de una cuota de mercado de 0.36% y ya no es compatible. Aquí está un artículo magnífico de Lubos sobre por qué los desarrolladores deberían dejar de ser compatibles con IE8, IE9, y IE10. Desde una perspectiva empresarial, esto no siempre es posible, pero trae algunos puntos positivos. Si por alguna razón desesperada todavía necesita el apoyo de IE8, podría definir una imagen de respaldo (PNG o JPG) para sus SVGs, pero no vamos a entrar en eso hoy. A continuación, se muestra una lista de navegadores compatibles:

  • Internet Explorer 9, 10, 11+ and Edge
  • Firefox 3+
  • Chrome 4+
  • Safari 3.2+
  • Opera 10+
  • iOS Safari 3.2+
  • Opera Mini (todos)
  • Android Browser 4.4+
Soporte de SVG por Navegadores
Soporte de SVG por Navegadores

Beneficios de SVGs

SVG es un formato vectorial, lo que significa que son automáticamente escalables tanto en los navegadores como en las herramientas de edición de fotografías. Esto los hace convenientes para ambos los diseñadores gráficos y de web también. Normalmente, cuando intenta editar un PNG o JPG en una herramienta como Photoshop o Paint, no puede redimensionar las imágenes sin pixelación. Con SVGs, puede redimensionarlas a una cantidad infinita y se verán de manera píxel perfecta (o debemos decir vector perfecto) cada vez. Esta es la razón por la cual es un formato de imagen genial para usar en las pantallas retina.

Google indexa SVGs, que es una gran noticia por fines de SEO. El contenido SVG, ya sea en un archivo independiente o embebido directamente en HTML, se indexa y aparecerá en la búsqueda de imágenes de Google.

SVGs son tradicionalmente (no siempre) menores en tamaño de archivo que PNGs o JPGs. Mediante el uso de SVGs, en realidad puede acelerar su sitio WordPress ya que disminuye el tamaño general de la página. Genki escribió un gran artículo donde compara el tamaño de SVG vs PNG vs JPEG. A continuación presentamos algunas sugerencias de sus pruebas en las que comparó los tres tipos de imágenes diferentes.

JPG (tamaño optimizado: 81.4 KB)

Tamaño de JPG
Imagen de JPG

PNG (tamaño optimizado: 85.1 KB)

Imagen PNG
Imagen PNG

SVG (tamaño optimizado: 6.1 KB) 

Imagen SVG
Imagen SVG

Como se puede ver arriba, el SVG tiene un tamaño de archivo menor en un 92.51% cuando se compara con el JPG. Y en comparación con PNG en un 92.83%. Esas son diferencias de tamaño de archivo bastante impresionantes. Sin embargo, hay una advertencia, ya que Genki probó imágenes más detalladas y los SVGs eventualmente llegaron a ser mayores en tamaño que el JPG o PNG.

Es por eso que muchos sitios usan SVGs para imágenes menos detalladas como logotipos, iconos, etc., ya que verán una disminución significativa en el tamaño de los archivos. Pero para más imágenes con gran detalle, como tal vez su blog “imágenes destacadas”, es posible que desee seguir con un PNG o JPG. Muchos sitios web utilizan un enfoque híbrido, utilizando ambos tipos de archivos juntos donde tiene sentido.

Además, es importante tener en cuenta que las redes sociales como Facebook y Twitter no admiten SVG para compartir. Así que si usa SVGs para sus imágenes destacadas, tendría que utilizar la función Yoast SEO y subir un PNG o JPG para el OG y meta tags.

¿Por Qué la Seguridad de SVG Es Importante?

La razón por la que SVG no es parte de WordPress core todavía es que hay preocupaciones de seguridad que deben abordarse. Puede seguir la discusión activa sobre SVGs en WordPress core (#24251) que se inició en 2013. SVG es un archivo XML, que por sí mismo es abierto a vulnerabilidades mientras que los formatos de imagen normales no se ven afectados. Éstas incluyen ataques de entidades externas XML (XXE), y ataques XSS.

Mario Heiderich Publicó una presentación detallada sobre los riesgos de seguridad inyección de contenido activo con archivos SVG . Un ejemplo dado fue que JavaScript estaba embebido en un SVG y realmente logró llamar a Mario en Skype. ¡Eso da un poco de miedo! SecuPress, autores de un plugin de seguridad de WordPress, también abordaron el tema de tener cuidado al añadir SVGs a WordPress, y la importancia de hacerlo de la manera correcta.

Muchos SVG plugins en el repositorio utilizan el código siguiente, que simplemente permite que el tipo MIME permita la carga de SVG en la biblioteca de medios de WordPress. ¡Esta no es la manera segura de hacer esto! Así que no simplemente vaya y descargue el primer plugin gratis SVG que vea ni copie y pegue este código y piense que ya quedó todo listo.

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

La solución es que SVGs necesitan ser desinfectados. La sanitización es básicamente la limpieza de código o entrada para evitar problemas de seguridad (como la inyección de código), conflictos de código y errores. Esto podría implicar cosas como codificar datos, filtrar y validar cadenas, etc. Aquí es donde la librería SVG-Sanitizer de Daryll Doyle entra en juego, a la que se refiere como “su intento de construir un desinfectante de  SVG decente en PHP”. Vea el demo de este desinfectante de SVG para verlo en acción.

Desinfectante de SVG

Desinfectante de SVG

También es importante que considere quién en su sitio tiene acceso para cargar SVGs. Por ejemplo, si está en un sitio con varios autores, no tiene idea de qué tipo de SVG alguien más puede cargar, exponiendo su sitio. Restringiendo descargas SVG a administradores y los que entienden algunas de las preocupaciones de seguridad es aconsejable.

¿Cómo Habilitar Soporte de WordPress SVG de Manera Segura?

Daryll ha desarrollado un plugin, WP SVG (también conocido como Safe SVG), que utiliza la librería de SVG-Sanitizer al subir imágenes SVG a su biblioteca de medios de WordPress. El plugin también le permite ver SVGs como imágenes normales en la biblioteca de medios. Usted puede descargar Safe SVG de forma gratuita desde el repositorio de WordPress o buscarlo en el panel de WordPress bajo “Añadir nuevos” plugins.

WordPress SVG Plugin

WordPress SVG Plugin

También tiene una versión premium, ubicada en wpsvg.com, que le permite restringir ciertos usuarios de cargar SVGs y la optimización SVG adicional. En este ejemplo a continuación, vamos a utilizar simplemente la versión gratuita.

Antes de cargar su SVG, es importante entender que se comportan de forma ligeramente diferente que las imágenes. Al exportar un SVG desde su herramienta de edición de fotos, querrá exportar el texto como curvas (o crear un esquema), de lo contrario, puede ser un poco diferente en varios navegadores.

Exportar textos como curvas
Exportar textos como curvas

Después de instalar el plugin, no hay ajustes, simplemente desinfectará sus SVGs al subir. En nuestro sitio de prueba a continuación puede ver que reemplazamos nuestro logotipo con un archivo SVG, es visible como normal en la biblioteca de medios.

SVG en biblioteca multimedia

SVG en biblioteca multimedia

Esto también nos permitió utilizar el panel de control de nuestro tema para cambiar el logotipo en nuestra cabecera de WordPress a nuestro archivo SVG. Usted puede ver a continuación que de hecho está sirviendo el archivo .svg. Y se ve hermoso ahora en las pantallas de retina.

Cabecera de SVG en WordPress

Cabecera de SVG en WordPress

Hay un tweak adicional que tuvimos que hacer. En IE9-11, los archivos de escritorio y móviles no redimensionan correctamente los archivos SVG. El añadir altura y anchura corrige este problema. Esto puede variar según el tema, pero en nuestro sitio de prueba simplemente modificamos nuestro archivo header.php y añadimos estas dimensiones personalizadas. Algunos temas de WordPress utilizan CSS para modificar la escala, lo cual no es recomendable por razones de rendimiento, pero debido a que puede requerir que agregue código adicional para solucionar el problema de IE.

Cabecera modificada para SVG

Cabecera modificada para SVG

¡Y eso es todo! Ahora ha habilitado con seguridad la compatibilidad con WordPress SVG. Este plugin y/o el método no está respaldado o soportado por WordPress core, por lo que, por supuesto, use bajo su propio riesgo. Sin embargo, si ya está cargando archivos SVG con sólo el fragmento de tipo MIME, entonces, por favor, hágalo de esta manera.

Además, si nunca ha utilizado SVG antes, asegúrese de tener habilitado GZIP en su servidor para el tipo de archivo “image/svg + xml”. Esto asegurará que se comprimen y se cargarán lo más rápido posible. A veces, los administradores de sistema solo habilitan los tipos de archivo más estándar. Nota: GZIP está habilitado en todos los servidores Kinsta ya para SVGs.

Resumen

¡SVG es una manera útil para mejorar la apariencia de su sitio! Recomendamos utilizar SVGs, PNG y JPGs juntos para lograr el mejor rendimiento, ya que las imágenes muy detalladas no funcionarán tan bien en formato SVG. Los WordPress SVGs son ideales para su logotipo, para garantizar que se vea perfecto en todas las pantallas, junto con los iconos. ¿Qué piensa? ¿Ya ha utilizado SVG en su sitio WordPress?