SVG はモダンなWebブラウザーで表示できるベクター画像形式で、Retina ディスプレイや、タブレットでピンチアウトで表示拡大した時にも荒く見えないため、これから使用する機会が増えそうな画像形式です。
SVG は Illustrator で書き出すことができますが、これまで Photoshop ではプラグインなどを使わなければ SVG を書き出すことができませんでした。
しかし、Photoshop CCの「画像アセット」機能を使用して SVG を書き出す裏技を見つけたので紹介します。
準備
下記のファイルをダウンロードします。
Macの場合
Finder でメニューの［移動＞ホーム］を選択し、ホームフォルダを表示します。
そこに、generator.json ファイルを移動またはコピーします。
Windowsの場合
ユーザーフォルダ（ユーザー名のフォルダ）に移動します。
そこに、generator.json ファイルを移動またはコピーします。
画像アセット機能の使い方
Photoshop CC が起動している場合は、一旦終了して再度起動します。
新規カンバスに「カスタムシェイプツール」などを使い、シェイプレイヤー（ベクター形式のレイヤー）を作成します。
「シェイプ 1」などのレイヤー名を書き出したいファイル名に変更し、レイヤー名の最後に .svg をつけます。
［ファイル＞保存］もしくは「別名で保存…」で Photoshop フォーマットで保存します。
［ファイル＞生成＞画像アセット］にチェックを入れます。
先ほど Photoshop データを保存したフォルダー内に、「◯◯-assets」のような名前のフォルダーができているはずです。
その中に、SVG ファイルが保存されています。
WebPにも対応
レイヤー名の最後に .webp をつけると、WebP 形式でも画像を書き出すことができます。
WebP とは Google が開発しているオープンな静止画フォーマットで、簡単に言うと「JPEG の、もっと圧縮率高いやつ」です。
JPEG の場合と同じく、レイヤー名で拡張子の後ろに数字をつけることで画質を設定できます。
（例: 画質70%にしたい場合「shape.webp7」 画質55%にしたい場合「shape.webp55%」）
現在は Google Chrome と Opera くらいしか対応していないためあまり使うことはないと思いますが、将来的には使うことがあるかもしれません。
参考: Can I use… WebP
どうやって見つけたのか
Photoshop CC の生成（Generator）機能はソースコードが GitHub で公開されており、誰でも自由に閲覧することができます。
参考: adobe-photoshop/generator-assets · GitHub
Generator にはそろそろ SVG の書き出しができるようになるのではと思っていたので、試しにレポジトリ内検索で「svg」というキーワードで検索したところ以下のような行を見つけました。
var _config = {
"svg-enabled": true,
"webp-enabled": true
どうやら「”svg-enabled”: true」と書いた JSON ファイルのようなものを用意すれば Generator からの SVG 書き出しができそうだと推測できたのですが、JSON ファイルをどこに置けばよいのかまでは分からなかったため「Photoshop generator “svg-enabled”: true json」などのキーワードで Google 検索すると下記記事を見つけ、ユーザーフォルダーに generator.json を置けばよいということが分かりました。
参考: Generate SVG with Photoshop CC (beta) | Creative droplets
こちらの記事では SVG についてのみ触れられていましたが、「”webp-enabled”: true」も追記すると WebP にも対応できることがわかったため、当記事で配布している generator.json は「”webp-enabled”: true」を追記したものにしています。
