Webデザイン Photoshop CCの画像アセット機能でSVGを書き出す裏技

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

var _config = {
        "svg-enabled": true,
        "webp-enabled": true