[SVG] SVG書き出し時の注意点

[manabuyasuda]

Illustratorを使った場合の書き出しに関する注意点をまとめています。レイアウト崩れの原因を取り除いたり、不要なコードを最低限にします。一部の設定は変更してもかまいません。

1. [別名で保存]をクリック（Macの場合はcommand + shift + S）
2. [ファイル形式]は[SVG(.svg)]を選択
3. [詳細オプション]をクリックしてオプションを開く
4. 以下のリストを参考にオプションを指定する
   • [SVG プロファイル]はSVG1.1（最新版を指定）
   • [フォント]の[文字]は[SVG]、[サブセット]は[なし（システムフォントを使用）]
   • [Illustrator の編集機能を保持]をチェックしない（サイズ削減のため）
   • [CSS プロパティ]はスタイル要素を指定する（サイズ削減のため）
   • [未使用グラフィックスタイルを含める]をチェックしない（サイズ削減のため）
   • [小数点以下の桁数]を1もしくは2にする（サイズ削減のため）
   • [エンコーディング]は[UTF-8]
   • [<tspan> エレメントの出力を制御]をチェックにする（サイズ削減のため）
   • [パス上テキストに エレメントを使用]をチェックにする（サイズ削減のため）
   • [レスポンシブ]のチェックを外す（widthとheight属性がないとIEとAndroidで表示がおかしくなる）
   • [スライスデータを含める]をチェックしない（サイズ削減のため）
   • [XMP を含める]をチェックしない（サイズ削減のため）
   • svgzでminifyしない（再編修正を考えて）

インラインSVGで使う場合はパスをコピーして、テキストエディタにペーストすることもできます。

Illustrator CCを使っている場合は画像アセットとして書き出すことができます。