La principal razón por la que los archivos SVG 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 un Archivo SVG ?

SVG (Scalable Vector Graphics) es una imagen vectorial basada en XML que suelen utilizar los sitios web y las marcas para mostrar logotipos e iconos en sus páginas web. Wikipedia define SVG como:

Un SVG (scalable vector graphics) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.

Incluso puedes manipular los archivos SVG con código o con tu editor de texto. Los SVG son utilizados actualmente por el 33% de todos los sitios web y, como puedes 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 de Kinsta utiliza SVGs.

Estadísticas de uso de SVG Abril 2020 - Abril 2021

Estadísticas de uso de SVG Abril 2020 – Abril 2021

Compatibilidad con el navegador de archivos SVG

Los archivos SVG son actualmente compatibles con todos los principales navegadores, incluidos los de los 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 un 0,36% de cuota de mercado de navegadores y ya no tiene soporte. 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 necesitas el soporte de IE8, podrías definir una imagen de respaldo (PNG o JPG) para tus imágenes SVG, pero no vamos a entrar en eso hoy. A continuación, se muestra una lista de navegadores compatibles:

Soporte para el navegador de archivos SVG

Soporte para el navegador de archivos SVG

Beneficios del uso de archivos SVG

Los archivos SVG son 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. Puedes comprobarlo de primera mano con las ilustraciones SVG que utilizamos en Kinsta haciendo una búsqueda avanzada de imágenes. Nota: Los SVG inline, o mejor dicho, los compuestos solo por código, no suelen ser indexados.

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 y aquí está nuestra comparación JPG 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.

Tenemos GZIP habilitado en todos nuestros servidores para que estén preparados para manejar tus SVG. Prueba Kinsta de forma gratuita.

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 pero aún se puede optimizarlas. 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 usas SVGs para tus imágenes destacadas, tendrías que utilizar la función Yoast SEO y subir un PNG o JPG para el OG y meta tags, de lo contrario podrías arriesgarte a que tu imagen destacada no se muestre en absoluto.

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

WordPress SVG Plugin

WordPress SVG Plugin

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. El plugin funcionará perfectamente después de unos clics.

Info

Este plugin no ha recibido ninguna actualización reciente, así que asegúrate de probarlo en un sitio de prueba o staging antes de instalarlo en tu sitio de producción.

También hay una versión premium, disponible en wpsvg.com, que te permite restringir a determinados usuarios la subida de SVGs y la optimización adicional de los mismos. En el ejemplo siguiente, vamos a utilizar simplemente la versión gratuita.

Como plugin alternativo, puedes consultar el Soporte SVG.

Tenemos GZIP habilitado en todos nuestros servidores para que estén preparados para manejar tus SVG. Prueba Kinsta de forma gratuita.

Antes de cargar su archivo 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?


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 28 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.