Skip to content

Instantly share code, notes, and snippets.

@rn404

rn404/index.md

Last active August 29, 2015 14:15
Show Gist options
  • Save rn404/b307dcf03abbe6270f01 to your computer and use it in GitHub Desktop.
Save rn404/b307dcf03abbe6270f01 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Study
Raw
index.md

SVG Study

対応状況は、開発前に常に確認しましょう。

概要

アウトラインをまず仕様書で確認。

もう少し噛み砕かれた内容はMdNへ。 日本語は情報が古い場合があるので、時には英語も参照する。

基本的なこと

真っ白な状態から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使えません。がんばる。

あとはこのスライドにほとんどまとめて書いてあるので必読

むしろこれだけ読んでおけばなんとかなる

アニメーションについてはこちらで概要をつかんでから

SMILアニメもなくなる噂があるので、対応状況としてはIEさようならし、CSSアニメーションに頼るのが現状のベスト解な気がします。

対応環境について

  • アニメーションについてはひとまずIEのことは忘れましょう。
  • Androidの標準ブラウザでバグがでたらその端末のことは忘れましょう。

代替方法については、事前に対策を立てておくべきです。 対応ブラウザのみで想定して開発にかかってもどこかで絶対バグが起こりえます。 そのときに中途半端なコンテンツを表示し続けておくのはリスキーです。 すぐに振り分けられるような仕組みを仕込んでおくのをおすすめ。 (対応環境を書いておくとかのベタ策も含めて)

サンプルコード

あとはひたすら実際に読んで手を動かすのが早いです。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment