[SVG] SVG作成時に注意すること

[manabuyasuda]

SVGとして使うアイコンやロゴなどを_作るとき_に気をつけることをまとめています。

通常の画像と違いコード(XML)として書き出されるので、作り方によってIllustratorの指定を無視したり変換されることによって意図しないデザインとして出力されたり、ファイルサイズを増やしてしまう原因になります。

Illustratorの基本設定

Illustratorで作成する場合の基本的な設定です。一部は使いやすいように変更してもかまいません。

環境設定の初期設定。

• [単位]はすべてピクセル
• [一般]の[キー入力]は0.5px
• [一般]の[プレビュー境界を使用]にチェックを入れる（［整列］パネルからでも設定可能）
• [テキスト]のトラッキングは10/1000em（letter-spacing:0.1;に相当）
• [ガイド・グリッド]の[グリッド]を10px、[分割数]を2px

新規ドキュメントの初期設定。

• [単位]はピクセル
• [カラーモード]はRGB
• [ラスタライズ効果]はスクリーン（72ppi）
• [プレビューモード]はピクセル
• [新規オブジェクトをピクセルグリッドに整合]のチェックを外す

アートボードの初期設定。

• [ウィンドウ]メニューの[ワークスペース]を[Web]
• [表示]メニューの[定規]の[定規を表示]のチェックを入れる（command + R）
• [表示]メニューの[定規]の[アートボード定規に変更]のチェックを入れる（command +　option + R）
• [表示]メニューの[スマートガイド]のチェックを入れる（command + U）
• [表示]メニューの[ピクセルプレビュー]のチェックを入れる（command + option + Y）
• [アートボード]パネルの[アートボードオプション]の[X:]と[Y:]をそれぞれ0pxにする（viewBoxの起点を左上にするため）
• [アピアランス]パネル（shift + F6）の［新規アートに基本アピアランスを適用］のチェックを外す
• [線]パネルは[線を中央に揃える]で作業をする（内側と外側に揃えると書き出し時に分割されるため）
• [変形]パネルの[線幅と効果を拡大縮小]のチェックを外す

SVG作成時のルールと注意点

基本的なルール。

• 単位はピクセルで、なるべく端数を出さない（端数の桁数はデザイナーと要相談）
• アートボードの座標は0,0（左上）を起点にする
• [オブジェクト][パス][単純化]でアンカーポイントの数を最低限にする
• 非表示にしているレイヤーも書き出されてしまうため削除する（サイズ削減のため）
• レイヤー名とグループ名、SVGフィルターは適切な単語（半角英数字）に変更する（[レイヤー_1_]などと日本語で書き出されてしまう）

出力時に書き出されないこと。

• アートボードの外にある要素は書き出されない

変換されて出力されること。

• 文字データはアウトライン化する（アウトライン化をしないと<text>要素として書き出されるため、環境によって指定したフォントで表示されない場合がある）
• [線]以外のアピアランスはうまく書き出されない
• アピアランス、ブラシ、ブレンド、エンベロープは分割されてしまうため最低限にする（サイズ削減のため）
• メッシュグラデーションと画像ブラシ、演算、レイヤー効果はラスタライズされてしまうため最低限にする（サイズ削減のため）
• 同じ図形はシンボル登録してから配置する（<symbol>要素と<use>要素で自動的にモジュール化してくれる）
• 1回しか使わないシンボル図形は[シンボルへのリンクの解除]をする（サイズ削減のため）
• 変形や回転、拡大縮小などを最低限にする（transform属性として書き出されるため、その分ファイルサイズが増えてしまう）