.SVG prise en charge du Navigateur

Je suis en train de travailler sur une conception sensible et je pense à la création d'icônes de navigation en tant que .les fichiers svg. Quel est le support de navigateur comme et est-il une solution de contournement/plugin pour les anciennes versions de navigateur?

InformationsquelleAutor Jedda | 2012-01-19
  1. 52

    Tous les principaux navigateurs ont eu l'appui pour les années à l'exception de <= IE8. Solution de contournement peut être, par exemple, RaphaelJS.

    Sources:

    InformationsquelleAutor bennedich
  2. 33

    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 base 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 puis 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é.

    InformationsquelleAutor sym3tri
  3. 12

    ... ou vous pouvez laisser le serveur apache de traiter avec elle:

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

    vous n'avez qu'à créer .png versions de chaque .fichier svg, et il n'a pas d'importance si le fichier est à fond de css ou pour une balise img.

    InformationsquelleAutor Louis
  4. 9

    édité: j'ai utilisé pour faire un lien vers un très beau SVG tableau de comparaison, mais il n'a pas été mis à jour depuis 2011, il n'est donc pas pertinent, pas plus.

    • Il est intéressant de noter que ce tableau a été mise à jour en 2011
    • N'est plus vrai @bashaus. Ce tableau est mis à jour régulièrement.
    InformationsquelleAutor Kornel
  5. 7

    Intéressant de noter, si vous avez besoin de <=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! 😉

    InformationsquelleAutor RGB
  6. 5

    ¡Avec élément 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>
    InformationsquelleAutor D.Bulten
  7. 3

    Vous pourriez aussi bien utiliser SVGs en général pour toutes les images. De cette façon, vous auriez couvrir tous rétine de choses sur les iDevices. D'autres dispositifs suivra tôt ou tard.

    Pour les navigateurs qui ne prennent pas en charge le format svg, vous pouvez donner au corps une classe de "non-svg'.

    Dans votre css, il suffit d'ajouter un '.sans svg .yourimageclass " et placer un png à la place.(remplacer)

    Boilerplate HTML5 vous donne que les non-svg classe déjà par défaut avec la magie javascript. (par exemple, pour IE8)

    InformationsquelleAutor RedRoosterMobile
  8. 3

    Si je travaille avec <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, tels 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 de .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 ".svg" est contenue dans la valeur de src, de retour -1 si il ne le trouve pas et un entier positif si il n'. Si elle trouve ".svg", l'ensemble de la src chaîne est tiré dans isSvg, et .replace() swaps .svg pour .png et enregistre le résultat dans isPng, qui est définie comme la valeur de src.

    • Sympa, mais est-il une raison, il n'est pas seulement rechercher les.svg' à la fin de la src URI?
    • ne pas seulement : la cuisson, mes nouilles avec ces 2 mots là !
    InformationsquelleAutor Danny
  9. 0

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

    caniuse.svg()
    InformationsquelleAutor beka
  10. -1

    Pour les images de fond, voici un moyen facile de secours PNG horizons pour les anciens navigateurs:

    http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/

    • Ce lien renvoie une erreur 404
    InformationsquelleAutor jlong