目的別リンク

ここでは，本サイトで紹介しているテクニックを章立て毎にリストアップした．使いたい機能については該当するセクションにそのヒントが書かれているので参考として欲しい．

0. TOPページ
1. svgの基礎知識
   • svgの基本的な構成を知りたい．
   • svgの機能を知りたい．
   • svgの動作環境を知りたい．
   • svgの活用方法について知りたい．
   • ieでsvgを使いたい．
   • svg要素とcanvas要素の違いを知りたい．
2. svg要素とsvg文書
   • svg画像をhtmlファイルに埋め込みたい．
   • svg画像をhtmlファイルで表示したい．
   • svg画像にタイトルを付けたい．
   • svg画像にコメントを付けたい．
   • svg画像の大きさを指定したい．
   • svg画像の表示範囲を指定したい．
   • svg画像の描画基準位置を変更したい．
   • svgの記述ミスを減らしたい．
   • スタンドアロンのsvgファイルを作りたい．
   • svg画像をxhtmlファイルに埋め込みたい．
   • 場合によってsvgの動作が異なる理由を知りたい．
   • svg画像をdataスキーム形式に変換して，img要素のsrc属性に埋め込みたい．
   • object要素で表示したsvg画像にハイパーリンクを設定したい．
3. 図形の描画と図形のグループ化
   • 直線を引きたい．
   • 折れ線を引きたい．
   • 点線を引きたい．
   • 曲線を引きたい．
   • 円弧を引きたい．
   • 放物線を引きたい．
   • 2次ベジェ曲線，円弧を3次ベジェ曲線に変換したい．
   • 丸い点線を引きたい．
   • 点線の間隔を制御したい．
   • 中心と半径と角度を指定して扇形を作りたい．
   • 四角形，円，楕円，多角形を引きたい．
   • 角の丸い四角形を引きたい．
   • 左上を基準として円や楕円を引きたい．
   • 多角形の塗りつぶしを中抜きとしたい．
   • 複数の線分を一つのpath要素で定義したい．
   • 直線の端点を丸めたい．
   • 直線の頂点を丸めたい，尖らせたい．
   • 図形を塗りつぶしたい．
   • 図形の境界をくっきりとさせたい．
   • 図形をグループ化したい．
   • 複数の図形の異なる属性に同じ色を指定したい．
   • Htmlの文字列の色をそのまま図形の色に引き継ぎたい．
4. 図形の変形
   • 図形の変形をしたい．
   • 図形を回転したい．
   • 図形を傾けたい．
   • 図形を移動したい．
   • htmlに埋め込まれたsvg要素を3d変形したい．
5. 図形の定義と再利用
   • 図形にidを付けて他の所で再利用したい．
   • 図形を定義して他の所で再利用したい．
   • コピーした図形にスタイル付けをしたい．
   • 同じ図形を重ねあわせたい．
   • コピーした図形の描画位置を設定したい．
   • 図形を外部モジュール化して他のsvg画像から再利用したい．
   • 図案を任意の形で分割したい．
   • 図案を定義して他の所で再利用したい．
   • 図案のサイズを変更したい．
   • 図案の色を変更したい．
   • 図案のアスペクト比を変更したい．
   • 図案のはみ出した部分を描画するか隠すか設定したい．
   • 何も表示されないsvgファイルの存在意義を知りたい．
   • svgモジュールファイルのコーディング規約を定義したい．
   • htmlとsvgにおける外部画像の取扱いの違いを知りたい．
   • ラスタ画像（jpg，png等）をsvgに取り込みたい．
   • ラスタ画像のアスペクト比を変更したい．
   • ラスタ画像の表示を広げたい．
   • ラスタ画像を表示する基準点を指定したい．
   • ラスタ画像を回転させてアスペクト比を変更したい．
   • svg要素を使って画像の右クリックによるローカルへの保存を禁止したい．
6. スタイル設定
   • svgでcssを使った見た目の制御をしたい．
   • svgでクリック済み（:visited）のリンクの見た目を変更したい．
   • svgでマウスを重ねた際（:hover）の見た目を変更したい．
   • svgでマウスでクリックした（:active）要素の見た目を変更したい．
   • svgでターゲットとされた（:target）要素の見た目を変更したい．
   • svgで外部スタイルシートを参照したい．
   • svgで適用されるスタイルの優先順位を制御したい．
   • svgで複数のページから構成されるグラフィクスを作りたい．
   • xslを使ってsvgの見た目を制御したい．
   • xslを使って一般のxmlファイルからsvg画像を作りたい．
7. マーカーの定義と設定
   • 線の端点に図形を重ねて矢印線を作りたい．
   • 折れ線の頂点に図形を重ねたい．
   • 線の端点図形の表示位置を変更したい．
   • 線の端点図形の表示角度を指定したい．
   • 線の色と端点図形の色を一括指定したい．
   • 円弧の矢印線の見た目を調整したい．
8. 文字列の挿入
   • svgにテキストを挿入したい．
   • テキストの一部に異なるスタイルを適用したい．
   • 文字列を定義して他の部分で使いまわしたい．
   • テキストの位置を一文字づつ設定したい．
   • テキストの位置を相対位置で一文字づつ設定したい．
   • テキストの表示角度を設定したい．
   • svgでhtmlの文字の実体参照を利用したい．
   • テキストの形や大きさ，装飾等の見た目を変更したい．
   • 文字の間隔を制御したい．
   • 文字列全体の幅を制御したい．
   • 文字列を均等配置したい．
   • テキストを中央揃えとしたい．
   • テキストを右揃えとしたい．
   • テキストを縦書きとしたい．
   • テキストの向き（左から右）を右から左に変更したい．
   • テキスト描画の基準となる位置を変更したい．
   • 異なる大きさのテキストの描画ラインを揃えたい．
   • テキストを上付き・下付きとしたい．
   • 曲線に沿ってテキストを並べたい．
   • 曲線の上にテキストを並べたい．
   • svgで（div要素のような）簡易テキスト領域を作りたい．
   • svgでフリースタイルのテキスト領域を作りたい．
   • テキストの一部を異なるフォントの1文字で表示したい．
9. グラデーションとパターン
   • 図形の塗りつぶしに線形グラデーションを設定したい．
   • 図形の塗りつぶしに円形グラデーションを設定したい．
   • グラデーションの透明度を設定したい．
   • グラデーションを掛ける基準を設定したい．
   • グラデーションを繰り返しかけたい．
   • グラデーション図形を変形したい．
   • グラデーションを使って色の境界を定めたい．
   • 円形グラデーションを使って円に立体感を付けたい．
   • グラデーションの境界のジャギーを目立たなくさせたい．
   • 図形の塗りつぶしにパターンを使いたい．
10. 画像の合成
    • 図形の描画範囲を制限したい．
    • 図形の描画範囲を他の図形で制限したい．
    • 境界線で地と図が入れ替わるグラフィックを描きたい．
    • 透かし画像を作りたい．
    • ストロークの内容を中抜きして2重線を作りたい．
    • 図形を透明にしたい．
    • 塗りつぶし領域と線の領域とで異なる透明度を指定したい．
    • 重なりあった図形全体に単一の不透明度を指定したい．
    • rgba関数を使って重なりあった図形全体に単一の不透明度を指定したい．
11. 画像効果
    • 図形に影を付けたい．
    • 映像効果の範囲を定義したい．
    • 図形や画像をモザイク化したい．
    • 塗りつぶし図形・線の描画図形を取り出したい．
    • 映像効果の品質を変更したい．
    • 図形や画像をぼかしたい．
    • 図形を変形してから画像効果を掛けたい．
    • 図形を立体化したい．
    • スポットライトを当てたような効果を得たい．
    • 画像のコントラストを変更したい．
    • 画像の色味を変更したい．
    • 画像の輝度を抽出したい．
    • 画像のネガを抽出したい．
    • 画像をグレイスケール化したい．
    • 画像をセピア化したい．
    • 画像の明るさを変更したい．
    • 画像を減色したい．
    • 図形を他の画像でくり貫きたい．
    • 図形や画像の輪郭を抽出したい．
    • 画像に油絵やクレヨン画のような効果を付けたい．
    • 図形に縁取りをしたい．
    • 波のような図形を作りたい．
    • 大理石のような図形を作りたい．
    • ランダムなノイズの図形を作りたい．
    • htmlの要素に画像効果を付けたい．
    • inkscapeのフィルターを自作のsvgで利用したい．
12. アニメーション
    • svgをアニメーション化したい．
    • svgでcssアニメーションを利用したい．
    • 一定時間ごとに図形の属性を変更したい．
    • グラデーションをアニメーション化したい．
    • アニメーションの値の変化量を制御したい．
    • 曲線にモーフィング効果を付けたい．
    • アニメーション終了時に最初の状態に戻すか設定したい．
    • アニメーションをマウスのクリックで開始・終了したい．
    • アニメーションの開始時間を過去に設定したい．
    • アニメーションが終了したら他のアニメーションを実行したい．
    • キー入力でアニメーションを制御したい．
    • アニメーションを繰り返したい．
    • アニメーションのリピート回数毎に見た目を変えたい．
    • アニメーションの設定値を相対化したい．
    • パスに沿って図形を動かしたい．
    • 色のアニメーションをしたい．
    • 図形の回転をアニメーション化したい．
    • 図形の拡大・縮小をアニメーション化したい．
    • グラデーションをアニメーション化したい．
13. 連携・拡張
    • svgにハイパーリンクを定義したい．
    • ハイパーリンク情報を外部ファイルで一括管理したい．
    • svgにxhtml要素を埋め込みたい．
    • svgにフォーム部品を埋め込みたい．
    • html要素に画像効果を掛けたい．
    • svgに外部システムの情報を挿入したい．
14. 図形の表示とカーソルイベント
    • 図形を非表示としたい．
    • 文字列の一部を非表示として隙間を開けたい．
    • 塗りつぶされていない図形部をクリック可能としたい．
    • 図形の線の上だけをクリック可能としたい．
15. スクリプティング
    • svgをjavascriptで制御したい．
    • スクリプトファイルを外部参照したい．
    • スクリプトでsvg要素を生成したい．
    • svg要素のプロパティを設定したい．
    • 埋め込みsvgのソースコードを取得したい．
    • スクリプトを使ってテキストの内容を操作したい．
    • svgにおいてキーボードによる入力を受け付けたい．
    • use要素を動的に生成したい．
    • use要素を使ってイベント処理をモジュール化したい．
    • canvasで作った画像をsvgに埋め込みたい．
    • svgで作った画像をcanvasに描きこみたい．
    • スクリプトでスタイルシートを切り替えたい．
    • アニメーションを一時停止したい．
    • アニメーションの開始時刻を設定したい．
    • svgのアニメーションとjavascriptのアニメーションを同期したい．
    • svgの属性値をパラメータ化したい．
    • path要素のd属性を拡張して更に使いやすくしたい．
16. フォント定義
    • svgフォントを定義したい．
    • svgフォントを埋め込みたい．
    • svgフォントをhtmlから利用したい．
17. その他の要素と属性
    • 環境によって描画内容を切り替えたい．
    • ファイルが見つからなかった場合の描画内容を切り替えたい．
    • ブラウザの種類によって表示内容を切り替えたい．
    • svgの表示範囲をurlから指定したい．
    • svgに複数の表示範囲を設定し，urlから選択したい．
    • テキストの描画の品質を設定したい．
    • 図形の描画の品質を設定したい．
    • 色の品質を設定したい．
18. svg tiny 1.2の要素・属性
• svg tinyの要素を知りたい．
19. Raphaëlを用いたベクタグラフィック
    • Raphaëlを使ってグラフィックを描きたい．
    • Raphaëlを使ってアニメーションを表現したい．
    • Raphaëlを使ってCufon形式のフォントを描画したい．
    • svgファイルの内容をRaphaëlを使って表示したい．
    • Raphaëlを使って任意のパスを3次ベジェ曲線に変換したい．
    • Raphaëlを使ってパス全体の形を変更しないで頂点を追加したい．
    • Raphaëlを使ってパスに沿って図形をアニメーションさせたい．
    • Raphaëlを使ってパスの全長を取得したい．
    • Raphaëlを使ってパスの一部分を表すd操作文字列を取得したい．
    • Raphaëlを使ってパスのd操作を全て相対座標指定に変換したい．
    • Raphaëlを使って任意の図形を他の形に変形するアニメーションを実現したい．
20. D3.jsによるグラフの描画
    • D3.jsを使って簡単なグラフを作りたい．
    • D3.jsを使って棒グラフ，円グラフ，折れ線グラフ，帯グラフ，レーダーチャート，バブルチャート，ヒストグラムを作りたい．
    • D3.jsを使って方眼を描きたい．
    • D3.jsを使ってグラフの目盛を描きたい．
    • D3.jsが提供しているレイアウトを知りたい．
    • D3.jsを使ってツリーを描画したい．
21. sieを用いたベクタグラフィックの描画
    • sieを使ってieでもsvgを使ったグラフィックを表示したい．
    • sieを使ってieでもインラインsvgを実現したい．
    • sieを使ってクロスブラウザでのsvgの表示を実現したい．
    • sieの動作の概略を知りたい．
    • sieと他のjavascriptライブラリとを組み合わせて利用したい．
    • sieがどこまでsvgのどこまでサポートしているか試してみたい．
22. canvgを用いたcanvas要素との連携
    • canvgを使ってcanvas要素にsvgグラフィックを描画したい．
    • svgグラフィックをpng形式に変換したい．
    • svgグラフィックをandroid osのブラウザで表示したい．
    • canvgとexplorercanvasとを組み合わせてieでもsvgを表示したい．