Web制作
SVG画像を作成・書き出しする方法【Photoshop／Illustrator】
2019年01月23日 8:00 2019年02月01日
おはようございます🌞hgmです。
私事ですが、年末年始のお休みでしっかり太り、体重計を見たらショックを受けました。笑
仕事に励みつつダイエットを再開しようと思っています。。
皆さんは正月太りしていませんか？笑
——————————
それでは本題へ！
今回はあまり手を出していなかった、SVG画像の作成・書き出し方法をPhotoshop・Illustrator別に調べてみました。
特にフォントを使用している場合は注意が必要なので、参考になればと思います！
▼関連記事
PhotoshopでSVG画像を作成・書き出し
作成方法
通常JPGやPNGなど、画像を作成する方法で作成します。
↓は、文字を画像として出したいので横書き文字ツールで作成しました。
書き出し方法
SVGとして書き出す方法は3つあります。
1.書き出し形式
上部メニューの「ファイル」＞「書き出し」＞「書き出し形式…」を選択するか、
対象のレイヤー（複数ある場合は画像を結合し1つのレイヤーにしておく）を右クリックし、メニューより「書き出し形式…」を選択してください。
下記の画面が表示されたら、赤枠部分の形式を「SVG」に変更し、「すべてを書き出し…」を押すとSVG形式で保存できます。
2.画像アセット
対象のレイヤー（複数ある場合は画像を結合し1つのレイヤーにしておく）の名前を「〇〇.svg」（〇〇は任意の名前）に変更し、
上部メニューの「ファイル」＞「生成」＞「画像アセット」をすると、PSDデータと同じ階層にアセットのファイルが書き出されます。
3.SVGのソースをコピー＆ペースト
対象のレイヤー（複数ある場合は画像を結合し1つのレイヤーにしておく）を右クリックし、メニューの「SVGをコピー」を選択するとSVGのソースがコピーされるので、テキストエディタ等で作成した空のSVGファイルにコピペし保存することで作成完了です。
書き出す内容にフォントが含まれている場合
SVGはもともとパスを書き出すための形式なので、フォントの場合は「シェイプレイヤー」に変換する場合があります。
対象のレイヤーをクリックし、
上部メニューの「書式」＞「シェイプに変換」を選択するか、右クリックのメニューより「シェイプに変換」を選択してください。
その後、上記の1〜3の方法で書き出せばどのブラウザでも使用したフォントが表示されます。
デモ
https://blog.universe-web.jp/hgm/svg/index1.html
IllustratorでSVG画像を作成・書き出し
作成方法
こちらも通常通りJPGやPNGなど、画像を作成する方法で作成します。
書き出し方法
SVGとして書き出す方法は3つあります。
1.保存
上部メニューの「ファイル」＞「保存」を選択します。
「ファイル形式」より、「SVG」または「SVG圧縮」で保存をクリックし、
オプションの画像の場所を「埋め込み」にし、「OK」を押すことで作成完了です。
2.SVGのソースをコピー＆ペースト
対象のレイヤー（複数ある場合は画像を結合し1つのレイヤーにしておく）を選択し、上部メニューの「編集」＞「コピー」を選択するとSVGのソースがコピーされるので、テキストエディタ等で作成した空のSVGファイルにコピペし保存することで作成完了です。
書き出す内容にフォントが含まれている場合
SVGはもともとパスを書き出すための形式なので、フォントの場合は「アウトライン化」する場合があります。
対象のレイヤーをクリックし、
上部メニューの「書式」＞「アウトラインを作成」を選択してください。
その後、上記の1、2の方法で書き出せばどのブラウザでも使用したフォントが表示されます。
デモ
https://blog.universe-web.jp/hgm/svg/index2.html
まとめ
SVGの作成・書き出し方法を簡単にまとめてみました。
SVGはテキストやアイコン等に使用すると良さそうですね！
レスポンシブサイトが当たり前の今、用途に合わせて使用していきたいと思います。
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます！
