PhotoshopやIllustratorで画像をSVG形式で書き出す方法

Webデザインでは文字だけでなく画像を使ったデザインも重要で、JPEGやPNG、GIFといった画像を利用することはよくあります。昨今はWebサイトのパフォーマンスもサイト構築には重要な要素になってきており、クオリティの高い画像やページ速度など多くのことを考えながら構築していくことが多くなってきています。

そんな中でオススメなのがSVGというベクター形式の画像データです。

SVGとは、JPEGやPNG形式のようなビットマップデータ（ラスター画像）ではなくIllustratorなどで扱うベクターデータ（ベクター形式）で、拡大したりしても画像が荒れずにきれいな状態で表示することができます。

ベクター形式は画像を数値で記録する形式なので、可変しても数値が変わるだけで表示がぼやけることもないですし拡大しても容量はほとんど変わりません。拡大・縮小での劣化がないのでレスポンシブWebデザインに向いています。
ビットマップデータと比べるとベクターデータは数値で描いているのでファイルサイズは非常に軽くなります。

ファイルサイズが軽いので、WebサイトでSVGデータを利用することで普通の画像を利用した時と比べてページの表示スピードを速くすることができます。
これはサイトを利用されるユーザーにとっても、Webページの評価のSEOにとっても重要なことです。

現在ではほとんどのWebブラウザで対応していますので、どんどん利用していいでしょう。

Can I use
https://caniuse.com/#search=SVG

SVGフォーマットとしての使い道ですが、写真のようにたくさんの画素を持つデータには向いていません。
主にテキストを使った画像、特に背景を透過処理をしている画像をSVGフォーマットで利用することになるでしょう。

それでは、PhotoshopやIllustratorでSVG形式で書き出す方法を見ていきましょう。
SVG形式はソースコードとしての利用、画像としての利用と2つありますので両方ご紹介します。

PhotoshopでのSVG形式の書き出し

変換するオブジェクトにフォントが含まれている場合は、フォントによってはテキストが切り取られて忠実に文字を形成することができない場合がありますので、シェイプレイヤーに変換する必要があります。

オブジェクトを選択した状態で、上部ツールバーの「書式」から「シェイプに変換」を選択します。

これで準備OKです。

SVGソースコード

SVGはソースコードを利用することでインラインで直接書き込めます。
アニメーションさせたりする場合には、JavaScriptやCSSを使ってインラインで直接書き込む方法をとります。

オブジェクトをシェイプレイヤーに変換しましたら、画面右のレイヤーからオブジェクトを右クリックして「SVGをコピー」を選択します。

これでクリップボードにSVGのソースコードがコピーされましたので、Webサイトで利用する場合はHTMLファイルに貼り付けます。

<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="315px" height="98px">
<path fill-rule="evenodd"  fill="rgb(236, 107, 23)"
 d="M296.195,53.514 C296.690,59.452 299.040,...,15.848 L50.568,23.481 L49.974,24.858 Z"/>
</svg>

上記のコードがSVG要素での画像処理です。