svg要素の基本的な使い方まとめ

Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと.
本サイトをpdf化したものを頒布致します.有償ですが,印刷を念頭に置いたレイアウトを施していますので場合によっては使いやすいケースがあるかもしれません.なお,内容は本サイトと同じ+拙ブログの内容となっていますが,ほんのりpdf版向けに加筆した部分もあります(ブラウザごとの動作の違いや動作的に判りにくい部分など).記事の内容に価値を見出された方や見やすいレイアウトで出力したい方,DEFGHI1977にカンパしたい方はご購入いただければ幸いです.
※実際の処あんまり売れてませんで,ほぼボランティア同然… ぬーん.潤いが欲しい…
svg要素の基本的な使い方/pdf版 svg要素の基本的な使い方/pdf版

2013/02/21 7訂)内容を改訂しました.お手数ですがファイルの再ダウンロードをお願い致します.なおダウンロード期間を過ぎてしまった方もDL-MARKET様にご連絡いただければ再ダウンロードは可能とのことです.以上,よろしくお願い致します.

svg世代のためのjavascriptライブラリ・Snap.svgについてのまとめを公開しました.こちらも合わせてご覧ください.

この文書はサンプルコードを,実際に目で見て,編集して,その効果を確かめることでsvgの機能について判りやすく学べるように作成した.svgの要素と属性はひと通り説明したつもりなので,実装サンプルとして使ってもらえると嬉しい.通常は直接svgを編集すると言ったことは殆ど無いかも知れないが,敢えてテキストエディタでゴリゴリとコードを書くのも良いものだ.特別な環境なしに文字列が鮮やかなグラフィックに変換されるのはとても楽しいし,何より手書きでなければ利用できない機能がたっぷりと存在しているのだから,これらを使わない手はない.意外な要素の組み合わせが,これまでにない効果をもたらしたりと驚きの連続である.この感覚は中々説明しがたいところがあるので,仕様が広大だからと言って喰わず嫌いをせずに新たな発見をして欲しい.

目次

  1. svgの基礎知識
    svgを取り扱うにあたっての心構えや,取り巻く環境について説明する.
  2. svg要素とsvg文書
    svg文書の基本となる事項について説明し,htmlでの取扱いについて説明する.
    svg要素
  3. 図形の描画と図形のグループ化
    svgで図形を描く上で最も基本となる要素について説明する.
    path,line,rect,circle,ellipse,polyline,polygon,g要素,stroke属性,fill属性,color属性
  4. 図形の変形
    図形の変形について説明する.
    transform属性
  5. 図形の定義と再利用
    svgのモジュール化と画像の読み込みについて説明する.
    defs,use,symbol,image要素
  6. スタイル設定
    svgにおけるスタイルの指定とxslによるsvgの生成法について解説する.
    style要素
  7. マーカーの定義と設定
    線要素の端点図形について説明する.
    marker要素
  8. 文字列の挿入
    svgにおけるテキストの取扱いについて説明する.
    text,tspan,tref,textPath,altGryph要素
  9. グラデーションとパターン
    図形の塗りつぶし方法について説明する.
    linearGradient,radialGradient,pattern要素
  10. 画像の合成
    図形の描画領域の制限や重ね合わせについての説明を行う.
    clip,clipPath,mask要素
  11. 画像効果
    svgのもつ様々な画像効果について説明する.
    filter要素,原始フィルター要素
  12. アニメーション
    svgのもつアニメーション機構について説明する
    animate,set,animateMotion,mPath,animateColor,animateTransform要素
  13. 連携・拡張
    svgの文書としての様々な外部連携機能について説明する.
    a,foreignObject,metadata要素
  14. 図形の表示とカーソルイベント
    図形の表示とカーソルイベントの発生の関わりについて説明する.
    cursor要素,display,visibility,pointer-events属性
  15. スクリプティング
    svgにおけるjavascriptの実装法について説明する.
    script要素
  16. フォント定義
    svgフォントの構成について概説する.
    font,font-face,glyph,missing-glyph要素
  17. その他の要素と属性
    上記の説明から漏れた要素について説明する.
    switch,view,color-profile要素
  18. svg tiny 1.2の要素・属性
    svg tinyで定義されているその他の要素について概説する.
  19. Raphaëlを用いたベクタグラフィック
    Raphaëlを用いたベクタグラフィックの描き方について説明する.
  20. D3.jsによるグラフの描画
    D3.jsを用いて実際にグラフを描いて基本的な使い方を学ぶ.
  21. sieを用いたベクタグラフィックの描画
    sieを用いてieを含めたクロスブラウザでのsvgの描画をさせる方法を解説する.
  22. canvgを用いたcanvas要素との連携
    canvgを用いてsvgとcanvas要素との連携を紹介する.
  23. 目的別リンク
    svgで実現したい機能をリストアップした.

更新履歴