web-dev-qa-db-fra.com

Prise en charge du navigateur .SVG

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?

cross-browsersvg
62
Jedda

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

Sources:

52
bennedich

La spécification SVG est vaste et aucun navigateur ne prend actuellement en charge l'intégralité de la spécification. Cela étant dit toutes les dernières versions de tous les principaux navigateurs ont basique support SVG . Étant donné qu’aucun d’entre eux ne propose une assistance complète, vous devez vérifier les fonctionnalités de chaque navigateur que vous ciblez. Si vous ne dessinez que des formes de base et n'utilisez pas de fonctionnalités plus avancées (comme les filtres, les animations, etc.), vous n'aurez probablement aucun problème.

ne matrice de compatibilité de navigateur complète peut être trouvée ici .

La solution de contournement pour les anciennes versions de IE consiste à utiliser VML . Si la prise en charge d'IE6 est requise et que vous dessinez avec du code then Raphael.js effectuera cette vérification de compatibilité pour vous et effectuera le rendu avec VML ou SVG si nécessaire, mais si vous chargez un fichier SVG brut et utilisez-le comme source d'image, cela ne fonctionnera pas.

Une autre option pour les anciens navigateurs est d'utiliser le bibliothèque JavaScript de canvg . C'est un analyseur SVG JavaScript pur qui convertira l'image obtenue en toile, mais cela risque d'être excessif.

34
sym3tri

... ou vous pouvez laisser le serveur Apache s'en charger:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]

il vous suffit de créer des versions .png de chaque fichier .svg, que le fichier soit destiné à un arrière-plan CSS ou à une balise img.

12
Louis

édité: J'avais l'habitude de créer un lien vers un très beau tableau de comparaison SVG, mais il n'a pas été mis à jour depuis 2011, il n'est donc plus pertinent.

9
Kornel

À noter, si vous avez besoin de la prise en charge <= IE8, vous pouvez implémenter GoogleChromeFrame assez facilement pour obtenir la prise en charge SVG que vous recherchez ...

Bien que vous puissiez constater que chaque navigateur a ses propres petites bizarreries en ce qui concerne les fonctionnalités de la spécification. J'ai eu des problèmes avec les nœuds créés dynamiquement qui utilisent des filtres et animateMotion a été un bug dans Google Chrome pendant trop longtemps ... (nous utilisons FF5 + comme nos interfaces interactives pour cette raison, Safari est va mieux aussi)

IMO, à moins que l'application ne soit entièrement au format SVG, je n'utiliserais que des fichiers PNG pour vos icônes, à moins que vous ne souhaitiez qu'elles évoluent correctement! :)

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

7
RGB

¡Avec élément d'objet!

<object data="example.svg" type="image/svg+xml">
     <!-- If browser don't soport / don't find SVG  -->
     <img src="example.png" alt="Logotype" />
</object>
5
D.Bulten

Si je travaille avec des éléments <img> (Par opposition aux images d'arrière-plan CSS), j'utilise une solution de contournement pratique, une combinaison de Modernizr (une bibliothèque JavaScript qui détecte la disponibilité de certaines fonctionnalités , tel 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 des versions .png de tous les fichiers .svg. 2) Modernizr donne à l'élément html la classe de .no-svg S'il détecte qu'il n'y a pas de support .svg. 3) jQuery échange les extensions de fichier. .indexOf(".svg") vérifie si la chaîne ".svg" est contenue dans la valeur de src, renvoyant -1 si elle ne la trouve pas et un entier positif si elle Est-ce que. S'il trouve ".svg", Toute la chaîne src est extraite dans isSvg et .replace() échange .svg Pour .png et enregistre le résultat sous la forme isPng, qui est ensuite définie comme la valeur de src.

3
Danny

Vous pouvez également utiliser les SVG en général pour toutes les images. De cette façon, vous couvririez tout ce qui concerne la rétine sur les appareils. D'autres appareils suivront tôt ou tard.

Pour les navigateurs ne prenant pas en charge svg, vous pouvez attribuer au corps une classe de 'no-svg'.

Dans votre css, ajoutez simplement un '.no-svg .yourimageclass' et placez un png à la place. (Remplacez-le)

Boilerplate HTML5 vous donne cette classe no-svg déjà par défaut avec un peu de magie javascript. (par exemple pour IE8)

3
RedRoosterMobile

Vous pouvez utiliser le script caniuse.js pour déterminer si votre navigateur prend en charge le format SVG ou non:

caniuse.svg()
0
beka