SVGを使うための知識

ＳＶＧの基本
- ＳＶＧの概略
  - SVGの概略
  - SVG 1.1 仕様（第２版）日本語訳
- 直線の描画
  - 直線を描画
  - Snap.svg/D3.jsで直線を描画
- 線の書式
  - 線の書式を指定　幅と色
  - 線端の形状の指定
  - 点線を指定
  - 点線の開始位置を指定
  - 線の透明度を指定
- 四角形、円、楕円の描画
  - 四角形の描画 <rect>
  - 四角形の描画（CANVASを使用）
  - 四角形の描画（javascript innerHTML）
  - 四角形の描画（Snap.svg/D3.js）
  - 四角形の描画（javascript）
  - 四角形角丸の指定
  - 円の描画 <circle>
  - 楕円の描画 <ellipse>
- 折れ線、多角形の描画
  - 折れ線の描画 <polyline>
  - 多角形の描画 <polygon>
  - 角の形状の指定
  - 角の形状の自動変化の制御
  - 塗り方のルール
- パスの描画
  - パスで直線で描画
  - パスで水平線や垂直線を描画
  - パスで円弧を描画
  - パスで二次ベジェ曲線を描画
  - パスで二次ベジェ曲線を描画（２番目以降の制御点を自動指定）
  - パスで三次ベジェ曲線を描画
  - パスで三次ベジェ曲線を描画（第一制御点を自動指定）
- 文字の配置
  - 文字の配置
  - 文字の配置（文字の配置を１文字ずつ指定する）
  - 文字の配置（上下方向に文字の配置を１文字ずつ指定する）
  - 文字列の行揃え
  - 文字位置の移動
  - 文字の回転
  - 文字列の長さを指定
  - 文字列の均等割り付け（文字幅で調整）
  - 文字の縦書き
  - 文字の輪郭線
  - 一部の文字の書式変更
  - 曲線に沿わせて文字を配置
  - 曲線に沿わせて文字を配置（曲線を表示しない）
- ラスター画像の配置
  - ラスター画像の配置
  - 画像と図形を組み合わせたデザイン
  - SVG画像の配置（固定）
  - SVG画像の配置（ファイル指定）
  - 画像の表示サイズ
  - 画像の表示サイズ（その２）
- グループ化と要素の複製
  - グループ化 <g>
  - 要素の複製 <use>
  - 要素の複製レスポンシブ
- リンクの設置
  - リンクの設定 <a>
  - リンクの設定（図形の重なり）
  - SVGファイル内にリンクを設定
描画した図形の加工
- スタイルシートの活用
  - CSSを使った書式指定
  - CSSを使った書式指定（擬似クラス）
  - SVGで利用可能な擬似クラス
- 表示する範囲の指定
  - SVG領域をはみ出した図形描画
  - 表示範囲
  - viwBox属性の指定（拡大／縮小）
  - viwBox属性の指定（縦横の比率が異なる場合の配置）
- 座標変換による図形の変形
  - 図形の移動
  - 図形の拡大／縮小
  - 図形の反転
  - 図形の回転
  - 図形の傾斜
  - 座標変換の組み合わせ
- グラデーションとパターン
  - 線形グラデーション
  - 線形グラデーションの傾きと繰り返し
  - 線形グラデーション　勾配ベクトル
  - 線形グラデーション　勾配ベクトル（その２）
  - 放射グラデーション
  - 放射グラデーション　勾配ベクトル
  - 放射グラデーション　spreadMerhod属性
  - パターンの作成
  - パターン（レンガ模様と斜め水玉模様）
  - パターンの拡大／縮小
- クリッピングとマスク
  - 画像や図形の切り抜き（クリッピングパス）
  - 文字で図形を切り抜き
  - 描いた図形の切り抜き
  - クリッピングパスの包含ボックス空間利用
  - マスクの作成と適用
  - グラデーションマスク
  - 包含ボックス空間を活用したマスク
- アニメーション
  animate要素はIEではサポートしていません。
  Firefox、Chrome、Safari(Mac OS版)、Operaではサポートしています。
  サポートしているブラウザで実行してください。
  - animate要素を使ったアニメーション(IEでは動かない)
  - Snap.sgvを使ったアニメーション　その１(IEでも動く)
  - JavaScriptを使ったアニメーション(IEでも動く)
  - Snap.sgvを使ったアニメーション　その２(IEでも動く)
  - Snap.sgvを使ったアニメーション　その３(時計)
  - Snap.sgvを使ったアニメーション　その４
- フィルター
  - フィルター
  - ぼかし以外の効果を与える浸食と膨張
  - 彩度と色相を変化する
  - フィルターの適用範囲
ＪａｖａＳｃｒｉｐｔでＳＶＧを操作
- 属性値の指定と取得
  - 書式の指定（JavaScriptを使用）
  - 書式の指定（jQueryを使用）
  - 書式の取得（JavaScriptを使用）
  - 書式の取得（jQueryを使用）
  - 要素の作成
- アニメーション処理
  JavaScriptを使えばanimate要素をサポートしていないIEでもアニメーションを実現できます
  - アニメーションのサンプル　シヤッター
  - アニメーションのサンプル　伸びる矢印
  - アニメーションのサンプル　四角形の周りを回る
  - 線の伸縮アニメーションテクニック
- 拡大／縮小
  - 拡大／縮小のサンプル
  - 東京　路線図
- 外部ＳＶＧファイルの操作
  - 外部SVGを操作
  - Inkscapeで作成したSVGファイルをJavaScriptで操作
  - マップ上のルートをアニメーション表示
付録
- 要素
  - 基本的な要素
  - 図形や線の描画、文字・画像の配置
  - グラデーションとパターン
  - クリッピングとマスク
  - アニメーション
  - フィルター
- 属性
  - 基本属性
  - 座標の指定
  - サイズ、半径、角度の指定
  - 座標変換と配置
  - グラデーション関連
  - 座標系の切り替え
  - アニメーション関連
  - フィルター関連
  - リンク、参照
- プロパティ
  - 塗り色の書式指定
  - 線の書式指定
  - 文字の書式指定
  - その他（ABC順）
その他サンプル
- ベジェ曲線
- サンプルその１
- サンプルその２
- サンプルその３