¿Qué es un archivo SVG (y cómo se cargan los SVG en WordPress)?

La razón principal por la que los archivos SVG son especialmente populares entre los desarrolladores y diseñadores es que son un formato de imagen escalable, generalmente más pequeños en tamaño de archivo (a veces bastante) y no se pixelan en las pantallas retina. Sin embargo, WordPress de forma predeterminada no le permite cargar el formato de archivo SVG, principalmente debido a problemas de seguridad.

Hoy vamos a profundizar en qué son los SVG, cómo pueden ser beneficiosos y cómo puede habilitar de forma segura la compatibilidad con WordPress SVG. También discutiremos la compatibilidad con el navegador, así como algunas advertencias si decide cambiar al formato de imagen vectorial.

Con suerte, algún día tendremos SVG como parte del núcleo de WordPress, pero aún no hemos llegado a ese punto.

¿Qué es un archivo SVG?

SVG (Gráficos vectoriales escalables) es una imagen vectorial basada en XML que los sitios web y las marcas suelen utilizar para mostrar logotipos e iconos en sus sitios web. Wikipedia define SVG como:

Un SVG (gráficos vectoriales escalables) 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 puede manipular archivos SVG con código o su editor de texto. Actualmente, los SVG se utilizan en el 33 % de todos los sitios web y, como puede ver a continuación, la tasa de adopción está creciendo rápidamente. Los sitios populares como Google, Reddit, Dropbox, ESPN e incluso nuestro propio sitio web aquí en Kinsta usan SVG.

Compatibilidad con explorador de archivos SVG

Los archivos SVG actualmente son compatibles con todos los principales navegadores, incluidos los navegadores móviles. El único problema con el que se puede encontrar es si aún necesita soporte para IE8, lo cual esperamos que no sea así. IE8 solo tiene alrededor de un 0,36% de participación en el mercado de navegadores y ya no es compatible. Aquí hay un excelente artículo de Lubos sobre por qué los desarrolladores deberían dejar de admitir IE8, IE9 e IE10. Desde una perspectiva empresarial, puede que esto no siempre sea posible, pero menciona algunos puntos positivos. Si por alguna razón desesperada aún necesita compatibilidad con IE8, puede definir una imagen alternativa (PNG o JPG) para sus imágenes SVG, pero no hablaremos de eso hoy. A continuación se muestra una lista de navegadores compatibles:

• Internet Explorer 9, 10, 11+ y Edge
• Firefox 2+
• cromo 4+
• Safari 3.1+
• Ópera 10+
• iOS Safari 3.2+
• Navegador Android 3+
• Firefox para Android 86+
• Ópera Mini (todos)
• Ópera Móvil 12+
• Chrome para Android 89+
• Navegador UC para Android 12.12+
• Samsung Internet 4+
• Navegador QQ 10.4
• Navegador Baidu 7.12
• Navegador KaiOS 2.5

Beneficios de usar archivos SVG

Los archivos SVG son un formato vectorial, lo que significa que son automáticamente escalables tanto en navegadores como en herramientas de edición de fotos. Esto los hace ideales tanto para diseñadores gráficos como web. Normalmente, cuando intenta editar un PNG o JPG en una herramienta como Photoshop, Sketch o Paint, no puede mejorarlos sin pixelación. Con los SVG, puede ampliarlos a una cantidad infinita y se verán perfectos en píxeles (o deberíamos decir perfectos en vectores) cada vez. Es por eso que son un excelente formato de imagen para usar en pantallas retina.

Google indexa los SVG , lo cual es una gran noticia para fines de SEO. El contenido SVG que está vinculado a un archivo en sí mismo se indexará y aparecerá en la búsqueda de imágenes de Google. Puede ver esto de primera mano con las ilustraciones SVG que usamos en Kinsta haciendo una búsqueda avanzada de imágenes. Nota: los SVG en línea, o más bien aquellos compuestos solo de código, normalmente no están indexados.

Los SVG son tradicionalmente (no siempre) más pequeños en tamaño de archivo que los PNG o JPG . Al usar SVG, puede acelerar su sitio de WordPress, ya que reducirá el tamaño total de la página. Genki escribió un excelente artículo en el que compara el tamaño de SVG, PNG y JPEG, y aquí está nuestra comparación de JPG y JPEG. A continuación, se incluyen algunas conclusiones 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 puede ver arriba, el SVG tiene una disminución en el tamaño del archivo del 92,51 % en comparación con el JPG. Y en comparación con PNG, 92,83% . Esas son diferencias de tamaño de archivo bastante impresionantes. Sin embargo, hay una advertencia, ya que probó imágenes más detalladas, los SVG finalmente se volvieron más grandes que los JPG o PNG.

Es por eso que muchos sitios usan SVG para imágenes menos detalladas, como logotipos, íconos, etc., ya que verán una disminución significativa en el tamaño de los archivos. Pero para obtener más imágenes con gran detalle, como tal vez las "imágenes destacadas" de su publicación de blog, es posible que desee seguir con un PNG o JPG, pero aún puede optimizarlas. Muchos sitios web usan un enfoque híbrido, usando ambos tipos de archivos juntos cuando tiene sentido.

Además, es importante tener en cuenta que las redes sociales como Facebook y Twitter no admiten archivos SVG para compartir. Entonces, si usó SVG para sus imágenes destacadas, tendría que utilizar la función Yoast SEO y cargar un PNG o JPG para las etiquetas OG y meta; de lo contrario, podría correr el riesgo de que su imagen destacada no aparezca en absoluto.

Por qué es importante la seguridad de SVG

La razón por la que SVG aún no forma parte del núcleo de WordPress es que hay problemas de seguridad que deben abordarse. Puede seguir la discusión activa sobre SVG en el núcleo de WordPress (#24251) que se inició en 2013. SVG es un archivo XML, que por sí mismo lo abre a diferentes vulnerabilidades que no afectan a los formatos de imagen normales. Estos incluyen ataques de entidad externa XML (XXE), entidades anidadas de bomba y ataques XSS.

Mario Heiderich publicó una presentación detallada sobre los riesgos de seguridad debido a la inyección de contenido activo con archivos SVG. Un ejemplo dado fue que JavaScript estaba incrustado en un SVG y en realidad logró llamar a Mario en Skype. ¡Eso da un poco de miedo! SecuPress, autores de un complemento de seguridad de WordPress, también tocaron el tema de tener cuidado al agregar archivos SVG a WordPress y la importancia de hacerlo de la manera correcta.

Muchos complementos de SVG en el repositorio utilizan el siguiente código, que simplemente habilita el tipo MIME para permitir la carga de SVG en la biblioteca de medios de WordPress. ¡Esta no es la forma segura de hacerlo! Así que no vaya y simplemente descargue el primer complemento SVG gratuito que vea o copie y pegue este código y piense que está listo para comenzar.

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

La solución es que los SVG deben desinfectarse . La sanitización es básicamente la limpieza del código o la 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 la codificación de datos, el filtrado y la validación de cadenas, etc. Aquí es donde entra en juego la biblioteca SVG-Sanitizer de Daryll Doyle, a la que se refiere como "su intento de construir un desinfectante SVG decente en PHP". Echa un vistazo a la demostración de su desinfectante SVG para verlo en acción.

También es importante que considere quién en su sitio tiene acceso para cargar archivos SVG. Por ejemplo, si está en un sitio de varios autores, no tiene idea de qué tipo de SVG podría cargar otra persona, exponiendo su sitio. Se recomienda restringir las cargas de SVG a los administradores y aquellos que entienden algunos de los problemas de seguridad.

Cómo habilitar de forma segura la compatibilidad con SVG de WordPress

Daryll ha desarrollado un complemento, WP SVG (también conocido como Safe SVG), que utiliza la biblioteca SVG-Sanitizer al cargar imágenes SVG en su biblioteca de medios de WordPress. El complemento también le permite ver archivos SVG como imágenes normales en la biblioteca de medios.

Puede descargar Safe SVG de forma gratuita desde el repositorio de WordPress o buscándolo en su panel de control de WordPress en los complementos "Agregar nuevo". Puede levantarse e irse con unos pocos clics.

También hay una versión premium, disponible en wpsvg.com, que le permite restringir que ciertos usuarios carguen archivos SVG y optimización adicional de SVG. En el siguiente ejemplo, simplemente usaremos la versión gratuita.

Como complemento alternativo, es posible que desee consultar la compatibilidad con SVG.

Antes de cargar su archivo SVG, es importante comprender que se comportan de manera ligeramente diferente a las imágenes. Al exportar un SVG desde su herramienta de edición de fotos, querrá exportar el texto como curvas (o crear un contorno); de lo contrario, podría verse ligeramente diferente en varios navegadores.

Después de instalar el complemento, no hay configuraciones, simplemente desinfectará sus SVG al cargarlos. En nuestro sitio de prueba a continuación, puede ver que reemplazamos nuestro logotipo con un archivo SVG, se puede ver como normal en la biblioteca de medios.

Esto también nos permitió usar el panel de control de nuestro tema para cambiar el logotipo en nuestro encabezado de WordPress a nuestro archivo SVG. Puede ver a continuación que, de hecho, está entregando el archivo .svg. Y se ve hermoso ahora en las pantallas de retina.

Hay un ajuste adicional que tuvimos que hacer. En IE9-11 de escritorio y móvil, todavía no escala correctamente los archivos SVG. Agregar alto y ancho soluciona este problema. Esto puede variar según el tema, pero en nuestro sitio de prueba simplemente modificamos nuestro archivo header.php y agregamos estas dimensiones personalizadas. Algunos temas de WordPress usan CSS para modificar la escala, lo que no es bueno por razones de rendimiento, pero debido a eso, es posible que deba agregar código adicional para solucionar el problema de IE.

¡Y eso es! Ahora ha habilitado de forma segura la compatibilidad con WordPress SVG. Este complemento o método no está respaldado ni respaldado por el núcleo de WordPress, por lo que, por supuesto, utilícelo bajo su propio riesgo. Sin embargo, si ya estaba cargando SVG con solo el fragmento de tipo MIME, entonces, por supuesto, hágalo de esta manera.

Además, si nunca antes ha usado SVG, asegúrese de tener GZIP habilitado en su servidor para el tipo de archivo "image/svg+xml". Esto asegurará que estén comprimidos y se carguen lo más rápido posible. A veces, los administradores de sistemas solo habilitan los tipos de archivos más estándar. Nota: GZIP ya está habilitado en todos los servidores Kinsta para SVG.

Resumen

¡Los SVG son una excelente manera de mejorar el aspecto de su sitio! Recomendamos utilizar SVG, PNG y JPG juntos para lograr el mejor rendimiento, ya que las imágenes muy detalladas no funcionarán tan bien en formato SVG. Los SVG son excelentes para su logotipo, ya que garantizan que se vea con píxeles perfectos en todas las pantallas, junto con los íconos.

¿Cuáles son tus pensamientos? ¿Ya has usado SVG en tu sitio de WordPress?