Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

昨今Retinaディスプレイ対応などを目的として画像・アイコン・見出しのテキスト等にSVGを使うことが増えています。
SVGを作成する際はIllustratorを使うことが多いですが、PSDで作成されたデザインカンプをSVG出力したいこともありますよね。
今回はPhotoshopからPSDファイルを操作してSVG書き出しを行った際にハマったので、注意点を共有します。

実例

Photoshopでこんな見出しをSVGで書き出すときに…
スクリーンショット 2016-10-13 17.15.13.png

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

文字色を赤から白に変更しようと、「レイヤースタイル」→「カラーオーバーレイ」機能で白く塗りつぶしました。
スクリーンショット 2016-10-13 17.28.00.png
スクリーンショット 2016-10-13 17.16.35.png
すると、スクショでは分かりにくいですが、微妙に元々の赤い色が外側にはみ出してるように見えます。

書き出し方法に注意

それに普通に.jpgや.pngを書き出すときと同じように「書き出し」→「書き出し形式」で保存しようとすると右上に「フォントが想定通りレンダリングされない場合があります」と注意書きが出ます。
スクリーンショット 2016-10-13 17.16.58.png
実際に、このまま書き出したSVGファイルはSafariでフォントが正しく表示されない(ブラウザごとの標準フォントで描画されてしまう)問題が発生しました。
きちんと表示されないSVGファイルをテキストエディタで開いて詳しく見てみると、font-sizeやfont-familyなどフォントとしての情報が記載されている代わりにパス(path)データがありません。
スクリーンショット 2016-10-15 10.51.47.png

解決方法

解決方法は以下のとおり。
Photoshopで当該のレイヤーを選択した後、「書式」→「シェイプに変換」
スクリーンショット 2016-10-13 17.30.16.png
この操作を行った後に先ほどと同じように書き出し操作を行うと、「フォントが想定通りレンダリングされない場合があります」の注意書きは出ず、きちんとヴェクター画像として書き出し・保存ができています。

テキストエディタで確認しても、先ほどと違ってきちんとパスデータが記録されていますね。
スクリーンショット 2016-10-15 10.52.03.png
なお、赤い色が白い色の外側に微妙にはみ出してしまっていた問題も、<style>タグ内のfill(塗りつぶし色)をfill: #d20000;からfill: #fff;に書き換えて解決できました!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした