SVG avec largeur/hauteur n'a pas d'échelle sur IE9/10/11

Il existe un problème connu avec IE 9/10/11 où si vous avez un fichier SVG où la <svg> élément spécifie la largeur et la hauteur, puis la mise à l'échelle de l'image SVG à l'aide de la width et height les attributs d'un <img> tag, IE n'est pas correctement l'échelle de l'image.

J'ai rencontrer ce genre de problème. J'ai une série de SVG icônes de drapeau. Pour les états-unis icône de drapeau, le SVG objet est écrit que:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">

<!-- elements to draw flag .. -->

</svg>

Et voici la source pour le SVG.

J'insère le SVG dans un document HTML avec un <img> balise, et en bas de l'échelle pour 20x15:

Sur Chrome 39, le SVG est rendu correctement comme suit:

Mais sur IE10, il rend comme suit:

Donc, ce qui semble être ce qui se passe ici est que, même si IE10 tailles de la <img> élément de 20x15, il n'est pas de convertir le SVG - nous avons donc vu juste le coin supérieur gauche de l'icône du drapeau, qui apparaît comme une plaine de la boîte bleue.

Ok... donc, cela semble être un problème connu avec documentée solutions. Une solution est tout simplement de supprimer tous les width et height attributs dans le fichier SVG. Cela semble un peu dangereux comme je ne veux pas bousiller les conceptions. C'est aussi un peu lourd à faire si vous avez beaucoup de fichiers SVG nécessitant plus de scripts pour traiter les fichiers.

Une meilleure solution est d'utiliser les CSS pour cibler spécifiquement les éléments SVG dans IE10, qui, apparemment, est possible à l'aide d'un fournisseur de médias requête:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

D'accord, mais je ne comprends pas cette solution. Quand j'essaye de le ci-dessus, IE10 simplement agrandit la taille de l'SVG pour remplir la totalité du conteneur parent, ce qui n'est pas ce que je veux. D'accord, alors je peux peut-être la force d'IE à l'échelle du SVG en définissant le SVG width à 100%, mais le fait de contraindre la taille du conteneur parent. Donc j'ai enveloppé le <img> dans un DIV avec une largeur et une hauteur de 20x15. Mais... qui donna le même problème qu'avant: la DIV conteneur est fixé à 20x15, mais le SVG n'est pas shrink - de sorte que tous nous nous retrouvons avec est le en haut à gauche coin bleu du drapeau comme avant:

... donc, je suis probablement juste de ne pas comprendre quelque chose au sujet de cette solution. Comment puis-je obtenir IE10/11 à l'échelle de l'icône de drapeau vers le bas pour 20x15?