share facebook facebook2 twitter menu hatena pocket slack

2016.10.24 MON

PhotoshopでSVG書き出しを行う際の注意点

工藤 響己

WRITTEN BY工藤 響己

昨今Retinaディスプレイ対応などを目的として画像・アイコン・見出しのテキスト等にSVGを使うことが増えています。

SVGを作成する際はIllustratorを使うことが多いですが、PSDで作成されたデザインカンプをSVG出力したいこともありますよね。

今回はPhotoshopからPSDファイルを操作してSVG書き出しを行った際にハマったので、注意点を共有します。

実例

Photoshopでこんな見出しをSVGで書き出すときに…

1762681b-0b7d-ed0f-8740-2a729bcc01d0

カラーオーバーレイに注意

文字色を赤から白に変更しようと、「レイヤースタイル」→「カラーオーバーレイ」機能で白く塗りつぶしました。

c4162299-b86a-3d75-85f4-796ec5057424
9049056c-deba-5c14-dddb-4278a156eb11

すると、スクショでは分かりにくいですが、微妙に元々の赤い色が外側にはみ出してるように見えます。

書き出し方法に注意

それに普通に.jpgや.pngを書き出すときと同じように「書き出し」→「書き出し形式」で保存しようとすると右上に「フォントが想定通りレンダリングされない場合があります」と注意書きが出ます。

6c3fb580-9eea-4f61-e6eb-8b881ce145a1

実際に、このまま書き出したSVGファイルはSafariでフォントが正しく表示されない(ブラウザごとの標準フォントで描画されてしまう)問題が発生しました。

きちんと表示されないSVGファイルをテキストエディタで開いて詳しく見てみると、font-sizeやfont-familyなどフォントとしての情報が記載されている代わりにパス(path)データがありません。

19e215ed-3522-f202-afaf-9be98b0a20d1

解決方法

解決方法は以下のとおり。
Photoshopで当該のレイヤーを選択した後、「書式」→「シェイプに変換」
aae7dbfe-3fb9-dc60-eadc-36eff846d70e

この操作を行った後に先ほどと同じように書き出し操作を行うと、「フォントが想定通りレンダリングされない場合があります」の注意書きは出ず、きちんとヴェクター画像として書き出し・保存ができています。

テキストエディタで確認しても、先ほどと違ってきちんとパスデータが記録されていますね。

1998b3ea-126f-c585-423f-3e8de1cd8fbf

なお、赤い色が白い色の外側に微妙にはみ出してしまっていた問題も、<style>タグ内のfill(塗りつぶし色)をfill: #d20000;からfill: #fff;に書き換えて解決できました!

元記事はこちら

PhotoshopでSVG書き出しを行う際の注意点

工藤 響己

工藤 響己