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

Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと．

本サイトをpdf化したものを頒布致します．有償ですが，印刷を念頭に置いたレイアウトを施していますので場合によっては使いやすいケースがあるかもしれません．なお，内容は本サイトと同じ＋拙ブログの内容となっていますが，ほんのりpdf版向けに加筆した部分もあります（ブラウザごとの動作の違いや動作的に判りにくい部分など）．記事の内容に価値を見出された方や見やすいレイアウトで出力したい方，DEFGHI1977にカンパしたい方はご購入いただければ幸いです．
※実際の処あんまり売れてませんで，ほぼボランティア同然… ぬーん．潤いが欲しい…

svg要素の基本的な使い方/pdf版

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

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

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

注意事項
目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになること，及びsvgにおける実践的なテクニックを身に付けることである．従って複雑な図形は素直にinkscape等専用のツールを使うと良い．なお，ここで学んだ知識はツールを使う上でも役に立つと思う．
対象者は主にsvgの技術に興味がある人としており，どちらかというとエンジニアやプログラマー向けの記事となっている．従ってデザイナーやグラフィッカー等，グラフィックの描き方やツールの使い方について関心がある人には期待した内容と異なるかもしれないが，svgの機能や限界を知ることは表現を行う上での制限を理解することに他ならないため，ざっとで良いから目を通しておくと良いかも知れない．
前提知識はそれほど必要はないが，htmlやxmlの知識があるとすんなりと理解できるようになっている．
仕様はここを参照のこと．読んでもわからないのならコードを弄ってみよう．ソッチの方がずっと手っ取り早い．
対象とするバージョンは現状最も知られている「SVG1.1第2版」を基本とするが，場合によりそれ以外のものも取り上げる．
svgの記述の方法はSVG 1.1 2nd Edition Test Suite using svgwebに詳しい．もともとユーザーエージェント作成者側へのテストコードだが，w3cが本来どのような記述を想定しているかを理解する上で非常に有用である．
本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないので予めご了承いただきたい．
スクリプトを使ってsvg要素の中身（ソース）を出力しているため，一部実際のコードと表示されるコードとの間に差異がある．
動作検証はfirefoxとchromeとoperaのそれぞれ最新のバージョンで行なっているので，なるべく新しいバージョンのブラウザで見て欲しい．なお，どのブラウザにおいても同じ結果となる訳ではない．バージョンによっても変化するため，全てについて解説するのは現実的ではない．実現したい内容に合わせて実際に自分の目で確かめて欲しい．
そうは言っても全く動作しないサンプルも含まれている．これはコードがおかしいのか，そもそも実装されていないのか，はてまた実装がおかしいのか全くわからないので注意のこと．なお大抵の場合，そのような機能を使うことは無い（→無いから実装されていない）はずなので安心して欲しい．
学習ツールとして，ソースコードを編集してその動作を確認することができる．ieでは動作確認していないので注意のこと．
記事についての著作権はdefghi1977に帰属しますが，svgの学習目的であれば"間違いがあることを前提に"自由に利用してもらって構いません．またsvgのサンプルコードは自由に使って下さい．どしどし使ってsvgを盛り上げていきましょう．
掲載しているソースコードをそのまま利用する場合はMITライセンスが適用されるものとします．自由にお使い下さい．

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

更新履歴

2012/05/24 初版
2012/05/24 アニメーション・スクリプトに関わる部分の記述を拡充．
2012/05/25 アニメーション，マーカーに関わる部分の記述を拡充．スクリプト（dom）のセクションを改訂．
2012/05/26 svgに関わるツールの説明を拡充．線の描画に関わる記述を拡充．
2012/05/27 filter，use要素についての説明を拡充．
2012/05/27 filter要素についての説明を拡充．
2012/05/28 セクション毎にhtmlを分割．以前より動作が軽くなったはず．
2012/05/28 switch要素についての説明を改訂．filterについての記述を改訂．
2012/05/29 svgのbase64エンコード方法について補足を追加．text要素の説明を拡充．
2012/05/30 textPath要素の説明を拡充．スクリプティングに関わる部分の記述を改訂．svg参照モードの記述を追加．
2012/05/31 svg参照モードの記述を拡充．スクリプティングに関わる記述を拡充．font要素の記述を拡充．フィルターの説明を追加．
2012/06/01 style，text要素，use要素，基本図形の描画，画像の合成についての説明を拡充．
2012/06/02 印刷時のスタイルシートを変更．
2012/06/03 節毎の導入を追加．その他色々と改訂．g要素のスタイリングについての記述を修正．
2012/06/04 style要素での間違いを修正．xslによるスタイリングの項目を追加．symbol要素の説明を拡充．
2012/06/05 機能別リンクを追加．
2012/06/06 svgzの記述を追加．canvas連携のサンプルを追加．描画品質の項目を追加・整理．
2012/06/07 Raphaëlの項目を追加．
2012/06/09 Raphaëlの項目を拡充．
2012/06/10 シンボルの多段参照についての記述を追加．fontの記述を改訂．
2012/06/11 fontの記述を改訂．
2012/06/12 javascriptライブラリの項を追加．D3.jsについての項目を追加．
2012/06/13 D3.jsを使ったグラフのバリエーションを追加．
2012/06/14 D3.jsを使ったレイアウトのバリエーションを追加．
2012/06/15 D3.jsを使ったレイアウトのバリエーションを追加．
2012/06/16 Raphaëlでのsvgの読み込み方法について追加．
2012/06/18 図形の描画品質の項目を追加．Raphaëlの項目を拡充．ファイルサイズについての記述を追加．
2012/06/22 sieによるsvgの描画の項目を追加．
2012/06/24 sieによるsvgの描画の項目を改訂．スクリプト操作についての記述を追加．
2012/06/25 ieでのsvgの描画処理についての記述を追加．
2012/06/27 canvgの項目を追加．
2012/06/28 図形描画品質の説明を追加．portraceの説明を拡充．
2012/06/29 fill-ruleの説明を追加．markerの記述ミスを修正．
2012/07/03 ラスタベクタ変換の項目に拙作のスクリプトへのリンクを追加．
2012/07/04 dataスキーム形式に変換する方法を追加．
2012/07/12 スクリプティングの項目を拡充．アニメーションイベントの項目を追加．
2012/07/13 メディアクエリの項目を追加．スクリプティングの項目を修正．
2012/07/14 svg非対応のブラウザの判定方法を追加．
2012/07/22 アニメーションタイミングAPIについての記述を追加．
2012/07/23 パターンによるハッチングを追加．scaleによる図形の反転を追加．ファイルサイズの最適化の記事を拡充．
2012/07/23 a要素によるアニメーションの開始，use要素，アニメーションについての記述を強化．
2012/07/24 svgViewについての記述を改訂．インラインフレーム内部のsvgの操作について記事を追加．color属性の使い方を拡充．
2012/07/27 各種図解を追加．Element Traversal Specificationについての記述を追加．
2012/07/28 target擬似クラスを用いたマルチページsvgの実現に関わる記述を追加．
2012/07/31 svgグラフィックに対するハイパーリンク定義の項目を分離．
2012/08/02 svg tiny 1.2の記述を追加．g要素のスタイリング，use要素のイベント処理についての記述を追加．モジュール化についての記述を追加．
2012/08/02 イベントの記述を追加．
2012/08/04 解説を追加．
2012/08/06 アニメーションの構成法についての記述を追加．
2012/08/07 transform属性についての補足を追加．
2012/08/08 transform属性についての記述を改訂．
2012/08/09 グラデーションについての記述を改訂．use要素の動的生成についての記述を追加．
2012/08/10 href属性についての間違いを訂正．特色文字列の一覧を追加．
2012/08/11 preserveAspectRatioの説明を改訂．グラデーションとマスクの項目の記述を追加．
2012/08/12 フィルターの項目を改訂．
2012/08/13 ブラウザの判定方法を追加．グラフィックの描画基準位置の変更法，filterによる画像の合成の記述を追加．
2012/08/17 スクリプトによりスタイルシートの変更についての記述を追加．
2012/08/22 vector-effect属性に関わる記述を追加．
2012/08/27 styleの項目を改訂．
2012/08/29 textPath要素の記述を追加．
2012/09/03 getScreenCTMメソッドの使い方を追加．
2012/09/13 検索エンジン対策についてのメモを追加．
2012/09/16 svgPrintについての記述を追加．
2012/09/17 画像の読み込みにおけるスクリプトの記述を追加．
2012/09/18 画像の分割についての記述を追加．スタイルシートの名前空間についての記述を追加．フォールバックについての記述を追加．
2012/09/19 opacity属性についての記述を追加．
2012/09/20 ブラウザごとの雑感を追加．
2012/09/21 テンプレート図形に対するスタイルの指定方法について記述を追加．
2012/09/22 feDisplacementMapの説明図が間違っていたのを修正．
2012/09/23 フィルターの説明を追加．導入文を改訂．
2012/09/24 cursor要素の記述を改訂．pattern,filterの継承についての記述を追加．patternTransform属性の記述を追加．
2012/09/25 :target擬似クラスを用いた際のsvgの印刷についての注意点を追加．getBBoxメソッドについての記述を追加．
2012/09/26 use要素を用いたリンク，スクリプトのモジュール化についての記述を追加
2012/09/27 用語の説明を追加．スクリプトによるインラインsvgの保存についての記述を追加．
2012/10/01 script要素の属性についての記述を追加．
2012/10/02 svgフォントの利用法について記述を追加．
2012/10/03 svgフォントのクロスドメインでの利用についての間違いを修正．
2012/10/04 合字についての記述を追加．
2012/10/05 svgフォントの内容を改訂．
2012/10/10 パス切片のスクリプトによる操作の記述を追加．
2012/10/10 円弧の性質についての記述を追加．
2012/10/15 パスの変形を行う方法についてヒントを追加．
2012/10/23 Raphaëlの項目を改訂．
2012/10/31 画像の回転とアスペクト比についての記述を追加．
2012/11/01 svgモジュールファイルに対するヒューマンエラー対策についての記述を追加．
2012/11/01 svgを用いた画像の右クリックを禁止する方法を追加．
2012/11/02 display属性の使い方の注意点を追加．
2012/11/04 pattern要素の説明を拡充．
2012/11/05 ie9に関わる説明を追加．
2012/11/06 sieの項目がie9で表示されなかった部分と条件付きコメントの記述にミスがあったのを修正．
2012/11/26 marker要素の折れ線グラフへの応用を追加．webフォントについての記述を追加
2012/11/27 feMorphologyの説明を改訂．
2012/11/28 pattern要素利用上の注意点を追加．
2012/11/30 svgfontの項目の記述を追加．だが，内容は未だ不明のまま．
2012/12/01 svgfontの項目の記述を改訂．
2012/12/02 path要素の項目，色の項目を拡充．
2012/12/03 text要素の項目を改訂．ブラウザ判定のサンプルを更新（safariとieに対応）
2012/12/04 clipPathUnits属性の抜けを修正，feDropShadow,feCustomの項目を追加．
2012/12/05 buffered-rendering属性を追加．
2012/12/05 システムカラーについての記述を追加．
2012/12/11 xml:lang属性，xml:space属性についての記述の間違いを訂正．
2012/12/12 svgを用いた回転画像の生成の項目を追加．
2012/12/13 marker要素のサンプルコードを改訂．
2012/12/14 線の装飾の項目を改訂．
2012/12/15 use要素とstyle要素の注意点を追加．
2012/12/16 ペイントサーバの重ねあわせ法の記述を追加．
2012/12/17 text-rendering属性の動作について記述を追加．
2012/12/18 marker属性を追加．tref要素の動作を訂正．xml:base属性の追加．a要素の説明の改訂．pathLength属性の追加．
2012/12/20 cursor要素を修正．ようやく動作の理屈が判った．text-overflow属性を追加．
2012/12/21 dtdによるスタイル設定について記述を追加．
2012/12/22 requiredExtentions属性に設定する値についての記述を追加．foreignObject要素のサンプルの動作が安定．
2012/12/23 altGlyph要素の内容を修正・改訂
2012/12/24 tspan要素の動作サンプルを追加
2012/12/26 font-face機構の動作サンプルを追加．
2013/01/07 用語の記述ミスを修正．異字体×→異体字○
2013/01/10 スクリプトにおいてsvgの名前空間uriの取得法を追加．animateTransform要素の補足を追加．（matrixは使えない）
2013/01/10 アニメーションの説明を追加．
2013/01/16 clipPath,mask,filter要素とカーソルイベントの発生についての比較コードを追加．
2013/01/18 getComputedStyleメソッドの記述を追加．グラデーションを色の共通化機構に応用する例を追加．
2013/01/19 camel形式のプロパティを経由したスタイルの設定についての記述を追加．
2013/01/21 dataスキーム形式におけるutf8での指定について記述を追加．rect,circle,ellipse要素の描画の起点についての記述を追加
2013/01/23 背景画像に設定したsvg画像のフォールバック手法を追加
2013/01/23 セキュリティについての記述を追加．
2013/01/24 ajaxによる外部svgグラフィックの読み込みについて記述を追加．
2013/01/24 dtdによる属性初期値の指定方法を追加．
2013/01/24 スタンドアロンsvgに対するファビコン画像の追加法を追加．
2013/01/25 d3.jsの利用法についての注意点を追加．
2013/02/04 color-interporation属性の実際の動作例を追加．
2013/02/08 スクリプトの項，ソースコードの取得・変換についての記述を追加．
2013/02/13 代替スタイルについての記述を追加．
2013/02/14 ブラウザレビューを更新（operaさん…）．
2013/02/14 webkitにおけるsmilアニメーションの注意点について記述を拡充．
2013/02/18 domapiについての解説を追加（gradientTransform,patternTransform）．
2013/02/22 グループ属性についての記述間違いを訂正（fill-opacity,stroke-opacity属性）．stroke-dasharray属性の動作について追記．
2013/02/23 chromeにおけるsmilアニメーション対策を追加．
2013/02/23 chromeにおける日本語文字化けの問題についての記述を追加．preserveAspectRatioが無効となる点について追記．
2013/02/24 画像の参照先を変更するアニメーションについての記述を追加．
2013/02/24 image要素のSVGLoadイベントがchromeで発生しないケースへの対処策を追加．
2013/02/25 foreignObject要素の記述を修正・座標系についての記述を追加．
2013/02/28 path図形を定義する際の単位指定の方法について記述を追加．
2013/03/04 スクリプトサンプルのバグを修正．
2013/03/18 svgのサポート確認スクリプトの改訂．
2013/03/19 アイコンフォントの使い方部の改訂．
2013/04/08 レンダリングエンジンの項を改訂．cssマスキングの項目を追加．transformの項目の説明を追加．
2013/04/10 ルートsvgに対するスタイル指定の項目を追加．レスポンシブsvgについての記述を追加．
2013/11/20 font-wieght属性の動作例を追加．
2014/01/21 レスポンシブsvgの項を改訂（あんまり変わってない）．
2014/01/31 SVGTextContentElementインターフェースに関わる記述を追加．text要素とスタイルについての記述を追加．
2014/03/11 dataスキーム形式の項目を改訂（Thanx Rikuo!）
2014/03/11 グラフィック描画の一部を固定する方法について記述を追加（styleの項）
2014/03/14 transform3dについてのノートを追加
2014/03/17 svgビュー記述・view要素についての記述を改訂．
2014/03/20 text要素に対するスタイル指定の記述を追加．
2014/03/20 1章を改訂．
2014/03/23 svgビュー記述→svgビュー指定と用語を変更
2014/03/25 transformの項を改訂，CTMについての記述を追加．
2014/03/25 scriptの項におけるtransformに関わる部分を改訂．
2014/04/09 SVGElementのviewportElementの説明を修正
2014/08/28 object要素におけるtype属性についての補足を追加．
2014/10/16 SVGフォントの項を改訂．SVGフォントをそのまま利用可能なWEBブラウザは消滅しました．Compositing and Blending Level 1の内容を追加
2014/10/17 先日の内容を詳細化． mix-blend-mode/isolationプロパティの項目を追加．
2014/10/27 altGlyph要素の廃止についての記述を追加．
2014/10/31 パスデータ文字列の応用先についてのメモを追加．
2014/11/09 mask-typeプロパティを追加．
2015/01/23 paint-orderプロパティを追加．
2015/02/04 meshGradient要素を追加．
2015/09/14 CSSの項を少し整理．（Thanx もんど!）

目次

更新履歴