大阪のホームページ制作会社

1.【SVG入門編】まずは簡単な単色アイコンから

まずは単色アイコンをSVGで書き出します。
すでに色々なサイトで作成方法が紹介されていますので、その中からStocker.jpさんの記事を参考に作成していきます。
今回ご紹介するPhotoshopを使用したSVGの作成については、Photoshop CC 2014のみの対応となります。
それ以前のPhotoshop CCの場合「generator.json」が必要になります。「generator.json」については上記Stocker.jpさんの記事をご確認ください。
また、Photoshop CS6以下はこの方法を使用する事ができませんのでご注意ください。

それでは作成していきましょう！
まず最初にPhotoshopでカスタムシェイプツールなどを使用して上記の様なシェイプを作成します。

次に作成したシェイプレイヤーの名前を「ファイル名.svg」に変更します。

ファイル名を変更したら、ファイル＞作成＞画像アセットにチェックを入れてファイルを保存します。

すると、保存したpsdファイルと同じフォルダの中に「○○-assets」というフォルダが作成され、その中にSVGファイルが書き出されます。

ファイルは書き出されましたがこのままだと真っ黒な星になってしまいますので、書き出されたSVGファイルをIllustratorで開いて色を付けます。（Photoshop CC 2015ではこの作業が不要なようです。知らなかった！）
色を付けて保存したら完成です！

完成したSVGは下記からご確認ください。拡大しても画像が荒れない事が分かります。
＞ DEMO

2.【SVG入門編2】複雑な多色アイコンでも○○なら大丈夫！

上記の様な一見複雑な多色アイコンでも各パーツごとにシェイプレイヤーが分けられている場合は、1と同じ方法で書き出すことができます。

1と違うのはファイル名を変更するレイヤーです。1ではシェイプレイヤーの名前を変更しましたが、今回はシェイプレイヤーをまとめたレイヤーグループの名前を変更します。
後は1と同じように書き出すだけです。

書き出されたSVGをIllustratorで開きレイヤーを確認すると、Photoshopのシェイプと同じく各パーツごとに分かれているのが分かります。
パーツごとに色を付けて保存したら完成です。

完成したSVGは下記からご確認ください。
＞ DEMO

3.【SVG中級編】IllustratorでSVGを書き出す

1や2の様なシェイプをSVGで書き出す場合はアセット機能を使用して書き出すことができますが、Photoshopで入力したテキストやシェイプに境界線を付けたデータをSVGで書き出したい場合もあるかと思います。
例えば先方からいただいたロゴデータの下に会社名を入力しそれらを一つのファイルで書き出したいとか、アイコンの周りに境界線を付けて書き出したいとか。
その場合アウトライン化されていないデータが含まれるとアセット機能を使用してSVGを書き出すことができません。

上記の様なデータをアセット機能で書き出してみると…

書き出されたSVGと同じフォルダ内にエラーテキストが書き出されています。
またSVGをIllustratorで開いてみるとPhotoshopで入力したテキストの位置がずれ境界線も反映されていません。
この場合テキストや境界線をアウトライン化してPhotoshopに貼り直せばアセット機能で書き出すことができますが、今回はIllustratorでSVGを書き出したいと思います。

まずはPhotoshopで作成したデータをEPSで保存してIllustratorで開きます。
その際、余分なデータが含まれている事がありますので削除しておきます。
一旦この状態でSVGで保存してみましょう。
アートボードツールのプリセットからオブジェクト全体に合わせるを選択しアートボードを変更します。
その後ファイル＞別名で保存＞ファイルの種類：SVGを選択して保存します。

何かこれでも問題なく出来ているような気がしなくもないですが、実際データを見てみると上記のように吹き出しの周りが荒れていたり、右下のパターンのように色が端まで塗られていなかったりしています。

これはPhotoshopで作成したデータをEPSで保存した場合に勝手にクリッピングマスクや複合パスが作成されてしまっていることが原因ですのでどちらも解除していきます。
オブジェクトをすべて選択した状態でオブジェクト＞クリッピングマスク＞解除を選択してください。
複合パスも同じ手順でオブジェクト＞複合パス＞解除を選択します。

すべて解除できたらレイヤーの中にある画像レイヤーを削除します。

すると何も色のついていないパスのデータのみになりますので、各パーツごとに色を塗っていきます。
色が塗れたらSVGで保存してブラウザで確認してみます。

今度はブラウザいっぱいに拡大しても問題無く表示されました！
ちょっと手間が掛かりますがアセット機能でうまく書き出されない場合はこの方法を試してみてはいかがでしょうか。

完成したSVGは下記からご確認ください。
＞ DEMO

4. まとめ

今回この記事を書いたのは、久しぶりにコーディングをした際に自分が手間取った事を覚書として残しておこうと思ったからです。
なのですごく偉そうに書いていますが、私も「SVG初心者」の1人です。
今回はSVGをimgタグを使用し画像として扱う場合を前提に記事を作成していますが、今後もSVGを使用し理解を深めていきますので、いつか今回紹介しなかったSVGコードの使用方法もご紹介できればと思います。

また社内ではSVGの作成を切っ掛けにコーディングする際に効率のよいデザインデータの作成方法について考える事にもなりました。
新しい技術を取り入れる時には色々な問題点も見えてきますので、今後も社内で何かを考える切っ掛けになるような事があればそちらも併せてご紹介できればと思います。

余談ですが、今回多色アイコンの例に使用しているキャラクターはIMDオフィシャルキャラクターの「メデタマ」です。
SVG作成の方法のついでに覚えてもらえると嬉しいです♪