Prueba de la compatibilidad con SVG en los motores de navegador web [Caso de estudio]
SVG (gráficos vectoriales escalables) es oficialmente compatible con todos los navegadores web principales, incluido Internet Explorer. El soporte se extiende a una amplia variedad de software de edición de imágenes, particularmente Inkscape, que utiliza SVG como su formato nativo (si desea una actualización de SVG, haga clic aquí).
Pero, ¿qué es exactamente compatible con los navegadores web? ¿Todos los motores de renderizado muestran los archivos SVG y sus características de la misma manera? ¿Y qué hay de sus características avanzadas como filtros? Pues eso es lo que vamos a descubrir. Tomamos una muestra de navegadores modernos, incluidos algunos de los menos conocidos, y Los probé con un archivo SVG hecho para este propósito..
La imagen de prueba
Preparamos nuestra imagen de prueba centrándonos en los elementos que los artistas probablemente usarán. Entre las características probadas se encuentran: rutas de texto y sus interacciones, gradientes, filtro de desenfoque gaussiano y, finalmente, un filtro compuesto avanzado apilado de más tipos de filtro.
Motores de navegador web
Motor de parpadeo
Comenzamos con, con mucho, el motor de renderizado más frecuente, Blink. Blink es el motor nativo de los navegadores Chrome y Chromium de Google, Opera y Android WebView. Todos los navegadores mencionados anteriormente representan imágenes de prueba de la misma manera en las plataformas probadas.
Cuando se compara con la imagen original producida por Inkscape, no hubo problemas, excepto una ligera diferencia en la representación de los efectos de filtro apilados.
| Navegador | Versión | Plataforma | Resultado |
| Cromo | 43.0.2357.125 | Linux |  |
| Ópera | 30.0.1835.59 | Linux | |
| Ópera | 30.0.1856.93524 | Androide | |
| Ópera | 30.0.1835.88 | Windows | |
| Cromo | 38.0.2125.114 | Androide | |
| Cromo | 43.0.2357.130 | Windows | |
| Antorcha | 39.0.0.9626 | Windows |
Motor de webkit
Según las estadísticas de uso recientes del navegador, las tres primeras posiciones no pertenecen a los navegadores basados en webkit (a partir de mayo de 2015). Sin embargo, este motor está muy extendido entre los desarrolladores. Futhermore hay varias implementaciones y forks de ello.
Todos los navegadores probados renderizaron nuestro archivo SVG sin problemas; sin embargo, se observaron diferencias en la representación de Specular Lighting, un componente de filtro compuesto, en comparación con Inkscape.
| Navegador | Versión | Plataforma | Resultado |
| Safari | 8.0.6 | Mac OS |  |
| Nutria | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Delfín | 10.3.1 | Androide | |
| Konqueror | 15.04.2 | Linux | |
| navegador de la UC | 10.5.0.575 | Androide |
Motor tridente
Trident es un motor propietario utilizado por Internet Explorer versiones 4.0 - 11.0. IE interpretó nuestro SVG perfectamente. Por otra parte, la apariencia del filtro compuesto coincide con la imagen original mejor. También probamos IE 9, el segundo IE más usado (en mayo de 2015) y encontramos que esta versión tenía problemas con el desenfoque gaussiano y el filtro compuesto.
Sin embargo, esto no es una sorpresa, ya que IE 9 se lanzó inicialmente antes del borrador final del estándar SVG 1.1 SE, en el que se agregaron oficialmente los efectos de filtro.
| Navegador | Versión | Plataforma | Resultado |
| ES DECIR | 11.0.9600.17843 | Windows |  |
| Navegador | Versión | Plataforma | Resultado |
| ES DECIR | 9.0.8112.16421 | Windows |  |
Motor gecko
Gecko es un motor desarrollado por Mozilla Corporation y, por lo tanto, se utiliza en el navegador web Firefox o en el cliente de correo electrónico Thunderbird. También es utilizado por los navegadores PaleMoon, Waterfox y muchas otras opciones de versiones anteriores de Firefox. En el caso del motor Gecko, los resultados no fueron exactamente iguales en las diferentes plataformas.
La versión de Windows mostró una pequeña falla al renderizar el texto a lo largo de la ruta; El mismo problema se observó en los navegadores Firefox y PaleMoon. Al igual que con Webkit, Gecko parece tener problemas con la reproducción correcta del filtro de iluminación especular primitivo.
| Navegador | Versión | Plataforma | Resultado |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Androide | |
| Luna pálida | 25.5 | Androide |
| Navegador | Versión | Plataforma | Resultado |
| Firefox | 38.0.5 | Windows |  |
| Luna pálida | 25.5 | Windows |
Navegadores problematicos
Como se puede ver arriba, todas las versiones recientes de los principales motores / navegadores de renderización han pasado nuestra prueba sin dificultades significativas. Echemos un vistazo a los que no lo hicieron tan bien.
Maxthon es un navegador multiplataforma desarrollado en China. Según los 20 navegadores web alternativos de Fahad Khan para Windows, Maxthon usa los motores Trident y Webkit. No hemos notado ningún problema con la representación SVG en Linux (v. 1.0.5.3) y Windows (v. 4.4.5.3000); sin embargo, en un dispositivo Android, no se representaron ni el desenfoque gaussiano ni otras primitivas de filtro.
Navegador CM se realizó rápidamente en nuestro dispositivo Samsung galaxy S3 de prueba, pero tampoco es compatible con ninguno de los efectos de filtro descritos por la especificación SVG 1.1 SE.
| Navegador | Versión | Plataforma | Resultado |
| Maxthon | 4.4.6.2000 | Androide |  |
| Navegador CM | 5.1.94 | Androide |
Konqueror es un navegador predeterminado para KDE, uno de los entornos de escritorio Linux más populares. La capacidad de renderizar archivos SVG en Konqueror depende del motor de renderizado. Con WebKit habilitado, nuestras pruebas SVG se procesaron correctamente. Sin embargo, el motor de representación predeterminado de Konqueror, KHTML, parece carecer de compatibilidad con varias características: los efectos de filtro no se aplican a los objetos subyacentes y los marcadores de fin de trazo, y el texto a lo largo de la ruta o los objetos de patrón no se representan en absoluto.
| Navegador | Versión | Plataforma | Resultado |
| Konqueror KHTML | 15.04.2 | Linux |  |
Conclusión
En nuestra prueba nos centramos en la compatibilidad con el formato SVG en los modernos motores de representación web. Probamos 4 motores de renderización principales y 15 navegadores diferentes, incluidos los populares como Maxthon o Dolphin. Casi todas las versiones actuales de los navegadores pasaron por nuestra prueba y es difícil seleccionar un ganador definitivo.
Parece que apoyo y Apilamiento correcto de primitivas de filtro Es el último desafío restante para los motores de renderización actuales. Cuando comparamos nuestra imagen SVG original con todos los resultados presentados, nominamos subjetivamente el IE 11 (motor Trident) para el primer lugar.
Sin embargo, está claro que el motor de Blink está muy cerca y, por lo tanto, recomendamos los navegadores basados en Blink para representar archivos SVG. Si desea realizar una prueba rápida de su navegador favorito, no dude en utilizar nuestra página de prueba del renderizador SVG aquí.
Nota del editor: Esta publicación está escrita para Hongkiat.com por Michal Rost. Michal trabaja como programador en una compañía biomédica, pero dedica su tiempo libre al desarrollo de aplicaciones de código abierto y portales web sin fines de lucro. Es el fundador de scalablegfx. Lo puedes encontrar en Twitter..
