【Adobe Illustrator】イラストレーターでsvg画像を作成する方法

今回は、イラストレーターを使ってsvg画像を作成する方法を紹介します。

【Adobe Illustrator】イラストレーターでsvg画像を作成する方法

Adobeから販売されている、Adobe Illustrator（イラストレーター）は、ポスター・チラシ、名刺・ショップカード、キャラクター・ロゴなどのあらゆるデザインを作成できるデザイン作成ソフトで、今回紹介するsvg画像もこのイラストレーターを使う事で作成できます。
さっそく、操作方法を説明していきます。

イラストレーターでsvg画像を作成する手順

svg画像を作成するには、他のデザインデータを作成する時と同様、保存できる前段階まで進めておきます。

デザインが確定したら、メニューバーより「ファイル」→「保存」または「ctrl＋sキー（windows）」を押して、保存ウィンドウを開きます。ファイルの名前を入力して、ファイルの種類（拡張子）を「svg」にして保存します。次に表示されるsvgオプションはそのままで「保存」または「OK」をクリックします。
これでsvg画像の保存・作成が完了しました。

ちなみに、保存する時にsvgの下にあった「SVGZ（svg圧縮）」については、次項で説明します。

イラストレーターで保存できる「SVGZ（svg圧縮）」とは？

「SVGZ（svg圧縮）」は、イラストレーターで保存する時に設定できる形式の一つで、その名の通り、svgを圧縮した形式になります。svgと同じく、バージョンの古いブラウザでなければ、ほとんどの主要ブラウザ（Google Chrome、Firefox、Safari、Internet Explorerなど）に対応している為、svgに比べても要領の軽いこのsvgz形式はおすすめです。
ただ、svgとは違い、gzip形式（いくつかあるファイル圧縮形式のひとつ）のファイルになり、ブラウザ対応とは別の理由で表示ができない可能性もありますので、表示されなかった場合は、FTPサーバー内の「.htaccess」ファイルに、

の2行を追加して、表示不具合を回避しましょう。

まとめ

今回は、イラストレーターでsvg画像を作成する方法とsvgz形式の説明を紹介しました。
Webサイトに表示する各画像も表示箇所によって向き不向きがありますので、確認してから画像を作るようにするといいと思います。