SVG
SVG(Scalable Vector Graphics)は、XMLベースのベクター画像フォーマットであり、Webページやアプリケーションなどで利用されます。SVGは、HTMLと同様にブラウザで表示され、CSSやJavaScriptなどと連携して操作することができます。本チュートリアルでは、SVGの基礎的な使い方を紹介します。
前提条件

本チュートリアルに進む前に、以下の前提条件を満たしている必要があります。
SVGの基礎

SVGは、座標系を利用してベクター画像を表現します。座標系において、原点(0, 0)からx軸正方向に正の値を持つ座標が増加する右手系が一般的です。
SVGの基礎

SVGでは、以下のような要素を使用して図形を描画します。
SVGの基礎

これらの要素には、座標やサイズ、色などの属性を設定することができます。
SVGの構文

SVGはXMLベースの言語であるため、HTMLと同様にタグと属性を使用して要素を定義します。以下は、簡単なSVGファイルの例です。
SVGの構文

これらの属性を組み合わせることで、SVG画像を複雑な図形にすることができます。
SVGの例

以下は、SVGを使用した簡単な例です。
SVGの例

この例では、円、矩形、直線、パスを使用して図形を描画しています。それぞれの要素には、cx、cy、r、x、y、width、height、x1、y1、x2、y2、dなどの属性が設定されています。
目次

「※」がついている単元はサブページ未作成。 (編集者へ: サブページが出来たら、更新して「※」を除去してください。)
ブラウザでの外部ファイル表示

SVGは規格と実装との間に差があり、 外部ファイルとしてSVGファイルを読み込ませる場合のプログラミングがやや面倒です。(JavaScriptのよう簡単にはいきません。)
ブラウザでの外部ファイル表示

ウェブブラウザに外部ファイルとしてSVGファイルを読み込ませたい場合、Firefoxの場合なら、その外部SVGファイルに冒頭に、下記コードのように
ブラウザでの外部ファイル表示

こういった必要があります。(Windows版のFirefoxの場合、キャンバスサイズをGoogle Chrome と同様に省略できるが(標準設定のサイズになる)、Linuxなど他OSの場合ではキャンバスサイズが必要になる場合もある。ブラウザが同じ「Firefox」でもOSごとに実装が微妙に違う。)
ブラウザでの外部ファイル表示

Google Chrome および Microsoft Edge の場合も同様に、名前空間 xmlns="http://www.w3.org/2000/svg" の指定が必要です。(なお Google Chrome および Microsoft Edge の場合、キャンバスサイズの指定がなくても自動でキャンバスサイズの設定が行われる。)
ブラウザでの外部ファイル表示

この様に、名前空間などを記述が欠落するとSVGファイルであることがブラウザに伝わらず。希望通り表示できなかったりエラーメッセージを伴う結果と成る。
ブラウザでの外部ファイル表示

なお、キャンバスサイズを図形より小さい場合にはハミだしている部分は非表示になります(上記コードでは意図的にハミ出しています)。上記コードは縦長の長方形を表示するコードですがキャンバスサイズをハミ出た下半分は非表示になります。
ブラウザでの外部ファイル表示

上記の外部SVGファイルを呼び出すHTMLファイル側は使う要素によって下記のようにマークアップが異なる。
ブラウザでの外部ファイル表示

SVGファイルは画像ファイルなので、IMAGE要素で読み込めます。IMAGE要素ではsrc属性で外部ファイルを指定します。
ブラウザでの外部ファイル表示

もしWindowsで、上記コードを実行した場合にブラウザの要素などのタイトルが文字化けする場合、<meta charset="utf-8">を除去してください(Windowsではバージョンによっては文字コードがUTF-8ではなくShift_JISなので)。以下のOBJECT要素などでも同様です。
ブラウザでの外部ファイル表示

OBJECT要素は、オブジェクトデータを記述するためのHTML要素です。 OBJECT要素ではsrc属性に代わってdata属性で外部ファイル指定します。。
ブラウザでの外部ファイル表示

このほか、EMBED要素を使う方法もある。
ブラウザでの外部ファイル表示

EMBED要素は、埋め込み外部コンテンツ要素を記述するためのHTML要素である。 EMBED要素ではsrc属性で外部ファイル指定します。
画像そのものの記法

rect要素で表します。
画像そのものの記法

改行をする必要はありませんが、上記コードでは見やすさを重視してfill属性の手前で改行してあります。
画像そのものの記法

rect要素で最低限必要なのは、位置と幅を指定するための次の4要素です。
画像そのものの記法

rectの不等号のペア(<rect ... >)の最後に、下記のように/が必要です。(下記コードの場合、 stroke-width="5" の次の部分。 )
画像そのものの記法

もし、この/が終わりに無いと、ファイルの終端まで</rect>を探すことになります。(長方形以外の、円や線分など他の静止図形のタグでも同様、最後に「/」が必要です。)
画像そのものの記法

なお、下記のように、付随的な要素をstyleでまとめても良い。なお、下記のようにstyleでまとめる記法はCSSに由来するものであり、インラインCSSという記法です。(fillの次の点々はセミコロン、#FFFFFFの次の点々はコロンです。混同しないよう、注意しましょう。)
画像そのものの記法

なお、fillは閉じた領域の塗りつぶしの色です。strokeは、境界線など線分の色です。 fill="#FFFFFF;のFFは16進数です(十進数の255に相当)。
画像そのものの記法

fillを指定しない場合、noneと書いても良いです。
画像そのものの記法

なお、noneの代わりにblueやredと書くと、それぞれの色になります(つまり、HTMLカラーが使えます)。たとえば青色に内側を塗りつぶすなら
画像そのものの記法

とも書けます。
画像そのものの記法

色については rgb(11,11,11)のように0~255の十進数の数値指定で書いてもよいでしょう。つまり、
画像そのものの記法

とも書ける。この場合、水色(うすめの青)で塗りつぶしています。
画像そのものの記法

rectに限らず、円や線分など他の図形でも同様に、styleやrgbを使うことができます。
画像そのものの記法

色の指定は%単位でも可能ですが、rgbの3色すべてに%をつける必要があります。
画像そのものの記法

色はさらに、不透明度アルファを追加したrgba()を使える。ただし、不透明度の値の指定は 0.0 ~ 1.0 の間の数値で行わなければならない。SVGの不透明度は 0 で完全に不透明であり、1 で完全に透明である。
画像そのものの記法

rgbaの第4引数は不透明度である。0から1の間で指定する。不透明にしたい場合には値を1にする。この不透明の数値の指定方法は、CSSに由来する方法である。(Inkscapeなどのドローソフトでは不透明度を0~255の数値で指定するものもあるが、ブラウザ版SVGの仕様とは異なるので注意。)
画像そのものの記法

rgba()関数は、0~255までの定義域と、0~1までの定義域とが混在しているので、あまりメンテナンスがしやすくないかもしれません。
画像そのものの記法

rgb()関数でも透明の処理もできるように、属性で fill-opacity という塗りつぶし領域の不透明度を 0.0 ~ 1.0 で指定できる属性がありますので、メンテナンスのしやすさから、不透明度の指定には fill-opacity を使うほうがいいかもしれません。
画像そのものの記法

fill-opacity は 0 で完全に不透明であり、1 で完全に透明である。
画像そのものの記法

なお、ストロークの不透明度を指定できる stroke-opacity という属性もあるのですが、あまり実装の性能がよくありません。ハードウェアの事情により、太いストロークを描画する場合に、微妙に表示が崩れてしまう場合があります。
画像そのものの記法

図形のカドを丸まらせたい場合(製図の用語で言う「フィレット」)、rxおよびryで丸めの半径を指定できる。
画像そのものの記法

この他、transfrom属性とrotate()関数を使って、斜めに傾いた長方形などの図形を書けます。長方形以外の図形や文字列もrotate()関数に対応しています。
画像そのものの記法

詳しくは、回転の単元で説明します。
画像そのものの記法

circle要素で表します。circleでは、円の形を中心点の座標位置と半径のペアで表します。
画像そのものの記法

polygon要素で表します。英語の polygon ポリゴンとは、日本語で「多角形」を意味します。
画像そのものの記法

下記のコード例では座標 (0,100)、(50,0)、(100,100) を結んだ三角形を表示します。
画像そのものの記法

の書式です。
画像そのものの記法

なお、閉じていない単なる折れ線を描画したい場合には、polygon 要素ではなく polyline (ポリライン)要素を使います。
画像そのものの記法

polyline (ポリライン)要素で折れ線を書けますが、fill属性およびstroke属性が必要です。 どのブラウザでも、fillの指定が無いと、塗りつぶしをしてしまいます。
画像そのものの記法

また、fillをnoneにしたあとは、strokeが設定の無い限りストローク色も無しになってしまい描画されない状態なので、strokeも再設定する必要があります。
画像そのものの記法

折れ線の内部の、それぞれの曲がりのある角の箇所での描画方法を指定できます。
画像そのものの記法

線の太さ(stroke-width)の範囲内で、角を丸めるか(round)、尖らすか(miter)、面取り(bevel)をするかを指定できます。
画像そのものの記法

何も指定ない場合には、miterで描画するように設定されています。
画像そのものの記法

SVGのこれらの機能は、あくまで線の太さの範囲内でしか、処理を行えません。(つまり、たとえば製図ソフト AutoCAD のような面取り・フィレットは、SVGのこれらの指定では出来ないです。) また、その折れ線の内部のすべての曲がり箇所で、同様の曲がり具合(あるいは尖り具合)で描画します。
画像そのものの記法

stroke-linejoin属性によって、"round"または"miter"または"bevel"を指定します。
画像そのものの記法

stroke-dasharray(ストローク・ダッシュ アレイ)属性を使って、破線などを描くことができます。
画像そのものの記法

書式は
画像そのものの記法

といったふうに、描く部分と描かない部分との繰り返しです。
テキストの描画

SVGのTEXT要素は、テキストを描画するために使用されます。具体的には、SVGにテキストを配置するために使用され、さまざまなスタイル、フォント、配置オプションを指定することができます。
テキストの描画

以下は、TEXT要素の使い所の例です。
テキストの描画

文字列の開始位置は、左下です。左上ではないので、注意してください。
テキストの描画

追加の属性として、
テキストの描画

など、設定できます。
回転

まず、基準の図形として、回転していない図形の描画をしましょう。
回転

この図形をたとえば斜めに傾かせたい場合、回転させる図形のタグの属性において
回転

の書式で属性を追記することで、回転を指定できます。
回転

角度の単位は、直角を90度とする「度」単位です。(日本なら、小学校で習う角度の単位と同じです。)
回転

なお、座標を指定しない場合、原点を中心として回転します。
回転

たとえば上記コードなら、長方形の右上が10度持ちあがった図形になります。
回転

長方形だけでなく、楕円や折れ線や多角形など他の図形でも、この方法で回転が可能です。
回転

また、textタグの文字列も同様に、この方法で回転が可能です。
構造化

g タグを用いて、gタグ内のオブジェクトに共通する属性を一括で記述できます。このような仕組みをSVG用語では一般に「グループ化」といいます。
構造化

たとえば上のコードの場合、長方形と円との両方に、ストロ-ク色を青に指定し、内側の塗りつぶし色を白に指定と、一括で指定しています。
構造化

なお、各オブジェクトにgタグの指定内容と矛盾する属性がある場合、普通は各オブジェクト側の指定が優先されます。たとえばcircleタグで stroke="red" という指定と、gタグの開始タグで stroke="blue" があれば、円のストローク色は赤色で表示されます。(Firefox, google Chrome, Microsoft Edge どれも結果は同じく、円ストロークだけ赤色の結果です。WindowsだけでなくLinuxでも同様の結果です。 )
構造化

SVGとCSSは、Webページで視覚的なデザインを行うために広く使用されています。CSSは、HTML要素のスタイルを設定することができますが、SVG要素にも同様のスタイルを設定することができます。SVG要素にCSSを適用するには、SVG要素にIDやクラスを割り当て、それらをCSSセレクタで参照する必要があります。
構造化

例えば、以下のSVGファイルは、<circle>要素にIDを割り当て、CSSセレクタで参照して、円の色や大きさを変更しています。
構造化

この例では、CSSのセレクタ #myCircle が、IDが myCircle である要素に適用されています。fill プロパティは円の内部の色を設定し、r プロパティは円の半径を変更しています。
構造化

SVG要素に適用できるCSSプロパティは、HTML要素に適用できるCSSプロパティと同様です。しかし、SVG要素にはHTML要素にはない独自のプロパティもあります。例えば、stroke-dasharray プロパティは、SVGの線要素に適用することができ、線の点線や破線を設定することができます。
構造化

また、SVG要素にCSSを適用することで、SVG要素をアニメーションさせることもできます。例えば、以下のSVGファイルは、RECT要素にクラスを割り当て、CSSでアニメーションを設定しています。
SVGで付加情報を記述する方法

SVGでは、要素に対してタイトルや解説などの情報を付加することができます。例えば、以下のように記述します。
SVGで付加情報を記述する方法

タイトルは、title要素で記述します。一方、解説はdesc要素で表します。これらの要素は、SVG内のどこにでも記述することができますが、一般的にはsvg開始タグの直後に記載するのが慣例です。
SVGで付加情報を記述する方法

ただし、ブラウザによっては、title要素の内容が表示されない場合があります。また、ファイル名に対する情報として表示される場合もあります。
まとめ

SVGは、XMLベースのベクター画像フォーマットであり、Webページやアプリケーションなどで利用されます。SVGを使用することで、高品質でスケーラブルな図形を簡単に作成することができます。SVGはHTMLと同様にタグと属性を使用して要素を定義し、CSSやJavaScriptと組み合わせて操作することができます。