今更すみません。
Illustratorで作った画像をそのままwebで表示できたらなーと思った事はありませんか？
私は正直その発想なかったんで、いちいちphotoshopで開き直してweb用に書き出ししておりました。
アイコンフォント使おうかなーと思った時に情報としては入ってきてましたが、目がスルー。
なんかこう、もっと七めんどくさくて、小難しくて、そんで、ぐあー重たい死んでしまうとかになるに違いない　と思っていたのです。
なぜならアイコンフォント。
ダウンロードとかマークアップとか色々大変そうじゃないですか？
え？大変じゃないんですか？……アイコンフォントはのちのち切羽詰まってから取り入れる事にして、今回はSVG画像です。

IllustratorでSVG形式で保存したら出来るってことで、なんかダウンロードする必要もなさそうだし、物は試しにちょっとやってみました。意外にも使い勝手がよかったので、さっそく本ブログで使うことに。

Illustratorの設定をweb用にカスタマイズ

SVG本題ではないですが、IllustratorでプロファイルでWEBを選び書き始めても、オブジェクトが意図した場所に配置できなかったり、オブジェクト同士がズレて揃わなかったりして結局、紙媒体のプロファイルで作成して、後で縮小かけたりしてサイズを揃えたりした事ないですか？
web用のイラストを書き始める前に、下記のリンクを参考に設定をピクセルベースにカスタマイズをしておくとはかどります。
Illustratorでピクセルが揃わない、滲む、描画がずれるなどの問題が解決されます。スライスもストレスなく扱うことが出来るようになるのでweb素材作りがIllustratorだけで完結してしまうかも、ふひひ。

参考サイト：

IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版） – DTP Transit

SVGのための作画ポイント

アンカーポイントが少ないほど書き出すデータが軽くなるので留意して作成するのがベストです。
鉛筆ツールの余分なポイントを整えたり、前面のオブジェクトで隠れる部分のアンカーポイントを削除したり

不要な部分の方向線を削除したり（可能なら水平か垂直の取れたラインにすると良いようですが…難しい）地道な努力？を重ねます。

パスファインダーを使うと余分なアンカーポイントが沢山できたりするのでオブジェクト→パス→単純化などを使ってアンカーポイントを減らしたり手動で調整。

アートボードのサイズを調整する

アートボードのサイズがsvg画像のサイズとして書き出されます。
web用実寸が決まって無い場合、イラストを作成してから拡大縮小ツールでオブジェクトをリサイズした後、アートボードツールでアートボードのサイズを調整することもできます。小数点以下が出ないようにツールバーやアートボードオプションで調整します。

仕上げに

コードに書き出されないよう余計な物はとにかく削除、統合、解除します。
レイヤーは一つに統合。
孤立点やガイドラインなどは削除しておきます。
グループも解除。

SVG形式で書き出す

別名で保存か複製を保存のダイアログでプルダウンからsvgを選択します。svgzでは圧縮保存できますが、テキストエディタでコードを手直ししたり、ローカルブラウザで直接開く場合はsvgで保存します。
ダイアログが開くのでsvgの設定をします。

単純な形状なら小数点以下の桁数は１で十分なようです。複雑なオブジェクトでは座標の小数点以下を丸めた事によりズレが生じるので桁数を大きくしますが、その分ファイルサイズが大きくなります。
CSSプロパティはスタイル要素かプレゼンテーション属性。描画によってどちらか軽い方を選んでます。ティーカップのひよこの場合はプレゼン属性の方が軽かった。今回の発芽マメのイラストはスタイル要素の方が軽く、5,573バイトですた。

保存したsvgファイルはxmlなのでテキストエディタなどで開き、余分な要素をさらに削ることができます。意図せず出来てたグループのgタグだとかタブスペースだとか改行だとか。手動でも5,573バイト→5,220バイトにダイエットできました。
この辺は詳しいサイトを参考にしてもらいたいものです。（……力つきた）

参考サイト：

Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ – 聴く耳を持たない(片方しか)

簡単にもっと軽くしてしまえ！

しかし、面倒くさい…という私のような人の為に最適化ツールもあります。
今回お試しでSVG Cleaner 0.6.2というのを入れてみました。
ダウンロードしてくるといきなり解凍されているので、アプリフォルダにでも突っ込んで下さい。zipはゴミ箱に入ってます。
起動したらsvgファイルをドラッグドロップするだけです。情報が余り拾えなくてデフォルトの設定のまま直感で使いました。
ドロップするとウィザードが開く。一番左側杖？アイコンでもウザードが開き、ファイルアイコンから選択することも出来る。（フォルダアイコンもあるけどもしかして一括処理もできるのかい？）ラジオボタン上から、
フォルダを選んで保存
同じフォルダにプレフィックスを付けて保存
上書き保存
おkするとウィザードが閉じます。左上二番目、三角の再生ボタンを押すと最適化が始まります。
終わるとどんだけ削れたか結果が出ます。ファイルはウィザードで設定した場所に保存されてます。
osの情報を見るで確認すると4,649バイトまで削ることができました。ほぼ4.5kb。おお！簡単だ！

れすぽんしぶ

SVG Cleanerでデフォルト設定のまま最適化すると、illustratorで書き出されたwidthとheightの値が削られて(viewBoxの値に置換される）レスポンシブになってます。
ブラウザで直接開くと劣化なく拡大及び縮小されて表示されます。ベクター画像の醍醐味ですな。
width heightの属性を残したい時は、wizard→ optimizations ”convert height and width attribute into viewBox attribute”のチェックを外して下さい。
書き遅れましたが当方CS6を使っているのでillustratorのsvgの設定にレスポンシブっていうのは無いんで、SVG Cleaner使うと便利でいいです。
SVG Cleanerを使わない場合でも、エディタで<svg>タグの中のwidthとheightの属性を削ってしまえばレスポンシブとなります。
大きさは親要素の属性かcssで制御します。

とりあえず手軽な使い方…画像ファイルと同じ〜

とりあえずsvgファイルが出来たので初めてのsvgはcssで使ってみました。h6の小見出しで使っているカップに入ったヒヨコがそうです。あっ、Mobile用はまだ設定してなかた。

CSSでは

cssでは単純にurlにsvgファイルを指定するだけどす。

HTMLでは

こちらもsrcに指定するだけどす

または

コードを直接インラインに書き込んでも行けます。

サーバにも教えてあげて

svgにはだいたいのサーバで対応していると思いますが、圧縮版のsvgzに対応してない場合があるようです。
最上部のディレクトリの”.htaccess”にMIMEタイプを追加します。

圧縮型式のsvgzにしてみた

illustratorでsvgzで保存し、SVG Cleanerで最適化したら1,903バイトになりました。

illustrator書き出し5.4kb
コード手動削減5.1kb
書き出してそのままSVG Cleanerで最適化4.5kb
svgzで書き出してSVG Cleanerで最適化1.9kb

とsvgz形式で書き出してSVG Cleanerで最適化すると凄くちっちゃくなるのですが、svgzは手軽に確認出来なくてちょっと敷居が高いような気がします。
file://プロトコルにはMIMEタイプが付かないので、ローカルのブラウザではエラーで表示できないのですな。
MAMPのApacheのhttpd.confにhtaccessと同じAddTypeの記述をしてドキュメントルートに突っ込めばいいと思うので今後のために後でやってみようと思います。(記事書きました：MAMP じぶんちのApacheでもsvg）しかし表示できるか出来ないかの確認なので、制作上は問題ないかなと。ぶっつけ本番でアップするような気がします。

最後にsvgzで保存した豆のイラスト

豆のイラストsvgzを「さわやかまみれ」に置いてみました（＾ω＾）よろしかったら、ブラウザをのばしたり、縮めたりして見て下さい。

iphoneでは上下にすごいスペースが取られてしまうかもしれません。
htmlに<object>で埋め込みました。iphone用豆