狠狠撸

解説
=> http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

SVGとは？
? Scalable Vector Graphics
? 2次元ベクターイメージ用の画像形式の一つ
? 他にはPDF / Postscript など
? 2001/9/4 SVG 1.0がW3C勧告となる
? SVG1.1(2nd Edition)が最新
? 他にもモバイル向けのSVG Tiny 1.2やSVG Basicがある

特徴
? XMLで画像を記述できる
? ハイパーリンクを埋め込める
? Javascriptで操作できる（jQueryは?）
? アニメーションやユーザインタラクションも受け付ける?
? SCMでのバージョン管理も可能（テキストとして）
? 高画質
? ドットで記述するgif等に比べて、拡大しても質が落ちない
? どの画像サイズに対しても同等の記述量が必要(ベクタ形式の欠点)

対応アプリケーション
? ブラウザ
? FireFox1.5+ / Chrome / IE9+ / Opera 9.0+
? Safari 3.0+ (一部の仕様未実装?OSによる)
? エディタ
? Adobe Illustrator / Microsoft O?ce Visio / Mathematica
? R言語の出力形式
? デスクトップ
? GNOME（libsvgを使いアイコンや壁紙にSVGを指定可能）

実装
=> Webグラフィックをハックする（2）：10分でわかるSVG 基礎編 (1/5) - ＠IT
http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html

基本図形
? rect
? circle
? ellipse
? line
? polyline
? polygon
? path
? image
? text

発展
? transform
? animate
? linearGradient/ radialGradient / pattern
? clipPath / Mask

発展２
? foreignObject
? onload

埋め込み
? インライン
? XHTML / HTML形式（HTML5対応のブラウザのみ）
? 外部ファイル
? Objectタグ
? imgタグ / CSS
? 古いブラウザでは動かない可能性
? .svgz
? 外部ファイルをgzipしておくとブラウザ側で解凍してくれる

SVG with js
? onloadでやる
? HTMLに埋め込まれたjavascript
? imgタグで埋め込むとjsで処理できない
? jQuery使えない

d3.js
? Data Driven Documentation
? DataからDOMオブジェクトを生成する
? 独自DSLでインタラクティブなオブジェクト
を作ることが出来る
? #11 transitionを使ってみよう - ドットインストール
? http://dotinstall.com/lessons/basic_d3js/23011

さらなる応用
? Graphviz
? SVG出力可能
? SVG画像のDi?
? PhantomJS / Wraith
? gifやCanvasとの比較
? SVG と Canvas: どちらを選ぶか
? http://msdn.microsoft.com/ja-jp/library/ie/gg193983

まとめ
? アプリエンジニアならペイントツールを覚えるよ
り、SVGのXML出力について考えるべき
? d3.jsは面白そうだけど、javascriptともjQuery
とも違う独自DSLなのを忘れないように
? 滨贰ガー滨贰ガー

狠狠撸

厂痴骋事始め

Recommended

More Related Content

What's hot (19)

Similar to 厂痴骋事始め (20)

More from Nemoto Yusuke (9)

Recently uploaded (8)

厂痴骋事始め