Navigateurs compatibles

Question

Je travaille sur un design réactif et je songe à créer des icônes de navigation sous forme de fichiers .svg. Quel est le support actuel du navigateur et existe-t-il une solution de contournement / un plug-in pour les anciennes versions de navigateur?

Answer 1

Tous les principaux navigateurs sont pris en charge depuis des années sauf <= IE8. La solution de contournement pourrait être, par exemple, RaphaelJS.

Sources:

• http://caniuse.com/#search=svg
• http://raphaeljs.com/

Answer 2

Le SVG spec est vaste et pas de navigateur prend actuellement en charge l'ensemble de la spec. Cela étant dit, toutes les dernières versions de tous les navigateurs majeurs ont de base le support SVG. Depuis ils n'ont pas de prise en charge complète, vous aurez besoin de vérifier les caractéristiques individuelles de chaque navigateur que vous ciblez. Si vous êtes seulement en dessinant des formes de base et de ne pas utiliser des fonctionnalités plus avancées (comme les filtres, animation, etc) il est probable que vous n'aurez pas de problèmes.

Un navigateur complet matrice de compatibilité peuvent être trouvés ici.

La solution de contournement pour les anciennes versions d'IE est d'utiliser VML. Si le soutien de IE6 est requis et que vous dessinez avec le code ensuite Raphael.js va faire cette vérification de la compatibilité pour vous et le rendu à l'aide de VML ou SVG, le cas échéant. Mais si vous êtes en train de charger un raw fichier SVG, et l'utiliser comme une source de l'image qui ne fonctionne pas.

Une autre option pour les vieux navigateurs est d'utiliser le canvg bibliothèque JavaScript. C'est un pur JavaScript, SVG analyseur de rendu de l'image sur la toile, mais c'est peut-être exagéré.

Answer 3

Vous trouverez un tableau de support SVG détaillé ici:

http://www.codedread.com/svg-support-table.html

Answer 4

Intéressant de noter, si vous avez besoin d' <=IE8, vous pouvez mettre en œuvre GoogleChromeFrame assez facilement à obtenir le support SVG vous êtes à la recherche pour...

Bien que vous pourriez trouver que chaque navigateur a ses propres bizarreries à l'égard des fonctionnalités de la spécification. J'ai eu des problèmes avec la de créer dynamiquement des nœuds qui utilisent des filtres et animateMotion a été mis sur écoute dans Google Chrome depuis trop longtemps...(nous utilisons FF5+ que nos interfaces interactives pour cette raison, Safari est de mieux en mieux aussi)

De l'OMI, à moins que l'ensemble de l'application est le SVG, je voudrais juste utiliser le format Png pour vos icônes, sauf si vous les voulez à échelle bien! :)

...mais si vous voulez juste jouer avec SVG, Giv er! ;)

Answer 5

Si je travaille avec des <img> éléments (par opposition à la CSS, les images de fond), j'utilise une solution pratique, une combinaison de Modernizr (une bibliothèque JavaScript qui détecte la disponibilité de certaines fonctionnalités, telles que .le support svg, sur les navigateurs) et quelques lignes de jQuery:

$(".no-svg img").each(function() {
    var $this = $(this);
    if ($this.attr("src").indexOf(".svg") > -1) {
        var isSvg = $this.attr("src").toString();
        var isPng = isSvg.replace(".svg", ".png");
        $this.attr("src", isPng);
    }
});

1) je crée .png versions de chaque .fichier svg. 2) Modernizr donne le code html de l'élément de la classe d' .no-svg s'il détecte qu'il n'y a pas .le support svg. 3) Le jQuery swaps sur les extensions de fichier. .indexOf(".svg") vérifie si la chaîne de caractères ".svg" est contenue dans la valeur de src, revenant -1 si il ne le trouve pas et un entier positif si il n'. Si elle conclut ".svg", l'ensemble de l' src chaîne de caractères est tiré en isSvg, et .replace() swaps .svg pour .png et enregistre le résultat dans isPng, qui est définie comme la valeur de src.