ここのところ年末進行がキツく、このブログも制作中のサイトも停滞しています。さて今回は、久々にSVGの変換をしようとしたら、すっかり設定方法を忘れていたので備忘録。
Illustratorでは、SVGを書き出すときにオプション設定が細かくあります。これを調整することで使い勝手の良いSVGか、そうでないSVGになります。各設定でSVGを書き出し、それをテキストエディタで比較することでそれぞれの設定の違いがわかります。
SVGオプション：スタイル
スタイルの項目には、「内部 CSS」、「インラインスタイル」、「プレゼンテーション属性」の3つがあります。
まずは、内部CSSから。以下はSVGを書き出し、テキストエディタで開いたものです。（描かれる図形はレイヤー1に白い四角形、レイヤー2に赤い円です。）
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
<defs>
<style>.cls-1{fill:#fff;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#e60012;}</style>
</defs>
<g id="_レイヤー_1">
<rect class="cls-1" x="25" y="-25" width="100" height="150" transform="translate(125 -25) rotate(90)"/>
</g>
<g id="_レイヤー_2">
<circle class="cls-2" cx="75" cy="50" r="30"/>
</g>
</svg>他のスタイルとの違いは、<defs>タグで描画オブジェクトの定義をしているところ。各オブジェクトをクラス分けし、各クラスを<defs>タグ内で定義しています。同じ色で塗っているオブジェクトがいくつかある場合は、まとめて指定されるのでコンパクトになったりもします。
次に、インラインスタイル。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
<g id="_レイヤー_1">
<rect x="25" y="-25" width="100" height="150" transform="translate(125 -25) rotate(90)" style="fill:#fff; stroke-width:0px;"/>
</g>
<g id="_レイヤー_2">
<circle cx="75" cy="50" r="30" style="fill:#e60012; stroke-width:0px;"/>
</g>
</svg>
内部CSSとの違いは、<defs>タグはなく、それぞれのオブジェクトにstyle="◯◯◯"の形でスタイル情報が書かれています。
3つ目、プレゼンテーション属性。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
<g id="_レイヤー_1">
<rect x="25" y="-25" width="100" height="150" transform="translate(125 -25) rotate(90)" fill="#fff" stroke-width="0"/>
</g>
<g id="_レイヤー_2">
<circle cx="75" cy="50" r="30" fill="#e60012" stroke-width="0"/>
</g>
</svg>
インラインスタイルとほぼ同じですが、違いはスタイル情報をstyle="◯◯◯"の形ではなく、より直接的な記述になっています。
私が現在制作中のSVGを多用したサイトでは、こちらのプレゼンテーション属性を使っています。CSSで色をコントロールしやすいからです。オブジェクトに直接書かれたスタイル（Attributes Style）の優先度が低いようで、htmlに書かれたCSSで上書きできます。
インラインスタイルですと、element styleとして優先度の高いスタイルとなっているので、CSSで上書きするには !important をつけたり、JavaScrpt等で上書きする必要があります。
SVGオプション：フォント
SVGオプションの2つ目、フォント。これはわかりやすく、アウトラインに変換するかSVGにするか。ただSVGだと以下のようになります。
<g id="_レイヤー_3">
<text transform="translate(53.86 94.17)" font-family="Arial-BoldMT, Arial" font-size="15" font-weight="700">
<tspan x="0" y="0">Japan</tspan>
</text>
</g>Illustratorで指定したフォント名が記載されるので、汎用性のある使い方ができるかは、工夫が必要かも？
SVGオプション：画像
3つ目のオプションの画像。「保持」「埋め込み」「リンク」があります。個人的に使う予定がないので省きます。必要な方は、私のようにそれぞて書き出してテキストエディタで開いて見てください。
SVGオプション：オブジェクトID
オブジェクトID。これは、「レイヤー名」、「最小」、「固有」の3つがあります。Illustratorの各レイヤーに対してIDを振ってくれるのですが、そのときのID名をどうするかというものです。
今まで表示してきたコードは「レイヤー名」を選択していたので、Illustratorのレイヤー名がそのまま表示されています。なので、Illustratorでレイヤー名を変更すると各IDを自分でコントロールできます。
「最小」は、各レイヤーのIDをa、b、ｃとつけていきます。「固有」は、多分ですが他と被らないIDになると思われます。<g id="uuid-5c8f68ba-0fe6-4cbf-b4c1-18a91a12b1ad">のような長いものなので。
SVGオプション：小数点以下の桁数
少数点以下の桁数は、描画の精度です。数を増やせば精度は増しますが、データ量は大きくなります。
SVGオプション：最小 と レスポンシブ
最小のチェックボタン。これは、書き出したSVGをテキストエディタで開くとわかりますが、インデントや改行があるかないか。
隣のレスポンシブは、チェックを入れるとwidth="◯◯" height="◯◯"がなくなり、SVG単体をブラウザで開くとウインドウいっぱいに大きくなります。
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 150 100">ちなみに、SVGのオプション画面の前、SVGを選択するときに表示されているチェックボタン「アートボードごとに作成」にチェックを入れると、アートボードの大きさがviewBoxに反映されます。
以上、IllustratorでSVGを書き出すときのオプション設定になります。
