SVG画像・IE11でのレスポンシブ

Question

お世話になります。

構築中のサイトに、SVG画像を実装しています。
IE11も対象ブラウザにしているのですが、SVG画像がうまく表示されません（IE11以外は問題なく表示されます）。

サイトのアクセス時やリロード時は、問題なく表示されるのですが、
ブラウザ幅を変えて、画像を伸縮させようとすると、画像が縦長になったり、下が切れたりします。
ただ、全てではなく、一部の画像にこういったことが起こっています。

以下、ソースコードです。

<!-- HTML -->
<picture>
　<source media="(min-width:768px)" srcset="img/example_pc.svg">
　<source media="(max-width:767px)" srcset="img/example_sp.svg">
　<img src="img/example_pc.svg" alt="Access">
</picture>
<p>
  <img src="img/example.svg">
</p>

//CSS
p {
  width: 50vw;
}

img[src$=".svg"] {
	width: 100%;
	height: auto;
}

HTMLでは、上記のように <picture> あるいは <img> で画像を呼び出しており、
その要素を <p> などのブロック要素で囲っています。
CSSでは、ブロック要素に"width"、"img"に"100%"を指定し、幅を設定しています。

また、HTML内に以下のように"width"を設定したりもしてみましたが、効果はありませんでした。

<picture>
　<source media="(min-width:768px)" srcset="img/example_pc.svg">
　<source media="(max-width:767px)" srcset="img/example_sp.svg">
　<img src="img/example_pc.svg" alt="Access" width="100%">
</picture>
<p>
  <img src="img/example.svg" width="100%">
</p>

解決策をご存知の方、お力を貸していただけると、大変助かります。
どうぞよろしくお願いいたします。

Comments

[退会済みユーザー]

画像を載せた方が早期解決の糸口になったりしますのでよろしくおねがいします。

[neko_cat]

申し訳ありません。
実は仕事の案件なので、画像を載せるのは難しいです。

[退会済みユーザー]

それはその画像故におこることでしょうか？
他の画像でも起こっている事象でしょうか？

[neko_cat]

ご返答ありがとうございます。
起こる画像と起こらない画像があります。
もしかしたら、svgの書き出し方法に原因があるかもしれません。
PhotoShopから書き出したものと、illustratorから書き出したものがあり、
Photoshopから描き出したものが、主に問題の状態になっているようです。
今気づいたのですが（汗）

[x_x]

うまくいかないSVGファイルの冒頭部分(<svg>タグ)を記述してもらえるでしょうか？
特にviewBox属性があるかどうか見てもらうといいかもしれません。

[neko_cat]

ご返答ありがとうございます。
SVGファイルの冒頭は、以下になりまs（viewBox属性はあるようです）。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 462.97 17.82"><defs><style>.cls-1{fill:#595757;}</style></defs><title>アセット 19</title><g id="layout">

Answer 1

IE11バグまとめにある内容に該当しませんか？

• IE11のバグまとめ

他「svg ie11 バグ」で調べると結構色々なケースが出てきます。
参考まで。

Comments

[neko_cat]

ご回答ありがとうございます。
ご紹介いただいたサイトも含め、ネット上の情報をひとしきり集め、いろいろ試してもみたのですが、めぼしい情報は見つかっていません、、。

Answer 2

Objectタグで呼び出してもダメですか？

<object type="image/svg+xml" data="img/example.svg" width="xxx" height="xxx"></object>

Comments

[neko_cat]

ご回答ありがとうございます。

<object>で実装できました！
これで、ひとまず解決しました。
本当にありがとうございました。

ただ、なぜ<img>や<picture>ではダメなのか、未だに謎なので、
引き続き、調べてみようと思います。

ご回答をくださったみなさま、ありがとうございました。