WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >作業効率化

PhotoshopからSVGで画像を書き出す時、みなさんどの様に行っていますか？
ベクトルスマートオブジェクトの形式になっていれば、レイヤーサムネイルをダブルクリックでIllustratorが自動起動し、IllustratorからSVGで書き出す事ができます。
ですが、Illustratorの起動に時間がかかったり、ちょっと手間がかかりますよね。
今回はIllustratorを起動させる事なく、PhotoshopからSVGを書き出す方法をご紹介いたします！

作業環境

Adobe Photoshop バージョン：26.6.1

PhotoshopでテキストをSVGとして書き出す

手順：1

テキストをSVGで書き出す場合は、必ずレイヤーの上で右クリックし「シェイプに変換」を選択してください。
この処理をしないと、各ブラウザでSVG画像を確認した時に、ブラウザ設定に準拠したフォントで表示されてしまいます。

手順：2

「シェイプに変換」したら、もう一度レイヤーの上で右クリックし、「SVGをコピー」を選択します。

手順：2

メモツールを開き、コピーしたSVGコードをペーストし、拡張子を「.svg」として保存すれば完成です。
※今回はTeraPadを使用していますが、標準で入っているメモ帳でも大丈夫です！

Photoshopで画像をSVGとして書き出す

「ベクトルスマートオブジェクト」も「スマートオブジェクト」も、レイヤーの上で右クリックし、「レイヤーをラスタライズ」を選択。
その後「SVGをコピー」し、テキストをSVG画像で書き出した時と同様にメモツールにペーストし、拡張子を「.svg」とすればSVG画像の完成です！

終わりに

作業環境によってはPhotoshopとIllustratorを同時に起動するとPCの動作が悪くなるなどあると思います。
この方法であれば、Illustratorを開く必要もなく、Photoshopで編集した状態の画像がそのままSVG画像にできるので、かなり便利ですよ！
ぜひ試してみてください。