質問: 背景画像svgファイルをieで小さくしないためにはどうすればいいでしょうか。 お世話になっております。現在、webページを作成しており、画像はaiデータがあること、レスポンシブ対応のため背景画像も含め、svgファイルを使用しております。ieで該当ページを開くと、svgファイルの背景画像が、豆粒みたいに小さくなってしまいます。添付の、svgファイル編集前_ie.jpg ファイルの状態です。インターネット検索で、下記サイトのように、http://webdev.jp.net/svg-size-ie-bug/widthやheightを指定すればいい、という内容があったのですが、cssには、 background: url(click_here.svg)no-repeat; background-position: top left 470px; background-size: 150px; height: 55px;などのように、高さ、もしくは幅を使用しています。また、width: auto; を追記しても変化はありませんでした。次に、下記サイトのように、http://www.fujipro-inc.com/2017/05/31/4785.htmlsvgファイルのsvgタグ内に、 preserveaspectratio="none"を追記してみたのですが、添付ファイルの、svgファイル編集前.jpg のようにieでなって欲しいのですが、添付ファイルの、svgファイル編集後.jpg のような表示になってしまいます。背景画像svgファイルをieで小さくしないためにはどうすればいいでしょうか。お忙しいところお手数おかけしますが、よろしくお願いいたします。
回答: ecマスターズの伊藤です。> background-size: 150px;> の記述を削除したところ、chromeでは特段変更がありませんでしたが、> ieでは矢印の画像が表示されなくなりました。再度確認したところsvgはie11では・repeatが効かない・backgroud-positionが効かないといった不具合があるようです。そのため、上記の設定を削除しますと表示されるかと思います。書き出しの際の設定で直ることもあるようなのでsvgを使うときに知っておくといいことをまとめましたhttps://qiita.com/manabuyasuda/items/01a76204f97cd73ffc4eという記事がございましたので、こちらを参考に、再度書き出しをお願いいたします。ieに対応されたいようでしたら、pngやgifをご利用いただくことも、ご検討いただければ幸いです。