SVG画像が表示されない時の対処法【Photoshop・Illustratorで書き出したファイル】

SVG画像が表示されない時の対処法【Photoshop・Illustratorで書き出したファイル】

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • imgタグのsrc属性で読み込んだSVG画像が表示されなくて困っている
  • PhotoshopやIllustratorで書き出したSVGファイルがなぜかWebページで表示されない…

という方のお悩みを解決します!

この記事で紹介する「SVGファイルのソースコードを修正する対処法」を行えば、ほんの数秒でSVG画像が表示されない現象を解決することができます!

なぜなら以前、同じバグに遭遇して解決できたぼくが対処法を紹介するからです!

それでは参りましょう〜!

解決法

該当のSVGファイルをお使いのテキストエディタで開きましょう!

svgが表示されない時のファイル

赤枠部分に注目!!

ぐしゃぐしゃとコードが表示されますが、気にしないでソースの2〜3行目を見てみましょう。

すると以下のコードが見つかります。

svgファイル
xlink:href="data:img

「xlink:href=”data:img」この子が諸悪の根源です!

正しくは以下のように修正してください。

svgファイル
xlink:href="data:image

imgをimageに変更するだけ!

svgが表示されない時の対処法

簡単ですね!

まとめ

ご紹介したやり方を実践すれば、いとも簡単にSVG画像が表示されない現象を解決することができます!

ぜひお試しあれ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です