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

La razón principal por la cual los archivos SVG son particularmente populares entre los desarrolladores y diseñadores es que son un formato de imagen escalable, generalmente de menor tamaño (a veces bastante) y no son pixel en pantallas de retina. Sin embargo, los valores predeterminados de WordPress no le permiten cargar el formato de archivo SVG, principalmente debido a problemas de seguridad.
Hoy analizaremos cuáles son los SVG, cómo pueden ser beneficiosos y cómo puede activar de manera segura el soporte SVG para WordPress. También discutiremos el soporte del navegador, así como algunas advertencias si decide que desea pasar al formato de imagen vectorial.
Esperamos que algún día tengamos SVG como parte del núcleo de WordPress, pero aún no hemos llegado allí.
¿Qué es un archivo SVG? SVG (Scalable Vector Graphics) es una imagen vectorial basada en XML, que es comúnmente utilizado por sitios web y marcas para mostrar logotipos e iconos en sus sitios web. Wikipedia define SVG CA: un SVG (gráficos de vector escalables) es una imagen vectorial basada en XML para gráficos dos dimensionales con interactividad y soporte de animación. La especificación SVG es un estándar abierto desarrollado por el Consorcio World Wide Web (W3C) desde 1999. Incluso puede manejar archivos SVG o editor de texto. El 33% de todos los sitios web utilizan los SVG y, como puede ver a continuación, la tasa de adopción aumenta rápidamente. Sitios populares como Google, Reddit, Dropbox, ESPN e incluso nuestro propio sitio aquí en Kinsta usan SVG.

Estadísticas de usuario SV Abril 2020 – Abril 2021 Los archivos SVG del navegador SVG son actualmente aceptados por todos los navegadores principales, incluidos los navegadores móviles. El único problema que podría encontrar es si necesita apoyo para IE8, que esperamos que no tenga. IE8 tiene solo una cuota de mercado del navegador de aproximadamente 0.36% y ya no es aceptada. Aquí hay un gran artículo de Lubos sobre por qué los desarrolladores no deberían aceptar IE8, IE9 e IE10. Desde la perspectiva de los negocios, esto no siempre es posible, pero trae algunos buenos puntos. Si por una razón desesperada necesita soporte IE8, puede definir una imagen alternativa (PNG o JPG) para sus imágenes SVG, pero no nos abordaremos hoy. A continuación se muestra una lista de navegadores aceptados: Internet Explorer 9, 10, 11+ y Edge
Firefox 2+
Chrome 4+
Safari 3.1+
Ópera 10+
iOS safari 3.2+
Android 3+ navegador
Firefox para Android 86+
Ópera mini (todos)
Mobile Opera 12+
Chrome para Android 89+
Navegador UC para Android 12.12+
Samsung Internet 4+
Navegador QQ 10.4
Baidu Browser 7.12
Kaios 2.5 navegador
Soporte de navegador SVG Los beneficios de usar archivos SVG Los archivos SVG están en formato vectorial, lo que significa que son escalables automáticamente tanto en navegadores como en herramientas de edición de fotos. Esto los hace excelentes para diseñadores gráficos y web. Normalmente, cuando intenta editar un PNG o JPG en un instrumento como Photoshop, Sketch o Paint, no puede ampliarlos sin Pixel. Con los SVG, puede aumentarlos a una cantidad infinita y se verán perfectamente píxeles (o deberíamos decir Vector perfecto) cada vez. Esta es la razón por la cual son un gran formato de imagen para usar para las pantallas de retina. Logogle indexa SVGS, que es una excelente noticia para fines de SEO. El contenido de SVG que está vinculado a un archivo en sí se indexará y aparecerá en busca de imágenes de Google. Puede ver esto desde la primera mano con las ilustraciones SVG que usamos en Kinsta, haciendo una búsqueda de imágenes avanzada. Nota: los SVG en línea, o más bien los compuestos solo del código, generalmente no están indexados. Los SVG son tradicionalmente (no siempre) más pequeños en el tamaño del archivo que los PNG o los JPG. Con SVGS, puede acelerar su sitio web de WordPress, ya que reducirá el tamaño general de la página. Genki ha escrito un gran artículo en el que se compara el tamaño SVG vs PNG vs JPEG y aquí está nuestra comparación JPG vs JPEG. A continuación se presentan algunas conclusiones de sus pruebas en las que comparó los tres tipos diferentes de imágenes.

Regístrese para el boletín
¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%? ¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress!
Suscríbase a NowJPG (tamaño optimizado: 81.4 KB)
Imagen JPG PNG (tamaño optimizado: 85.1 kb)
Imagen PNG SVG (tamaño optimizado: 6.1 kb)
Imagen SVG Como puede ver arriba, SVG es una disminución en el tamaño del archivo en un 92.51% en comparación con JPG. Y en comparación con PNG, 92.83%. Estas son diferencias en el tamaño de los archivos bastante impresionantes. Sin embargo, hay una advertencia, porque ha probado imágenes más detalladas, los SVG eventualmente se han vuelto más grandes que el tamaño que JPG o PNG.

Tenemos GZIP activado en todos nuestros servidores para que estén listos para administrar su SVGS, pruebe Kinsta de forma gratuita.

Es por eso que muchos sitios usan SVG para imágenes menos detalladas, como logotipos, iconos, etc., porque notarán una disminución significativa en las dimensiones del archivo. Pero para más imágenes con detalles especiales, como, tal vez, la publicación del blog “Imágenes presentadas”, es posible que desee quedarse con un PNG o JPG, pero puede continuar optimizándolos. Muchos sitios web utilizan un enfoque híbrido utilizando ambos tipos de archivos juntos donde tiene sentido.

También es importante tener en cuenta que las redes sociales como Facebook y Twitter no aceptan SVG para compartir. Entonces, si usó SVGS para sus imágenes presentadas, debe usar la función Yoast SEO y cargar un PNG o JPG para el OG y las meta etiquetas, de lo contrario podría arriesgarse a que la imagen presentada no aparezca en absoluto. Por qué la seguridad de SVG es importante por qué SVG aún no es parte del núcleo de WordPress es que hay problemas de seguridad a abordar. Puede seguir la discusión activa sobre SVG en el núcleo de WordPress (#24251) que comenzó en 2013. SVG es un archivo XML, que lo abre a diferentes vulnerabilidades cuyos formatos de imagen normales no se ven afectados. Estos incluyen ataques XML de entidades externas (XXE), entidades anidadas con bombas y XS. Un ejemplo fue que JavaScript se incorporó a un SVG y realmente logró llamar a Mario por Skype. ¡Ella da un poco de miedo! Secupress, los autores de un complemento de seguridad de WordPress, también abordaron el tema de atención al agregar SVGS a WordPress y la importancia de hacerlo correctamente. Muchos complementos SVG en el almacén usan el siguiente código, que simplemente permite que el tipo MIME permita la carga de SVG en la biblioteca de medios de WordPress. ¡Esta no es la forma segura de hacer esto! Así que no vaya y descargue el primer complemento SVG Plugin que ve o copia y pegue este código y cree que está listo.
función cc_mime_types ($ mimes) {$ mimes [‘svg’] = ‘image/svg+xml’; devolver $ mimes; } add_filter (‘upload_mimes’, ‘cc_mime_types’); La solución es que los SVG deben ser desinfectados. La higiene está prácticamente limpiando el código o la entrada para evitar problemas de seguridad (como inyección de código), conflictos y errores de código. Esto podría implicar cosas como codificación de datos, filtración y validación de cadenas de caracteres, etc. Aquí viene la biblioteca SVG-Sanitizer de Daryll Doyle, a quien él llama “su intento de construir un desinfectante de SVG decente”. Vea la demostración de su desinfectante de SVG para verlo en acción. Desinfectando SVG de demostración, es importante considerar quién de su sitio tiene acceso para cargar SVG. Por ejemplo, si está en un sitio con varios autores, no tiene idea de qué tipo de SVG podría cobrar a otra persona, exponiendo su sitio. Es aconsejable restringir los cargos de SVG a los administradores y aquellos que entienden algunos de los problemas de seguridad. Cómo activar de manera segura la asistencia SVG para WordPress Daryll ha desarrollado un complemento, WP SVG (también conocido como SAFE SVG), que utiliza la biblioteca SVG-Sanitizer para cargar imágenes SVG en su WordPress de medios. Plugin también le permite ver SVG como imágenes normales en la biblioteca de medios.
Plugin WP SVG Puede descargar SVG SVG gratuito desde WordPress Warehouse o buscarlo en el tablero de WordPress en “Agregar nuevos” complementos. Puede levantarse e ir con algunos clics simples. Información Este complemento no ha recibido actualizaciones recientes, así que asegúrese de probarlo en un sitio de prueba antes de instalarlo en su sitio de producción. También hay una versión premium, disponible en wpsvg.com, que le permite restringir a ciertos usuarios de la carga SVG y la optimización adicional de SVG. En el siguiente ejemplo, simplemente usaremos la versión gratuita. Como complemento alternativo, es posible que desee verificar la asistencia de SVG. Hemos activado GZIP en todos nuestros servidores, por lo que están listos para administrar su SVGS Try Kinsta de forma gratuita.

Antes de cargar el archivo SVG, es importante comprender que se comportan de manera ligeramente diferente de las imágenes. Cuando exporta un SVG de su herramienta de edición de fotos, querrá exportar el texto como curvas (o crear un contorno), de lo contrario, puede ser ligeramente diferente en diferentes navegadores.
Affinity Designer-Export El texto como curvas SVG Después de instalar el complemento, no hay configuración, simplemente desinfectará sus SVG. En nuestro sitio de prueba a continuación, puede ver que hemos reemplazado el logotipo con un archivo SVG, se puede ver como de costumbre en la biblioteca de medios.
SVG en la biblioteca de medios de WordPress esto luego nos permitió usar el panel de control para cambiar el logotipo de WordPress a nuestro archivo SVG. Puede ver a continuación que el archivo .svg se transmite realmente. Y ahora se ve bien en las pantallas de retina.

SVG En el encabezado de WordPress necesitamos hacer un cambio adicional.En IE9-11, el escritorio y el móvil aún no escalan los archivos SVG.Agregar altura y ancho resuelve este problema.Esto puede variar según el tema, pero en nuestro sitio de prueba simplemente modificamos el archivo Header.php y agregamos estas dimensiones personalizadas.Algunos temas de WordPress usan CSS para cambiar la escala, lo cual no es bueno por razones de rendimiento, pero por esta razón es posible que deba agregar código adicional para remediar el problema.