Photoshopでのsvg書き出しメモ

デザイン作成時

  • 基本はシェイプの「塗り」で作成する。
  • フォントも使用可。ただし、書き出し時に「シェイプに変換」する必要がある。
  • 「レイヤー効果」は使わない。
    ※「レイヤー効果」でボーダーを付けるなどするとうまく書き出しできない場合がありました。
    ※「レイヤー効果」のカラーオーバーレイを使って色を変更して書き出すと、元のシェイプの色がアイコンのフチから見えたりしていました。

書き出し時

※下記を実行する場合はPSDデータそのものやレイヤーは必ずバックアップを取っておきましょう。

  • 複数シェイプで作成されている場合で、シェイプレイヤーごとに重なり部分がある場合は、重なるシェイプレイヤーを選択して右クリック⇒「シェイプを結合」する。
    (これをしないとうまく重なり部分が表示されない)
  • 1つのシェイプで作成されていても、イラレで言うところのアウトライン化されてないと書き出し時にうまく重なり部分が表示されません。その場合はシェイプツールの「シェイプコンポーネントを結合」するとうまく表示されます。
  • レイヤーマスクは使えない。アイコンの周りに余白を付けたいなどサイズ調整したいときはそのサイズ調整用の透明のシェイプを置くなどで対応する。
  • フォントは「シェイプに変換」する。
    フォントが自分のPCに無いと「シェイプに変換」できないので、無い場合はフォントをインストール後Photoshopを再起動してから再度変換を試してみてください。

OK例

NG例

重なり部分がうまく表示されない

注意事項

  • 小さいアイコンや細いシェイプがあるとピクセルが滲んで見える場合がある。(大きく表示すると問題なかったりする)
  • スマートオブジェクトは使用しない。
    スマートオブジェクトを使用して書き出すと、拡大するとボケてしまうsvgの意味があまり無い画像ができます。
    また、事情でどうしても作成したい場合でも、テキストエディタで1つずつ開いてソースの中のdata:img ⇒ data:imageにしないとブラウザで表示されなかったりします。
  • 「レイヤーをラスタライズ」は使用しない。
    スマートオブジェクト同様、拡大するとボケてしまいます。

ちなみにXDの場合

フォント情報がないsvgを作成する場合は、ほとんど気にしなくてOK。

svg書き出し時に「スタイル」の項目で「内部CSS」を選択して書き出すと、別途svgファイル内でstyleタグが表示される。色味なら「内部CSS」じゃなくても変更できるし、あとから大きく変更するなら別のsvgファイルを作成すると思うので、個人的にはどちらで書き出しても問題ないかと思います。

フォントを書き出す場合、Photoshop同様アウトライン化する必要があります。アウトライン化しないと、他の環境で見ると意図しないフォントデザインになっていることがあります。
書き出し時に「パスオプション:パスのアウトライン」というのがありますが、これにチェックを入れてsvgで書き出ししてもフォントはアウトライン化されてませんでした。

アウトライン化したいフォントを選択し、
オブジェクト>パス>パスに変換
からアウトライン化できます。

「内部CSS」無し

「内部CSS」有り

もし間違いあればご指摘いただけると嬉しいです。

 

タイトルとURLをコピーしました