SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。
この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。
なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 03の内容を一部抜粋し、この記事用にリライトしたものです。
やったほうがよいこと
曲線のアンカーポイントを減らす
ブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるので、Illustratorの機能を使用して簡単に減らしましょう。［選択］ツールなどでオブジェクトを選択し、［オブジェクト］メニューから［パス］→［単純化］を選択し、［単純化］ダイアログボックスで［曲線の精度］を下げます。
※注意: ［曲線の精度］を下げるほどファイルサイズを小さくすることができますが、曲線の形も元と異なる形になってしまうので気をつけましょう。
パスを合体する
たくさんの図形をグループ化している場合、複数の図形を選択してパスファインダーで［合体］をクリックして1つに合体してみましょう。ファイルサイズが小さくなる場合があります。
多くの場合、option（Alt）キーを押しながら［合体］ボタンをクリックして［複合シェイプ］にしたほうがサイズが小さくなります。複合シェイプは再編集もしやすいためおすすめです。
注意点として、パスファインダーで合体した場合、色はオブジェクト全体にしか指定できないので注意しましょう。
やらないほうがよいこと
- 写真を含むオブジェクトをSVGで書き出す: ファイルサイズがムダに大きくなりすぎます。
- 大量にアンカーポイントがある: ファイルサイズが大きくなりすぎたり、ブラウザの表示が遅くなる場合があります。上述のパスの［単純化］をしてもファイルサイズが大きい場合は、SVG以外のファイル形式を検討しましょう。
- 高度な［アピアランス］による効果の適用: 分割されたりラスタライズされる場合があります。ファイルサイズが大きくなったり、意図しない表示結果になる可能性があります。
- ［ドロップシャドウ］や［ぼかし］のような効果をかける:
表示されなかったり、効果がラスタライズされてSVGファイルの容量が大きくなることがあります。
HTTP/2対応のサーバーを利用する
たとえばWebアプリケーションなどでは細かいアイコンがたくさん必要になることがあります。
そのような場合、サーバー側で「HTTP/2」を利用することをおすすめします。現在多くのブラウザはHTTP/2という新しいプロトコルに対応しています。
HTTP/2ではたくさんの細かい画像があっても、読み込みの速度が遅くなりにくいです。
モダンなレンタルサーバーであれば、多くはHTTP/2に対応しています。たとえば、「ロリポップ！」や「さくらのレンタルサーバー」などはすでに対応しています。
WebページのコンテンツがHTTP/2で配信されているか確認する
Webページで、URLが「file」や「http」ではなく「https」から始まるもの（一般的にhttpの場合はHTTP/2でない場合が多い）をGoogleChromeで表示し、以下のようにします。
command+option+i（WindowsはF12）キーを押して開発者ツールを表示します。［Network］タブをクリックし、command+R（F5）キーを押し、ファイルの一覧のようなものが表示されることを確認します。
見出しの［Name］部分を右クリックして［Protocol］を選択すると、［Protocol］という列が表示されます。
サイト内のHTML・CSS・画像などの［Protocol］の列が［h2］または［http/2］のように表示されているかを確認します。［http/1.1］と表示された場合はHTTP/2で配信されていません。