Adobe Photoshopで書き出したSVGファイルがブラウザで表示されないときの原因と対処法について。
SVGファイルは、ベクター形式の画像として非常に軽量かつ解像度に依存しないため、ウェブデザインや開発において非常に便利な形式です。しかし、Photoshopから書き出したSVGがブラウザで正しく表示されない問題が発生することがあります。特にGoogle Chromeでの表示に問題が生じることが多いようです。
この問題が発生する原因と解決方法について詳しく説明していきます。
SVGファイルがブラウザで表示されない原因
Photoshopで作成したSVGファイルがブラウザで表示されない理由の一つに、SVGファイル内のデータ形式が誤って記述されていることが挙げられます。具体的には、SVGファイルのデータが次のように誤って出力されている場合があります。
data:img/pngこの形式では、ブラウザがデータをPNG形式の画像として解釈しようとしますが、実際にはSVG形式であるため、画像が表示されなくなります。これが、Google Chromeで特に問題となる主な原因です。
Photoshopで書き出したSVGが表示されない場合の対処法
この問題は簡単に修正することができます。Photoshopで書き出したSVGファイルをエディタで開き、以下のように記述を修正します。
ファイル内の「img」の部分を「image」に書き換えます。
data:image/pngこれで、ブラウザが正しくSVGを読み込むことができるようになります。
問題の原因と影響範囲
この問題は、2017年末頃からAdobe PhotoshopおよびIllustratorで発生していると報告されています。Adobeのエクスポート設定での内部データが誤って処理されるため、ブラウザが画像を適切に認識できないことが原因です。
特に以下のブラウザでの表示に影響が出やすいようです。
Google Chrome: 空白の画面が表示される。
FirefoxやSafari: ブラウザによっては正常に表示される場合もありますが、一部のバージョンで同様の問題が報告されています。
SVGファイルの再書き出し方法
修正を行う前に、Photoshop内で適切なSVGファイルを書き出すための設定を確認することも重要です。以下は、Photoshopでの書き出し時に確認するべき設定ポイントです。
エクスポート設定: SVG形式で保存するときは、「Web用に保存(SVG)」のオプションを使うのではなく、できるだけ「書き出し」→「書き出し形式」から直接「SVG」を選択するようにします。これにより、不要なメタデータやエラーの少ないクリーンなSVGが生成されやすくなります。
最適化: 不要な情報が入っていないか、またベクター情報が適切に保存されているかを確認することも大切です。場合によっては、サードパーティツール（SVGOMGなど）を使って最適化するのも有効です。
まとめ
Photoshopから書き出したSVGファイルがブラウザで表示されない場合、SVGファイル内のデータ形式が原因であることが多いです。この問題は「img」を「image」に書き換えることで簡単に修正できます。また、Adobe製品での書き出し時の設定を確認することで、こうした問題を事前に防ぐことが可能です。
