こんにちはコバヤシです。
WEB業界に入るとみんなが嫌いになるという定評があるIEですが、とある案件のコーディング中にまたもやIEに（しかも同じ案件で二連続で！）やられてしまったので、自分メモのために残しておきます。
事件①い、な、い
SVGで背景画像を貼ったときのこと。
なんと、IEでは表示がされない・・・・・！！！！
何が起きたの？？！！！chromeもFirefoxもダイジョブだよ(;´･ω･)？！！！
となり、、、
SVGをPhotoshopで書き出しなおすも、効果なし(´;ω;｀)
こうなったら！！！！
フォトショをイラレに変換しなんやかんや頑張り、SVGをIllustratorで書き出しなおすも、効果なし(´;ω;｀)
泣く泣くグーグル先生で検索すると・・・・・
SVGファイルをテキストエディタで開いて「width」「height」を追記する。
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″>
↓
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″ width=”100″ height=”100″>
という神のお告げを発見。
イラレやフォトショで書き出すCSSコードは完璧じゃないのはよくわかりますが、SVGでも同様なようで、ちょいちょい手を加えてあげなくてはならんのですね。
(普段はハイスぺなのに、たまに手がかかるなんてadobe様のギャップ萌えというやつですね(/o＼)）
これははまります。
事件②サイズちいちょい。
書き出したところ、、、サイズがちいちゃい問題。
なんでIEだけちいちゃいんだい？？やる気ないのかな(´･ω･｀)？？？
そんな問題はこちらで解決。
＜HTML＞
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewBox="0 0 640 480"> ＜CSS＞
.img {
width:30%;
}
.img img[src$=".svg"] {
width: 100%;
height: auto;
}
親要素の幅をきっちり指定してあげること、svgにwidth100%を指定、HTML側ではSVGにはViewboxを指定することで解決しました。
一度ハマると原因がいろいろ考えられすぎて困るSVGに、天敵IEが遭遇するともう大変・・・・！！（これだからIEは嫌いなんだ・・・）
参考は以下です。先人たちの知恵にはいつも助けていただいております。。。
https://qiita.com/both3lectrodes/items/71e24e25ca64b14696d1
余談ですが、最近モニターを買いました。
作業環境が整って満足です(=ﾟωﾟ)ﾉ
あとは、デスクトップとテーブルとイスと、作業が静かにできる居住地がほしいな、なんて思ってしまいました。
