Photoshopで書き出したSVGファイルがブラウザで表示できない原因と対処法

Photoshopで書き出したSVGファイルが、ブラウザだと真っ白で表示されない。私も実際にハマったことがあって、ローカルのプレビューやIllustratorでは開けるのに、いざChromeに読み込ませると何も映らない、という状態でした。

SVGはベクター形式で軽く、拡大しても劣化しないのでWeb制作では手放せない形式です。だからこそ「書き出したのに表示できない」となると地味に困ります。この問題、実は原因がひとつではありません。ファイル自体に問題があるパターンと、ファイルは正しいのにサーバー側の設定で弾かれているパターンがあって、切り分けないと直しようがないんですよね。

この記事では、私が実際に踏んだ落とし穴を軸に、原因ごとの対処法を整理していきます。

まずは原因の切り分けから

先に切り分けの考え方だけ押さえておくと、あとがラクです。

SVGファイルをブラウザにドラッグ&ドロップして直接開いてみてください。単体では表示されるのに、Webページに<img>やCSSのbackgroundで読み込むと表示されないなら、サーバーのMIMEタイプ設定が怪しいです。逆に、単体で開いても真っ白なら、SVGファイルそのものの中身に問題があります。

この2方向で原因が分かれるので、順番に見ていきます。

原因1：Photoshopが埋め込む「data:img/png」の綴り間違い

Photoshop特有の、そして私がまさに引っかかったのがこれです。

Photoshopはもともと写真（ラスター）を扱うソフトなので、SVGとして書き出しても、中身にはビットマップ画像がbase64で埋め込まれることがよくあります。このとき、埋め込み画像の記述が次のように出力される場合があるんです。

data:img/png

このimg/pngという綴りが曲者で、正しいMIMEタイプはimage/pngです。ブラウザはこの誤った文字列を画像として解釈できず、結果として何も描画されません。Chromeで特に真っ白になりやすいのはこのためです。Adobeのコミュニティやツール開発側でも、Photoshopの書き出したSVGが正しくレンダリングされないという報告が以前から上がっています。

対処法：img を image に書き換える

直し方はシンプルで、書き出したSVGファイルをテキストエディタで開き、「img」の部分を「image」に一括置換するだけです。

data:image/png

これでブラウザが埋め込み画像を正しく認識し、SVGが表示されるようになります。ファイル内に複数箇所あることもあるので、置換機能でまとめて直すのが確実です。

そもそもラスター画像が埋め込まれている時点で「SVGにする意味あるかな？」という話でもあるので、ロゴやアイコンなど本来ベクターであるべきものは、後述するクリーンな書き出し方法を使うか、Illustratorで書き出し直すのがおすすめです。

原因2：サーバーのMIMEタイプ設定（image/svg+xml）

ファイル単体では表示できるのに、アップロードしてWebページに載せると表示されない。これはサーバーがSVGを画像として返してくれていないケースです。

サーバーがSVGをtext/xmlやtext/plainなどの間違ったMIMEタイプで返すと、Chromeでは「Resource interpreted as Image but transferred with MIME type text/xml」といった警告が出て、画像として扱われません。SVGの正しいMIMEタイプはimage/svg+xmlです。

対処法：Apache（.htaccess）の場合

Apacheサーバーなら、SVGを置いているディレクトリか、その親ディレクトリの.htaccessに次の行を追加します。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

1行目でsvg/svgzを正しいMIMEタイプに割り当て、2行目はgzip圧縮したsvgz用の設定です（svgzを使わないなら1行目だけでも構いません）。

対処法：IIS（Windowsサーバー）の場合

Windows系サーバーなら、ルートにweb.configを置いてSVGのMIMEマッピングを追加します。

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>

最近のApacheでは初期状態でSVGのMIMEタイプが設定済みのことも多いので、まずはブラウザの開発者ツール（ネットワークタブ）でSVGのContent-Typeを確認し、image/svg+xmlになっていなければ上記を追加する、という流れが確実です。

原因3：viewBox や width / height が無くて0×0になる

もうひとつ意外と多いのが、SVGのサイズ指定が抜けているパターンです。

SVGにwidth・height・viewBoxのいずれも無いと、ブラウザ上では0×0サイズと解釈され、事実上見えなくなることがあります。特にレスポンシブなレイアウトの中でCSSでサイズを効かせようとしても、viewBoxが無いと座標系が定まらず、拡大縮小がうまくいきません。

対処としては、SVGのルート要素にviewBoxを持たせるのが基本です。

<svg viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

viewBoxさえ入っていれば、widthかheightの片方をautoにしておくことで、アスペクト比を保ったまま親要素に合わせて伸縮してくれます。レスポンシブに使いたいなら、固定のwidth/heightを外してviewBoxだけ残す、という考え方が扱いやすいです。

原因4：文字コード・エンコードの問題

頻度は高くないものの、文字化けが表示不良につながることもあります。SVGはXMLなので、先頭のXML宣言と実ファイルのエンコードがズレていると解釈エラーになりがちです。

エディタで開いたときに文字化けしていたら、UTF-8（BOMなし）で保存し直すのが基本の対処です。冒頭に<?xml version="1.0" encoding="UTF-8"?>の宣言があるかも合わせて確認しておくと安心です。

現行Photoshop（CC / 2024・2025）でのSVG書き出し手順

実は近年のPhotoshopは、SVG周りの書き出し方法が変わっています。従来あった「ファイル」→「書き出し」→「書き出し形式…」のダイアログから、SVGフォーマットの選択肢が外れているんですね。そのため「書き出しメニューにSVGが無い」と戸惑う人が増えています。

現行バージョンでSVGを書き出すには、主に次の方法があります。

1. 従来の書き出し形式を復活させる
「編集」→「環境設定」→「書き出し」で「従来の“書き出し形式”を使用」にチェックを入れると、以前のダイアログからSVGを選べるようになります。

2. 画像アセットを使う
レイヤー名の末尾に.svgを付けておくと、「ファイル」→「生成」→「画像アセット」を有効にした状態で、指定フォルダに自動でSVGが書き出されます。

3. レイヤーを右クリックして「SVGをコピー」
対象レイヤーを右クリックして「SVGをコピー」を選ぶと、SVGのコードがクリップボードに入ります。テキストエディタに貼り付けて拡張子.svgで保存すればファイル化できます。

どの方法でも、Photoshopから出したSVGは前述のとおり中身が最適とは限りません。書き出したあとにSVGOMGのような最適化ツールを通すと、不要なメタデータが削れてファイルも軽くなり、表示トラブルも起きにくくなります。

まとめ

Photoshopで書き出したSVGがブラウザで表示されないときは、まず「ファイル単体で開けるか」で原因を切り分けるのが近道です。

単体で開けないなら、Photoshop特有のdata:img/pngの綴り間違いをdata:image/pngに直す、あるいはviewBoxやエンコードを確認する。ページに載せたときだけ表示されないなら、サーバーのMIMEタイプをimage/svg+xmlに設定する。この2方向を押さえておけば、たいていのSVG表示トラブルは解決できます。私自身、原因が分かってしまえば置換ひとつで直った拍子抜けするような問題だったので、真っ白のまま悩んでいる人の助けになれば嬉しいです。