もくじ
問題
フリー素材をphotoshopで少し加工し書き出したsvg画像をhtmlに反映させ、Chromeで確認したところなぜか画像が表示されない問題にぶち当たりました。
これはphotoshopやillustratorで書き出したsvg画像に起こる現象のようです。
ただしPhotoshop上で作成したシェイプなら問題無いようですが、持ち込んだ素材などを加工したりして書き出したものだとChromeでは見られないようです。
HTMLやCSSは関係ない
問題はsvg画像が内包しているデータが原因なので、デベロッパーツールやHTMLなどを確認しても問題は解決できません。
SafariやFirefoxでは表示されているのでChromeが問題かと思います。
テキストエディタで書き換える
まず、svg画像をテキストエディタで開きます。英数字がたくさん並んでいて目がチカチカしますが、2行目（画面幅によってはもう少し下かも）の該当箇所を以下のように変更してください。
変更前
<image 〜（略）〜 xlink:href="data:img/png;
変更後
<image 〜（略）〜 xlink:href="data:image/png;
このxlink:href="data:img/png;に問題が隠されていました。
img/pngは参照する画像ファイルの MIMEタイプを指定しています。その指定が違うことでうまく表示できない現象が発生しています。
MIMEタイプについては記事の最後にリンクを貼っています。
なので、画像として読み込んでくれるようにMIMEタイプを指定し直します。
変更点
img/png
↓
image/png
テキストエディタを保存して再度ブラウザを確認してみましょう。
表示されていることが確認できると思います。
いつから？
結構前からこの問題は言われているようで、2017年にはすでに記事がありました。しかしphotoshopやillustratorの大元であるadobeさんは対応してくれていないのが現状ですね。
面倒ですが、少し書き換えるだけなので、この問題に遭遇した時は忘れずに行いましょう。
Chrome以外は？（'21 1月追記）
上記の問題以外でも、いろいろSVGは見えない問題があるみたいですね。こちらもお試しあれ。
