SVG画像の表示について

Question

svgの画像を表示させたいのですが、IE/Firefoxでは問題なく表示されるのですが、chromeでは表示されたり、表示されてもずれていたりします。今回svgの画像は初めて使ってみているので使い方が悪いのかもしれないと思い質問させていただきました。

＜現状の表示＞

<div class="left-box">
  <object data="./img/svg/car.svg" type="image/svg+xml" width="150" height="150"></object>
  <object data="./img/svg/signboard.svg" type="image/svg+xml" width="214" height="94"></object>
</div>

  .left-box object {
    width: 100%;
    height: auto;
  }

↓尚.htaccessに下記の記述もしました。
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
AddEncoding gzip .svgz

Answer 1

svgファイル自体の修正が必要でした。
svgファイルのサイズ部分を削除することでレスポンシブ対応になるそうです。
ご協力本当にありがとうございました！

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 150 150">

↓

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150">

Answer 2

SVGはその画像フォーマットはXMLですが、img 要素で通常の画像のように貼り付けすることが可能だったかと記憶しております。

今回ですと、こう書き直せるかと。

<div class="left-box">
  <img src="./img/svg/car.svg" width="150" height="150">
  <img src="./img/svg/signboard.svg" width="214" height="94">
</div>

また、代替画像を表示するJavaScript（jQuery）でも、img要素を指定しているようにお見受けしますが。どうでしょう？

      $('img[src*="svg"]').attr('src', function() {
        return $(this).attr('src').replace('.svg','.png'); //拡張子を置換
      });

Comments

[Yucchi]

回答をいただきありがとうございました。
私もその認識で始めimgタグでsvg画像を貼っていたのですが、なぜかchromeのみ表示されないのでobjectタグに変更しました。
javascriptは以前書いたものをそのまま載せてしまっていたので編集しこの部分は削除しました。