レンタルサーバーにアップしたSVGファイルが表示されず困っています。

Question

XFREEというレンタルサーバーにアップしたSVGが壊れた画像としてChromeで正しく表示されていません。
WEBサイトのヘッダーのアイコンとして以下のように表示させようとしています。

<div class="header-left align-items-center"> <img src="img/giftbox.svg" width="32" height="32"> </div> （以下の画像）  右クリックして新規タブで開くと正しく表示されました。

ローカル環境ではきちんと表示されているためサーバーの設定の問題かと調べたところ、
以下のコードをhtaccessファイルに記述すればよいとあったのですが機能しませんでした。

他に原因など考えられるものがあれば教えていただけないでしょうか？

Comments

[m.ts10806]

＞Chromeで
どのように表示させようとしているのでしょうか。

[Fiverainy]

WEBサイトのヘッダーのアイコンとして以下のように表示させようとしています。
<div class="header-left align-items-center">
<img src="img/giftbox.svg" width="32" height="32">
</div>

[m.ts10806]

質問本文に追記してください。
もう1点確認いただきたいのですが、
Chromeであれば「ソースを表示」から画像がリンクになっていると思います。
要は画像にURL直アクセス可能なのですが、そのリンククリックするとどうなりますか？

[m.ts10806]

画像右クリックで「画像を新しいタブで開く」とかでも良いです。

[m.ts10806]

要は「パスが正しいか」を確認したいのと「ちゃんとアップロードできているか」を確認したいのです。
その「壊れた画像」というのは本当に画像が壊れたわけではなく、ちゃんと画像が参照できない（指定が間違ったとか）時に表示されるアイコンなので、実際に壊れたわけではありません。

[Fiverainy]

質問本文にも記載していますが、画像右クリックで新規タブで開くと正しく表示されます。
ソースを表示からアクセスしても表示されます。

[m.ts10806]

見落としていました。失礼しました。
となるとキャッシュっぽい気がします。スーパーリロード試してみてください。

[Fiverainy]

スーパーリロードとやらを試したところきちんと表示されました！ありがとうございます！！
回答して頂ければベストアンサーに選ばせて頂きます。もしそのままでよければ自己解決で解決済みにいたします。

[m.ts10806]

おそらく時間が前後していますが、既に回答していますので、そちらを

Answer 1

キャッシュクリアのスーパーリロードもそうですが、下記も試してみてください。

• SVG形式の画像ファイルを表示するの#objectタグを利用して表示する

• SVGをcanvasで使う

Comments

[Fiverainy]

objectタグは初耳でした。次回以降こちらも試してみます。
本当にありがとうございます。