18041 sujets

Questions générales et questions de débutants

[Résolu] Utilisation du SVG

Bonjour à tous

J'aimerais mettre certaines images en SVG, tout en gardant la compatibilité avec les vieilles versions de IE qui ne le supportent pas.
Comme -- du moins pour le moment -- il s'agit d'images simples, je pense que, parmi les différentes façons d'inclure des images svg, l'utilisation de background-image en CSS devrait me permettre de traiter le problème, par exemple sous la forme d'une classe spécifique "old-browser" générée au chargement de la page par le script d'initialisation qui permettrait de choisir la bonne image en fonction du contexte.
N'ayant aucun expérience en la matière, je suis demandeur de conseils!!
Mieux encore : à une lointaine époque, quand je cherchais la compatibilité SVG pour feu IE, j'utilisais la lib' Raphael.js qui créait une surcouche en javascript pour la compatibilité.
Salut,

Pour les images dans la css :

.my-element {
  background-image: url(fallback.png);
  background-image: 
    linear-gradient(transparent, transparent),
    url(image.svg);
}


Pour les images classiques, avec js :
<img src="image.svg" onerror="this.src='image.png'">


Tout cela vient de Css tricks - SVG Fallbacks
Merci de ces réponses
Je pense que je vais explorer la solution de bzh, ça me semble simple pour ce que je dois faire (seulement 4 images de ce type, du moins pour le moment)
Question idiote: je suppose que si j'ai un style du genre "max-size" sur une balise <img> qui contient une image svg, ça va se redimensionner correctement?
Oui, bien entendu c'est max-width que je voulais dire.
J'ai fait quelques essais, ça semble marcher comme j'espérais
Merci à tous
Modifié par PapyJP (05 May 2017 - 14:38)
Bonjour,

bzh a écrit :


.my-element {
  background-image: url(fallback.png);
  background-image: 
    linear-gradient(transparent, transparent),
    url(image.svg);
}
Est-ce que suivant cet exemple, sur un navigateur autre que IE, l'image fallback.png est quand même chargée malgré la compatibilité avec le format svg ?
Bonne question, sur firefox et chrome ce n'est pas le cas mais je ne saurais dire / ai pas le temps de vérifier pour les autres.
Modérateur
Outre cela, ce n'est pas un très bon test.

il affichera le fallback pour tous les navigateurs qui ne supportent pas linear-gradient (dans son ancienne syntaxe) et les background multiples.

Or IE9 et certaines version de FF & Chrome afficheront le fallback alors qu'ils sont capable d'afficher le svg.

Utiliser modernizr ou un système de feature detection me paraît plus correct.
Modifié par kustolovic (05 May 2017 - 10:58)
Sujet clos
Aller à