SVGを使う意味

1. Retinaでの画面のクオリティを上げるため

画像をしこたま用意して、Retinaで出し分けする方が低コストですが、
ファイル数が肥大化して管理が煩雑になります。

2. 動くUIをつくる

そもそも、UIのコンポーネントにPNG画像が使われている方が違和感だという思想が芽生えてきました。
Hoverで色が変わったり形が変わるUIComponentを作るために、imgやdiv(background-image)を使う時代は終わらせましょう。

使い方

SVGの良さを活かすなら、inlineで埋め込む以外の選択肢はありません。
DOM感覚でいじれるのでみんなだいすきな$でattrしましょう。

書き出し方

Illustratorだったら、普通に保存形式でSVGを選べば大丈夫です。
viewboxを原点からにしたかったら、新規ファイルから作らないとダメです。
イラレのだめなところは、SVG書き出し設定があんまり細かいところまで出来ないところです。
XML宣言まで指定されちゃうんで、jsから動的に動かそうとしたら、svgo噛ませるか、手動でXML宣言消さないとちゃんと動いてくれません。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280px" height="40px" viewBox="-339 261 280 40" style="enable-background:new -339 261 280 40;" xml:space="preserve">
~
</svg>

svgo噛ませたら

<svg xmlns="http://www.w3.org/2000/svg" width="280px" height="40px" viewBox="-339 261 280 40">

こう削ってくれます

sketchだったらsketch-toolからのsvgoかませれば自動化できます。らくちんちん。

埋め込み方

jadeだったら@include hoge.svg
非同期だったら、$.get("hoge.svg",cb_append)
バリバリ使いたかったら、Snap.svg.js (Snapはrequireできないので注意)
慣れてきたら直書き

注意点

widthとheightは指定してあげたほうが安全かもです。
Android2.0系では両方指定しないと勝手に伸縮された経験があります。つらい。

手書き

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="10" height="10"/>
  <circle cx="10" cy="10" r="10"/>
</svg>

htmlを手書きできるひとだったら、これくらい造作も無いのではと思います。
さらっとHTMLの中にコレを書けるとニュージェネ感出てくると思います。
classとかつけちゃってCSSあてちゃってください。
hoverとかtransitionとかあてちゃって、イケてるComponent作ってください。

IE8対策

IE7は割りとガン無視されてきてる昨今ですが、８は最低限対応しろという視線を感じています。

こればっかりはしょーがないので、PNG画像をつくらないといけないですが、どうせなら楽したいですよね。
SVGEXPORT - （phantom使ってcanvasつかってってかんじっぽいです。あんまりよくなさそう。どうせならnode canvasつかえよーっていう）
imagemagick - 王道

鍵はサイズ指定になってきそう。
ここらへんは試してません（まて）

動きなどを担保する必要性がないならば、テキストで代替させるくらいの度量は必要な気がします。
ハンバーガーボタン→MENU という表記にする。とか・・・（IE8使う層には適切なUI設計です！<棒）

業務用SVGの使いかた