Page d'accueil » Codage » Test de la prise en charge SVG sur les moteurs de navigateur Web [Étude de cas]

    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.