EdgeがIMGタグのSVGをストレッチしてくれないことがある
HTMLのIMGタグでSVG画像を表示するとき、EdgeではSVG画像がIMGタグのサイズに拡大・縮小されず、SVGで指定されたサイズでそのまま表示されることがあります。
他のブラウザ（Chrome、Firefox、Safari）では大丈夫でした。 また他の画像形式ならばEdgeでも問題ありません。
どうやらEdgeでは、SVGのサイズ指定方法によって表示が変わるようです。これが不具合なのかどうなのかはわかりません。
このようにEdgeはちょっと邪魔くさいことが多く、ブラウザシェアも6％程度（2018年9月現在の日本国内シェア）のようなので、できれば無視したいのですが、Windows 10の標準バンドル品なので、無視しがたいのが悩み所・・・。
※ 本記事で確認しているEdgeのバージョンは42。レンダリングエンジンEdgeHTMLのバージョンは17。
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］ (Future Coders（NextPublishing）)
posted with amazlet at 18.10.14
目次
SVG関連の記事：
発生する現象
下の画像は、9×9のクロスハッチで、SVGのサイズは1215×1215pxのSVG画像です。 Edge以外では正しく表示されているはず。
gray-9x9-crosshatch-1215x1215.svg:
<img width="270px" src="https://takamin.github.io/images/gray-9x9-crosshatch-1215x1215.svg"/>
Edgeでは下のように表示されてしまいます。 IMGタグの領域内にオリジナルのスケールで表示されています。
原因
SVGファイル内での画像サイズの指定がstyle属性で行われていると、（Edgeだけで）この現象が発生するようです。
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" style="width:1215px; height:1215px;" viewBox="0 0 321.46874 321.46876" version="1.1" . . .
対策
SVGファイルのSVG要素のサイズ指定をstyleではなくwidthと height で行えばEdgeでも正しく表示してくれます。
※ widthとheight属性でサイズ指定していても、styleでサイズが指定されていれば、スケーリングされないようです。
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="1215px" height="1215px" viewBox="0 0 71.437498 71.437502" version="1.1" . . .
以下は属性だけでサイズ指定したSVGです。Edgeでも正しく表示されているはずですよ。
<img width="270px" src="https://takamin.github.io/images/gray-9x9-crosshatch-1215x1215-edge.svg"/>
職場で、家で、学校で、働くあなたの疲れをほぐす すごいストレッチ
posted with amazlet at 18.10.14
他の対策
他の対策もありますので以下に書いておきますね。
style属性を書き換える
SVGのstyle属性でサイズを指定していても、表示したいサイズに変更すれば問題ありません。 しかしこれだと、大きなサイズの画像を縮小してサムネイル的に表示したいときなどに、ファイルを分ける必要があり、SVGを使っている利点が出ません。
XHRでSVGを取り出して表示。
外部サイトのSVGファイルなどで編集できない場合などは、別途XHRでSVGを取り出して内容を編集してから表示する必要があるかもしれません。 この場合は、IMGタグではなくインラインSVG（SVGタグ）で表示する手もあります。
何が正しいのかよくわからん
この挙動が、HTMLの仕様として正しいのかそうでもないのかは読み取れませんでした。 しかし、SVGの仕様では、style属性の中でwidthやheightを指定できるという記述は見つけられませんでした。
つまり、本来widthやheightはstyleで指定するものではないけれど、Edgeはそれを（良かれと思って？）解釈してくれて、上記のような挙動になっているのかもしれません。
