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.
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:
- Internet Explorer 9, 10, 11+ and Edge
- Firefox 2+
- Chrome 4+
- Safari 3.1+
- Opera 10+
- iOS Safari 3.2+
- Android Browser 3+
- Firefox for Android 86+
- Opera Mini (todos)
- Opera Mobile 12+
- Chrome for Android 89+
- UC Browser for Android 12.12+
- Samsung Internet 4+
- QQ Browser 10.4
- Baidu Browser 7.12
- KaiOS Browser 2.5
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)
PNG (tamaño optimizado: 85.1 KB)
SVG (tamaño optimizado: 6.1 KB)
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 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.
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. El plugin funcionará perfectamente después de unos clics.
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.
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.
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.
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.
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.
¡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?
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Excelente artículo y buen aporte a la comunidad. Saludos desde Ecuador.
Gracias JoAn por tus amables palabras! Te invito seguir nuestro blog por más tutoriales y novedades!
Un saludo,
Peter
Excelente explicación, yo no domino el tema mucho pero está tan claro que estoy segura que puedo hacerlo. Muchas gracias!!!!!