この記事は、Photoshopで書き出したSVGファイルをWEBで表示させようとしても表示されなくて困っている方向けの記事です。
目次
表示されないブラウザ
Google ChromeのブラウザでSVGファイルが表示されないという問題が発生しています。
その他ブラウザ(Internet Explorer、Firefox、Safari等)では、表示されることが確認されています。
対処方法
Photoshopで書き出したSVGファイルをテキストエディターなどで開いてください。
おそらく、下記の画像のように表示されると思います。
ソースコードの中から
コード
xlink:href="data:img/〜となっている箇所を探してください。
上記の箇所を
コード
xlink:href="data:image/〜に変更して保存してください。
これでPhotoshopから書き出したSVGファイルをWEBで表示させることができるようになっていると思います。
テキストなどを書き出すときは注意
テキストや長方形ツールなどのレイヤーを書き出す際は、まずはスマートオブジェクトに変更してから、SVGファイルで書き出すようにしてください。
スマートオブジェクトに変更しないと上記の画像のようなソースコードにはなりません。
STEP1
いつも通り書き出す
いつも通りにPhotoshopでSVGファイルの書き出しを行ってください。
STEP2
書き出したSVGファイルをエディタで開く
Dreamweaverやテキストエディタなどお使いのエディターで開いてください。
xlink:href=”data:img/〜の部分をxlink:href=”data:image/〜に変更する
xlink:href=”data:img/〜となっている箇所を探し、xlink:href=”data:image/〜に変更し保存してください。
STEP4
サーバーにアップロード
保存したSVGファイルを公開するサーバーにアップロードして表示を確認してください。
今後はChrome側が対応・・・？
Google Chrome側で今後は対応すると噂がありましたが、2021年現在でも対応はされていません。
一括で書き出した際にかなり手間がかかるので、いずれは、対応されることを願いたいです。
最後に
制作側としては、ブラウザごとの対応をするだけでも面倒ですが、
なんど書き出しなおしても表示されずに困っていた方の解決作になればと思います。
