まず、日本語で最も充実したsvg情報があるのは「svg要素の基本的な使い方まとめ」で、必読だ。

海外ではSara SoueidanさんのCSSconf 2014の動画が最新で具体的だと思う。この動画を制作中に見れていたら大変参考にできたのに、気づいたのは締め切り後だったのが残念。

では、以下に、Illustratorでsvgを作成する際の注意点を。

アートボードでviewBoxはコントロールできない

Illustrator（CS6）では、アートボードの基準点を0,0にしても、書き出したsvgのviewBoxが0 0にならないことがある。Illustratorのアートボードと、svgのviewBoxは違うものとして処理されるらしい。

解決策は、新規ファイルへのコピペ。新規ファイルを開き、アートボードを移動せずに、描いたイラストをコピペしてからsvgとして保存することで、svgのviewBoxが0 0になる。

作成したsvgファイルはIllustratorで編集しない

svgファイルをIllustratorで開くと小数点以下の端数が出る。浮動小数点の処理上、避けられない。元ファイルとして、Illustrator形式のファイルを保存しておくのが良い。

Illustratorのレイヤー名はsvgのIDになる

cssやjavascriptから参照する必要があるパーツやイラストには、レイヤーパネルで、グループ化したイラストに名称をつけておくと、svgのIDとして書き出される。

残念ながら、Illustratorでsvg内のclass名を付ける事はできないので、svgファイルをエディタで開いて編集する必要がある。この際、検索し易くするために、レイヤーに名前をつけておくと、エディタで開いた際に探し易い。

Illustratorのシンボルはsvgのsymbolになる

これは本当。一見、複雑なイラストも、シンボルを使ってフラクタル的な考えでイラストを構成すれば軽量化できる。

Illustratorのsvgフィルタは、svgフィルタとして書き出される

これも本当。このメニューはあまり使ってこなかったが、使い道があるかもしれない。

次回は、svgをhtmlに配置する時の注意点を書こうと思う