Illustratorでsvgを作成する際に注意すべきこと

エルモのだいぼうけんを作成した事で分かった事をシェアしようと思う。

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

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

エルモのだいぼうけんより、ウミガメのsvgを抜粋

では、以下に、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に配置する時の注意点を書こうと思う

カテゴリー: html5 タグ: パーマリンク

シェア

Illustratorでsvgを作成する際に注意すべきこと への2件のフィードバック

  1. きんさん@浅草橋 のコメント:

    アートボード0 svg viewBox ずれる

    で検索したらここにきた!わぉ!

    ためになる投稿ありがとう。

  2. ksk のコメント:

    世間は狭いね!お役に立てば何よりです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA