Photoshopでのsvg書き出しメモ

デザイン作成時

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

書き出し時

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

OK例

NG例

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

注意事項

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

ちなみにXDの場合

ほとんど気にしなくてOK。

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

「内部CSS」無し

「内部CSS」有り

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

 

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