[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> エレメントの出力を制御]をチェックにする（サイズ削減のため）
• [パス上テキストに <textPath> エレメントを使用]をチェックにする（サイズ削減のため）
• [レスポンシブ]のチェックを外す（widthとheight属性がないとIEとAndroidで表示がおかしくなる）
• [スライスデータを含める]をチェックしない（サイズ削減のため）
• [XMP を含める]をチェックしない（サイズ削減のため）
• svgzでminifyしない（再編修正を考えて）

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

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