hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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.

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 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.

Comment mieux gérer les délais d'écriture

Comment mieux gérer les délais d'écriture

Cet article fait partie de notre «Guide to Freelancing series» - composé de guides et de conseils pour vous aider à devenir un meilleur travailleur indépendant. Cliquez ici pour lire plus de cette série. Le processus d'écriture est un processus créatif, pour la plupart, et quand il s'agit d'avoir trop de liberté de travail, parfois le temps n'est pas essentiel. Faites-

(Conseils techniques et de conception)

20 conceptions de mascotte créative qui laissent une impression

20 conceptions de mascotte créative qui laissent une impression

Vous rappelez-vous le trombone utile dans Microsoft Word qui vous aiderait avec des conseils? C'est l'une des premières mascottes du design dont je me souviens. Avec le nombre croissant de sites Web quotidiens et les marchés hautement concurrentiels, de nouveaux trucs attrayants sont nécessaires pour que vous vous démarquiez .Un

(Conseils techniques et de conception)