18041 sujets

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

Intégrer une icone en svg pour tous navigateurs

Bonsoir à tous

Je viens de passer un peu de temps à collecter ou fabriquer des images svg dans le but d'avoir des images redimensionnable de qualité, et je me rends compte que

    <img src="/icone.svg" style="width:20px;"  .../>

marche dans Safari, Chrome, FireFox mais pas dans IE 11
Il semble que IE ne redimensionne pas l'image, mais l'affiche dans sa taille par défaut, limitée à la taille du conteneur, ce qui donne le résultat suivant
upload/48769-icones.png
En haut sous FireFox, en bas sous IE

Ne me dites pas que ce n'est pas étonnant de la part de IE, cela fait longtemps que je le sais et c'est une des raisons pour lesquelles je n'utilise pas ce navigateur, seulement je ne peux pas infliger ça à mes utilisateurs.

Une idée pour résoudre cette incompatibilité?

Note: en fait le wdith:20px est dans la feuille de style, mais ça ne doit pas changer grand chose

Modifié par PapyJP (22 May 2015 - 16:55)
75lionel a écrit :
bonjour
1- Utiliser &lt;object&gt; d apres Craig Buckler en 2012
2- suivre les notes en bas de la page en raport a IE sur svg caniuse
3- utiliser viewBox
cordialement

Merci Lionel
C'est ce qu'il faillait faire lorsque le format svg est apparu, il y a une dizaine d'années. J'osais espérer que l'intégration des svg comme tout autre format d'image faisait partie des progrès accomplis depuis que je suis en retraite (2007).
C'est d'ailleurs ce que tout le monde a fait, sauf MS, mais le pire c'est qu'ils l'ont effectivement fait, mais très mal!

J'ai eu cette nuit une idée que je vais tester aujourd'hui: puisque le bug semble être qu'il ne redimensionnent pas l'image, que se passe-t-il si le fichier svg contient une définition de l'image dans la bonne taille?
Je vais faire un petit programme qui met un fichier svg à l'échelle et je vous dirai ce qu'il en est.
Sujet clos
Aller à