Test de la prise en charge SVG sur les moteurs de navigateur Web [Étude de cas]
SVG (Scalable Vector Graphics) est officiellement pris en charge par tous les principaux navigateurs Web, y compris Internet Explorer. Le support englobe une grande variété de logiciels d'édition d'images, en particulier Inkscape, qui utilise SVG comme format natif (si vous souhaitez un rafraîchissement sur SVG, cliquez ici)..
Mais qu'est-ce qui est supporté par les navigateurs Web? Tous les moteurs de rendu affichent-ils les fichiers SVG et leurs fonctionnalités de la même manière? Et que dire de leurs fonctionnalités avancées telles que les filtres? Eh bien c'est ce que nous allons découvrir. Nous avons pris un échantillon de navigateurs modernes, y compris des navigateurs moins connus, et testé avec un fichier SVG créé à cet effet.
L'image de test
Nous avons préparé notre image de test en nous concentrant sur les éléments les plus susceptibles d’être utilisés par les artistes. Parmi les fonctionnalités testées figurent: les chemins de texte et leurs interactions, les dégradés, le filtre de flou gaussien et enfin un filtre composite avancé empilé à partir de plusieurs types de filtres..
Moteurs de navigateur Web
Moteur clignotant
Nous avons commencé avec - de loin le moteur de rendu le plus fréquent - Blink. Blink est le moteur natif des navigateurs Google Chrome, Chrome, Opera et Android WebView. Tous les navigateurs mentionnés ci-dessus permettent de tester les images de la même manière sur les plates-formes testées..
Par rapport à l'image originale produite par Inkscape, aucun problème ne s'est produit, à l'exception d'une légère différence dans le rendu des effets de filtres empilés..
| Navigateur | Version | Plate-forme | Résultat |
| Chrome | 43.0.2357.125 | Linux |  |
| Opéra | 30.0.1835.59 | Linux | |
| Opéra | 30.0.1856.93524 | Android | |
| Opéra | 30.0.1835.88 | les fenêtres | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43.0.2357.130 | les fenêtres | |
| Torche | 39.0.0.9626 | les fenêtres |
Moteur de kit Web
Selon les statistiques les plus récentes sur l'utilisation du navigateur, les trois premières positions n'appartiennent pas aux navigateurs Webkit (en date de mai 2015). Cependant, ce moteur est répandu parmi les développeurs. De plus, il existe diverses implémentations et fourchettes
Tous les navigateurs testés ont rendu notre fichier SVG sans problème. néanmoins, des différences dans le rendu de Specular Lighting, un composant de filtre composite, ont été observées par rapport à Inkscape..
| Navigateur | Version | Plate-forme | Résultat |
| Safari | 8.0.6 | MacOS |  |
| Loutre | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | les fenêtres | |
| Dauphin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| Navigateur UC | 10.5.0.575 | Android |
Moteur trident
Trident est un moteur propriétaire utilisé par les versions Internet Explorer 4.0 - 11.0. IE a parfaitement interprété notre SVG. De plus, l'aspect du filtre composite correspond le mieux à l'image d'origine. Nous avons également testé IE 9, le deuxième IE le plus utilisé (en mai 2015), et avons constaté que cette version présentait des problèmes de flou gaussien et de filtre composite..
Ce n'est cependant pas une surprise, car IE 9 a été initialement publié avant la version finale de la norme SVG 1.1 SE, dans laquelle les effets de filtre étaient officiellement ajoutés..
| Navigateur | Version | Plate-forme | Résultat |
| C'EST À DIRE | 11.0.9600.17843 | les fenêtres |  |
| Navigateur | Version | Plate-forme | Résultat |
| C'EST À DIRE | 9.0.8112.16421 | les fenêtres |  |
Moteur Gecko
Gecko est un moteur développé par Mozilla Corporation et donc utilisé dans le navigateur Web Firefox ou le client de messagerie Thunderbird. Il est également utilisé par les navigateurs PaleMoon, Waterfox et de nombreux autres forks de versions antérieures de Firefox. Dans le cas du moteur Gecko, les résultats n'étaient pas exactement les mêmes d'une plate-forme à l'autre..
La version Windows présentait un petit problème en rendant le texte le long du chemin; le même problème a été observé dans les navigateurs Firefox et PaleMoon. Tout comme Webkit, Gecko semble avoir des problèmes pour restituer correctement la primitive de filtre Specular Lighting..
| Navigateur | Version | Plate-forme | Résultat |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Lune pale | 25,5 | Android |
| Navigateur | Version | Plate-forme | Résultat |
| Firefox | 38.0.5 | les fenêtres |  |
| Lune pale | 25,5 | les fenêtres |
Navigateurs problématiques
Comme on peut le voir ci-dessus, toutes les versions récentes des principaux moteurs de rendu / navigateurs ont réussi notre test sans difficultés majeures. Voyons ceux qui n'ont pas si bien réussi.
Maxthon est un navigateur multi-plateformes développé en Chine. Selon les 20 navigateurs Web alternatifs de Fahad Khan pour Windows, Maxthon utilise à la fois les moteurs Trident et Webkit. Nous n'avons pas remarqué de problème avec le rendu SVG sous Linux (v. 1.0.5.3) et Windows (v. 4.4.5.3000); toutefois, sur un périphérique Android, ni le flou gaussien ni les autres primitives de filtre n'ont été rendus..
Navigateur CM effectué rapidement sur notre appareil Samsung galaxy S3 en test, mais il ne prend également en charge aucun des effets de filtre décrits dans la spécification SVG 1.1 SE.
| Navigateur | Version | Plate-forme | Résultat |
| Maxthon | 4.4.6.2000 | Android |  |
| Navigateur CM | 5.1.94 | Android |
Konqueror est un navigateur par défaut pour KDE, l’un des environnements de bureau Linux les plus populaires. La possibilité de restituer des fichiers SVG dans Konqueror dépend du moteur de rendu. Avec WebKit activé, notre test SVG a été correctement rendu. Cependant, le moteur de rendu par défaut de Konqueror, KHTML, ne prend pas en charge plusieurs fonctionnalités: les effets de filtre ne sont pas appliqués aux marqueurs de fin d'objet et de contour, et le texte le long des chemins et des objets de modèle n'est pas rendu du tout..
| Navigateur | Version | Plate-forme | Résultat |
| Konqueror KHTML | 15.04.2 | Linux |  |
Conclusion
Lors de notre test, nous nous sommes concentrés sur la prise en charge du format SVG par les moteurs de rendu Web modernes. Nous avons testé 4 moteurs de rendu principaux et 15 navigateurs différents, y compris des moteurs populaires tels que Maxthon ou Dolphin. Presque toutes les versions actuelles des navigateurs ont passé notre test et il est difficile de choisir un gagnant définitif..
Il semble que soutien et empilement correct des primitives de filtre est le dernier défi qui reste à relever pour les moteurs de rendu actuels. Lorsque nous comparons notre image SVG d'origine à tous les résultats obtenus, nous désignons subjectivement l'IE 11 (moteur Trident) pour la première place..
Cependant, il est clair que le moteur Blink est à la poursuite de notre projet et nous recommandons donc les navigateurs basés sur Blink pour le rendu des fichiers SVG. Si vous souhaitez tester rapidement votre propre navigateur favori, n'hésitez pas à utiliser notre page de test du convertisseur SVG ici..
Note de l'éditeur: Cet article est écrit pour Hongkiat.com par Michal Rost. Michal travaille en tant que programmeur dans une société biomédicale, mais consacre son temps libre au développement d'applications open source et de portails Web à but non lucratif. Il est le fondateur de scalablegfx. Vous pouvez le trouver sur Twitter.
