対応状況は、開発前に常に確認しましょう。
- CanIuse
http://caniuse.com/#search=svg
アウトラインをまず仕様書で確認。
- Scalable Vector Graphics (SVG) 1.1 (第2版)
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
もう少し噛み砕かれた内容はMdNへ。 日本語は情報が古い場合があるので、時には英語も参照する。
- MdN > SVG (ja)
https://developer.mozilla.org/ja/docs/Web/SVG - MdN > SVG (en)
https://developer.mozilla.org/en/docs/Web/SVG
真っ白な状態からSVGを描くものではないという前提でいます。 ベースはAdobeのIllustratorで作成します。AdobeCCの場合、SVG拡張子を直接開くこともできるので、CC推奨です。
- SVGのviewサイズを変えたい場合はイラレのアートボードの設定を変える。左上をx=0, y=0としておくと楽。
- 一旦作ってからオブジェクトにあわせてアートボードのサイズを変えることもできるので気楽に作り始めましょう。
- イラレはよく落ちる時があるけど愛情をもって接する。
- SVGは名前空間がSVGで指定されている。構文はXMLの感じ。言語チェック厳しいので気をつけて。
- 外部CSSの読み込みのときはCDATAで囲んでimport
- 他の方法もあるようですが現状それでやってます。これでsass書き出しのファイルも読み込める!
- <g>タグはグループ。イラレのグループがそのまま反映される。
- <g>タグのidにはレイヤー名、グループ名が自動で入る。重複している場合は番号が自動で付与される。面倒。
- というわけでグループを無駄に作りまくるとDOMが深くなるので結構大変。書き出すときに整理する。
- class名はイラレ側から付与できない。諦めて頑張りましょう。
- グループ名つけなかったらidつかないかと思ったらついてるときもある。ついてる!!!!
- 基本的な形は図形要素と呼ばれる<circle>、<ellipse>、<line>、<polygon>、<polyline>、<rect>で作られる。
- <defs>タグで共通パーツのようなものを設定できる。呼び出しは<use>タグを使う。
- パスの情報に書き出し位置も含められてるので、xy軸の数値をいじって動かそうとするときは思い通りにいかないことを念頭に。
- イラレのレイヤーの並びと、SVG上でのオブジェクトの重なり順は逆になるので、いじるときは気をつける。
- cssのプロパティはhtml要素とは異なるプロパティになるので、仕様書を参照すること。
- 非表示にしているオブジェクトもdisplay:noneで書き出されるので注意。
- 一度テキストエディタなどで編集したSVGファイルをイラレなどで編集 > 上書き保存はダメ、絶対。オススメできない。
- SVG要素にあるアニメーションというやつがSMILアニメというやつ。なんと廃止予定らしい。パスアニメどうするんだろう?
- SVGのなかのDOM要素をごりごり動かしたい場合はobjectタグとかで呼ぶ。jsはDOM Level2なのでjQuery使えません。がんばる。
あとはこのスライドにほとんどまとめて書いてあるので必読
- SVG MANIAX Ver.2 - Mars vanilla
http://www.slideshare.net/ssuser99dc16/mars-svg
むしろこれだけ読んでおけばなんとかなる
アニメーションについてはこちらで概要をつかんでから
- SVGのアニメーションで線を引く方法まとめ(IEへの対応も)
http://2ndidea.com/svg/svg-path-drawing-animation-even-ie/
SMILアニメもなくなる噂があるので、対応状況としてはIEさようならし、CSSアニメーションに頼るのが現状のベスト解な気がします。
- アニメーションについてはひとまずIEのことは忘れましょう。
- Androidの標準ブラウザでバグがでたらその端末のことは忘れましょう。
代替方法については、事前に対策を立てておくべきです。 対応ブラウザのみで想定して開発にかかってもどこかで絶対バグが起こりえます。 そのときに中途半端なコンテンツを表示し続けておくのはリスキーです。 すぐに振り分けられるような仕組みを仕込んでおくのをおすすめ。 (対応環境を書いておくとかのベタ策も含めて)
あとはひたすら実際に読んで手を動かすのが早いです。
- Codepen.io(Search"svg")
http://codepen.io/search?q=svg&limit=all&depth=everything&show_forks=false