SVG（インライン）を用いた背景画像が表示されない原因

サイズや色を調整できるように背景画像にSVGを用いるケースがあったのですが、IE11のみ表示されない現象に遭遇してしまいました。
その対応の備忘録です。

参考にさせていただいたサイト

色を変更するためにどういうCSSにすべきかはchlonologさんを参考にさせていただきました。
そのまま使用していれば今回の現象には遭遇しなかったのですが、表示されなかった原因はイラストレーターが描きだすソースにありました。

背景画像に指定したSVGが表示されなかった原因と対処法

イラストレーターの書きだすソースは色がCSSで記述されていました。
これがchromeなどでは問題なかったのですがIE11では問題のようです。
rectタグやpolygonタグのfill属性で色を設定することで対応できました。