背景画像svgファイルをIEで小さくしないためにはどうすればいいでしょうか。

Question

お世話になっております。
現在、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.html

svgファイルのsvgタグ内に、
　　　　　　preserveAspectRatio="none"
を追記してみたのですが、

添付ファイルの、svgファイル編集前.jpg のようにIEでなって欲しいのですが、
添付ファイルの、svgファイル編集後.jpg のような表示になってしまいます。

背景画像svgファイルをIEで小さくしないためにはどうすればいいでしょうか。
お忙しいところお手数おかけしますが、よろしくお願いいたします。###HR######IMG03a4c22dd94904f9b233ad9e6b5c66110.jpegIMG0### ###IMG1b2718bede3207704d8605036ec63c573.jpegIMG1### ###IMG2e9a2f3db560ed574d96285a38db004f2.jpegIMG2###

Accepted Answer

伊藤様

ご回答ありがとうございます。

widthやheightを追加しては見たのですが、
preserveAspectRatio については全く認識しておりませんでした。

他のsvgファイルにも適用してレイアウトの調整をしてみます。
ありがとうございました。

Answer

ECマスターズの伊藤です。

実際のページを拝見して、タグを確認させていただきたいので
該当のページのURLを返信、もしくは
一番最初の投稿の右下にございます
「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

ECマスターズ　伊藤 様

ただいま、「投稿内容について報告する」よりお送りさせていただきました。
お手数おかけしますが、引き続きどうぞ、よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

URLのご連絡ありがとうございました。

確認したところ
background-size: 150px;
が原因となり、縮小して表示されていたようです。

削除していただき、ご確認をお願いいたします。

Answer

伊藤様

ご回答ありがとうございます。

background-size: 150px;
の記述を削除したところ、chromeでは特段変更がありませんでしたが、
IEでは矢印の画像が表示されなくなりました。

IEのバージョンは11です。
お手数おかけしますが、引き続きご指摘よろしくお願いします。

Answer

ECマスターズの伊藤です。

> background-size: 150px;
> の記述を削除したところ、chromeでは特段変更がありませんでしたが、
> IEでは矢印の画像が表示されなくなりました。

再度確認したところ
svgはIE11では
・repeatが効かない
・backgroud-positionが効かない
といった不具合があるようです。

そのため、上記の設定を削除しますと
表示されるかと思います。

書き出しの際の設定で
直ることもあるようなので

SVGを使うときに知っておくといいことをまとめました
https://qiita.com/manabuyasuda/items/01a76204f97cd73ffc4e

という記事がございましたので、
こちらを参考に、再度書き出しを
お願いいたします。

IEに対応されたいようでしたら、PNGやGIFを
ご利用いただくことも、ご検討いただければ幸いです。

Answer

伊藤様

ご回答ありがとうございます。

お教えいただきましたサイト
SVGを使うときに知っておくといいことをまとめました
https://qiita.com/manabuyasuda/items/01a76204f97cd73ffc4e

を見ていると、

「background-imageでSVGを表示する」
に
「使用するSVGファイル内にはwidthとheight、viewBox属性を必ず指定します（IEとAndroid対応）。」
と記載がありました。

svgファイルをテキストエディタで開いて、svgタグ内にwidthやheightを指定するか、
AIファイルからsvgファイルを書き出す際に、widthやheightを指定する、という理解であっていますでしょうか。

Answer

ECマスターズの伊藤です。

> svgファイルをテキストエディタで開いて、svgタグ内にwidthやheightを指定するか、
> AIファイルからsvgファイルを書き出す際に、widthやheightを指定する、という理解であっていますでしょうか。

はい、ご認識の通りで間違いございません。

試しに、click_here.svgを、下記の通りに修正したところ
背景画像のみを表示させた、テストページとはなりますが
正常にpositionやサイズが
設定されることを確認いたしましたので
お試しくださいませ。

preserveAspectRatio="xMinYMid" width="200px" height="55px"
を追記しています。

.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;}アセット 3