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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

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

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

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

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

解決法

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

赤枠部分に注目！！

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

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

xlink:href="data:img

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

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

xlink:href="data:image

imgをimageに変更するだけ！

簡単ですね！

まとめ

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

ぜひお試しあれ。