Test de la prise en charge de SVG sur les moteurs de navigation 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 couvre une grande variété de logiciels d'édition d'images, en particulier Inkscape, qui utilise SVG comme format natif (si vous voulez un rappel sur SVG, cliquez ici).

Mais qu'est-ce qui est exactement 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 qu'en est-il de leurs fonctionnalités avancées comme les filtres? Eh bien, c'est ce que nous allons découvrir. Nous avons pris un échantillon de navigateurs modernes, dont certains parmi les moins connus, et les avons testés avec un fichier SVG fait à cet effet .

L'image de test

Nous avons préparé notre photo 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, citons: 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.

Moteur clignotant

Nous avons commencé avec - de loin le moteur de rendu le plus fréquent - Blink. Blink est le moteur natif des navigateurs Chrome et Chromium de Google, Opera et Android WebView. Tous les navigateurs mentionnés ci-dessus rendent les images de test de la même manière sur les plates-formes testées.

En comparaison avec l'image originale produite par Inkscape, il n'y a eu aucun problème sauf une légère différence dans le rendu des effets de filtre 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 Webkit

Selon les statistiques récentes sur l'utilisation du navigateur, les trois premières positions n'appartiennent pas aux navigateurs basés sur Webkit (en mai 2015). Cependant, ce moteur est répandu parmi les développeurs. En outre, il existe diverses implémentations et fourchettes de celui-ci

Tous les navigateurs testés ont rendu notre fichier SVG sans problèmes; 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 Internet Explorer versions 4.0 - 11.0. IE a parfaitement interprété notre SVG. De plus, l'apparence du filtre composite correspond le mieux à l'image originale. Nous avons également testé IE 9, le deuxième IE le plus utilisé (en mai 2015) et constaté que cette version avait des problèmes avec le flou gaussien et le filtre composite.

Ce n'est 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 ont été 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 nombreuses autres versions des versions antérieures de Firefox. Dans le cas du moteur Gecko, les résultats n'étaient pas exactement les mêmes sur différentes plates-formes.

La version Windows présentait un petit pépin dans le rendu du 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 du mal à rendre correctement le filtre d'éclairage spéculaire.

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 significatives. Jetons un coup d'œil à ceux qui ne se sont pas si bien débrouillés.

Maxthon est un navigateur multiplateforme 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 (version 1.0.5.3) et Windows (version 4.4.5.3000); Cependant, sur un appareil Android, ni le flou gaussien ni les autres primitives de filtre n'ont été rendus.

Le navigateur CM a fonctionné rapidement sur notre appareil Samsung Galaxy S3 de test, mais il ne supporte pas non plus les effets de filtre décrits par 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 rendre les fichiers SVG dans Konqueror dépend du moteur de rendu. Avec WebKit activé notre test SVG a été rendu correctement. Toutefois, le moteur de rendu par défaut de Konqueror, KHTML, semble ne pas prendre en charge plusieurs fonctionnalités: les effets de filtre ne sont pas appliqués aux marqueurs de fin d'objet et de trait, et le texte le long des chemins.

Navigateur	Version	Plate-forme	Résultat
Konqueror KHTML	15.04.2	Linux

Conclusion

Dans notre test, nous nous sommes concentrés sur la prise en charge du format SVG sur 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 la prise en charge et l'empilage correct des primitives de filtre constituent le dernier défi restant pour les moteurs de rendu actuels. Lorsque nous comparons notre image SVG originale avec tous les résultats rendus, nous nommons subjectivement l'IE 11 (moteur Trident) pour la première place.

Cependant, il est clair que le moteur Blink est très proche et nous recommandons donc les navigateurs basés sur Blink pour le rendu des fichiers SVG. Si vous voulez effectuer un test rapide de votre propre navigateur préféré, n'hésitez pas à utiliser notre page de test de rendu SVG ici.

Note de l'éditeur: Ce billet est écrit pour Hongkiat.com par Michal Rost. Michal travaille comme programmeur dans une entreprise 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.

Activer la diapositive pour arrêter l'interface utilisateur pour Windows 8.1 [Quicktip]

Les utilisateurs de Windows 8 peuvent trouver difficile de rechercher le bouton d'arrêt. Pour des raisons inconnues, les utilisateurs de Windows 8 doivent passer par 3 étapes pour localiser l'option de fermeture. Dans la mise à jour Windows 8.1, vous pouvez faire un clic droit sur le menu Démarrer et choisir Arrêter.Tout

(Conseils techniques et de conception)

Mise en page de la grille CSS: Comment utiliser minmax ()

Le CSS Grid Layout Module prend la conception sensible au niveau suivant en introduisant un nouveau type de flexibilité qui n'a jamais été vu auparavant. Maintenant, nous pouvons non seulement définir des grilles personnalisées avec rapidité uniquement avec du CSS pur, mais le CSS Grid a aussi beaucoup de gemmes cachées qui nous permettent de modifier la grille et d'obtenir des mises en page compliquées.La fonc

(Conseils techniques et de conception)