SVG Tips vol.1 - IllustratorからSVGを書き出す方法

2022年12月28日 16:53

ウェブページでベクター形式のSVG画像を使うと、拡大しても画像が荒くならない、アニメーションできるなど、様々なメリットがあります。Illustratorからイラストやロゴを適切にSVG形式で書き出して、ウェブページに挿入する方法を、2回に分けてご紹介します。
アイコンやロゴをSVG形式で納品する際に困らないよう、普段ウェブに関わらないグラフィックデザイナーさんにも知っておいていただきたい内容です。

SVGとは

SVGはScalable Vector Graphics の略で、XMLで書かれたベクター形式の画像です。

SVGを使うメリット

ウェブページでSVG形式の画像を使うと、以下のようなメリットがあります。

テキストエディターで編集可能

SVGはXML ベースのテキストファイルなので、テキストエディターで開いて編集することができます。

例えば、CSSでサイズや色を変更することが可能です。

アニメーションが可能

After Effectsなどを使わなくても、CSSやjavaScriptでアニメーションさせることができます。

拡大しても画質が劣化しない

SVGはベクター形式なので、拡大してもぼやけずくっきりと表示することができます。

高解像度のディスプレイで画像をくっきりと表示させる場合、ビットマップ画像だと各倍率ごとの画像を用意する必要がありますが、ベクター画像のSVGだと1枚だけで各倍率に対応させることが可能です。

ファイルサイズが小さい

適切に書き出せば、ビットマップ画像よりもファイル容量を小さくおさえることができます。

書き出す前の準備と注意点

「SVGファイルは軽い」とは言っても、データの内容や作り方によっては、ビットマップデータより重くなってしまう可能性もあります。
ウェブページ上で画像がスムーズに表示されるように、軽量化を心がけましょう。

線の位置

「線を内側に揃える」「線を外側に揃える」は、二重の線に分解されて書き出されるため、コードが肥大化します。
軽量化するためには、できるだけ「線を中央に揃える」で表現するようにしましょう。

グラデーション

グラデーションメッシュ、フリーグラデーションは、ラスタライズされて別途PNGファイルが生成されてしまいます。これらを使っている場合は、SVGとして書き出すことは諦めましょう。
円形グラデーション、線形グラデーションは問題なくSVGで書き出されます。

文字のアウトライン化

ロゴタイプ等で、テキストを含んでいる場合はあらかじめアウトライン化しておきましょう。
[書式]→[アウトラインを作成]

アピアランス等の多様に注意

アピアランス、線幅ツール、ブラシ、ブレンドは、自動的に分割されて書き出されるため、コードが肥大化します。
これらを多用している場合は、PNGなどで書き出した方が軽量かもしれません。

パスの単純化

アンカーポイントが多いとその分ファイルサイズも大きくなるので、余分なアンカーポイントは削除します。
[オブジェクト]メニュー→[パス]→[単純化]から、作品の見た目のイメージを損ねない程度に［曲線の精度］を下げましょう。

レイヤー名を英語にする

Illustratorのレイヤー名は、そのままSVGファイルに反映されます（具体的には、id名として出力されます）。
日本語がSVGのコードの中に入っていると不具合の原因になるので、レイヤー名は半角英数字（id名に使用できる英語、数字、一部の記号）に変更しておきましょう。

SVGの書き出し

IllustratorからSVGを書き出します。
今回はねこの肉球のアイコンを100×100pxのアートボードに用意しました。

実際に作業してみたい方は下記からIllustratorデータをダウンロードしてください。

サンプルデータ

Illustratorのメニューから、[ファイル]→[別名で保存]を選択します。

保存場所を決め、半角英数字で名前をつけます。
ファイル形式は「SVG（svg）」を選択し、「保存」ボタンを押します。

SVGオプションのダイアログボックスが表示されます。
詳細オプションが非表示になっている場合は、左下の「詳細オプション」をクリックして表示させます。

SVGプロファイル

最新版のSVG 1.1を選択します。

フォント - 文字

ファイル内にアウトライン化されていないテキストが含まれている場合に、どう処理するかという項目です。
「SVG」を選択すると、テキストはtext要素内に書き出されます。
「アウトラインに変換」を選択すると、テキストはパスに変換されます。ファイル容量は大きくなります。
「SVG」がおすすめです。
※前述の通り、ロゴなどでデザイン上必要なテキストは、準備段階でアウトライン化が済んでいることを前提としています。
※今回のサンプルではテキストを含んでいないため、何を選んでも結果は変わりません。