Illustratorでsvg書き出し用に、書き出し形式の詳細設定をします。最適な設定は以下になります。
スタイル
「内部CSS」、「インラインスタイル」、「プレゼンテーション属性」から選択します。「内部CSS」はsvgファイル内にstyleタグでスタイルを定義して、各pathデータからクラスで適用します。「インラインスタイル」は各pathデータに直接style属性でスタイルを適用します。「プレゼンテーション属性」は各pathデータに直接XML属性でスタイルを適用します。svgの場合、各pathデータに適用できるCSSプロパティはそのままXML属性になります。
//内部CSS
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<defs>
<style>
.cls-1 {
fill: #30f;
}
</style>
</defs>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<circle class="cls-1" cx="40" cy="40" r="40"/>
</g>
</g>
</svg>//インラインスタイル
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<circle cx="40" cy="40" r="40" style="fill: #30f"/>
</g>
</g>
</svg>//プレゼンテーション属性
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<circle cx="40" cy="40" r="40" fill="#30f"/>
</g>
</g>
</svg>フォント
「アウトラインに変換」、「SVG」から選択します。「アウトラインに変換」はテキストが全てアウトライン化されたpathデータとして書き出されます。「SVG」は文字として書き出されるため、ブラウザのデフォルトフォントで表示されます。
画像
「保持」、「埋め込む」、「リンク」から選択します。「リンク」はIllustrator内に配置された画像が画像ファイルとしてsvgと一緒に書き出されます。
オブジェクトID
「レイヤー名」、「最小」、「固有」から選択します。「レイヤー名」はレイヤー名がidになります。「最小」はidが設定されず、「固有」はユニークな名前がidになります。
//最小
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<defs>
<style>
.a {
fill: #30f;
}
</style>
</defs>
<circle class="a" cx="40" cy="40" r="40"/>
</svg>//固有
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<defs>
<style>
.e6dc007f-9d60-4765-a86c-d79ee308706c {
fill: #30f;
}
</style>
</defs>
<g id="a05f064d-4897-41e3-b6f8-4e28e6612101" data-name="レイヤー 2">
<g id="b302cad9-7305-4181-b366-58f53de44cbc" data-name="レイヤー 1">
<circle class="e6dc007f-9d60-4765-a86c-d79ee308706c" cx="40" cy="40" r="40"/>
</g>
</g>
</svg>小数点以下の桁数
パスやアンカーポイントの位置の、小数点以下の最大桁数を1から5で指定します。桁数が多いほど描画の精度が上がります。「3」が最適とされています。
縮小
縮小にチェックを入れると、svgのコードが圧縮された状態で書き出されます。
レスポンシブ
レスポンシブにチェックを入れると、svgタグのwidthとheightの指定がなくなります。チェックを外すとサイズ指定（原寸に固定）の書き出しになります。
以下はIllustratorから最適な設定で書き出した、モーダルウィンドウの閉じるボタン（×ボタン）のsvgのコードです。
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 2px;
}
</style>
</defs>
<title>アセット 1</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="Modal">
<g>
<polyline class="cls-1" points="1 41 21 21 1 1"/>
<polyline class="cls-1" points="41 1 21 21 41 41"/>
</g>
</g>
</g>
</svg>
