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

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

3.図形の描画と図形のグループ化

SVGにおいてはグラフィック描画の手続きをXMLツリーとして表現する．様々な要素の組み合わせで複雑なグラフィックを構成するのだ．本項では最も基本のpath要素とその他の基本図形要素，及びg要素による図形のグループ化について説明する．これらの要素はSVGを表示可能な全ての環境で動作し，簡単なグラフィックであればこれだけで十分に間に合う．

path:パス図形の描画

path要素は任意の図形を表す．図形定義が柔軟に行えるが，円や四角などの単純な図形を描画するだけなら後述する専用の要素を使ったほうが良い．

パス図形の定義

d属性には曲線を引く際のコマンド(パスコマンド)のリスト(パスデータ文字列)を指定する．パスデータ文字列の前から順にコマンドを実行し，得られた(曲)線に囲まれた領域をパス図形と呼ぶ．SVGにおけるグラフィックはこのパス図形を元に描画される．

d属性に設定できるコマンドを示す．コマンドの後ろには座標やフラグ値をカンマ/スペース区切りで記述する．このコマンド群は後述するanimateMotion要素でも用いられる．

d
線を描く操作を表す．大文字は絶対位置指定，小文字は現在位置からの相対位置指定に対応する．
M,m
初期位置,位置のスキップ．
L,l
直線を引く
H,h
水平線を引く
V,v
垂直線を引く
C,c,S,s,Q,q,T,t
曲線を引く．端点と制御点とで曲線を指定する．
A,a
円弧を引く
Z,z
直近のM位置まで直線を引いて線を閉じる.なお，座標を重ねただけでは線が閉じられた事にはならない．
B,b
x軸の方向を設定する(他のコマンドによる描画に影響を及ぼす)†
R,r
Catmull-Romスプライン曲線を引く†
†SVG2での新機能．詳細仕様は策定中であり，動作する環境はまだない．
pathLength
パスの形式的な全長を指定する．stroke-dashoffsetやstroke-dasharray属性等はこの値を基準として描画される．(path要素専用の機能)
<svg viewBox="0 0 200 200">
    <!--
        パスコマンドや座標の区切りが判る範囲でスペースを省略，追加することが出来る．
        ここではコマンド毎に改行を入れてみた．
    -->
    <path stroke="black" stroke-width="1" fill="none" d="
            M 0 200
            L 25 50
            l 50 -25
            V 175
            H 100
            v -50
            h 25
            m 25 0
            l 50 0
            L 175 175
            z
    "/>
</svg>

なお，SVGにおけるパス図形の定義はSVGのみならず，様々な環境で利用できる．そのため，ツールによるSVG出力結果を他のアプリケーション環境で再利用することが可能だ．

パス定義の基本

Mコマンドにより曲線の始点を指定し，その他のコマンドを用いて次の頂点を指定していく．Zコマンドを実行した場合はMコマンドで指定した座標に自動的に直線が引かれ図形が閉じられる．なおZコマンドは指定しなくても良く，その場合は単なる折れ線（開いた図形）として扱われる．

<svg viewBox="0 0 200 200">
    <path stroke="black" stroke-width="20" fill="none" d="M20,70h60l-30,60z"/>
    <path stroke="black" stroke-width="20" fill="none" d="M120,70h60l-30,60l-30,-60"/>
</svg>

Mコマンドを途中で指定すると現在位置をスキップすることが出来る．Zコマンドを指定した後でMコマンドを開始することも出来る．これは複数の図形を1つのパスとして表したい場合に利用する．（逆に「M」でd操作文字列を分解すれば，複数のpath要素に分割すると言ったことも可能だ）

<svg viewBox="0 0 200 200">
    <path stroke="black" stroke-width="20" fill="none" d="M20,70h60l-30,60zM120,70h60l-30,60l-30,-60"/>
</svg>

各コマンドには絶対位置指定（大文字）と相対位置指定（小文字）の2種類が提供されている．相対位置指定を選択すると，直前に指定した頂点の座標を基準とした相対位置で次の頂点を指定することが出来る．相対位置指定でコマンドを定義しておくと，パスの起点を変更するだけでパス全体を移動させることができる．一方絶対位置指定では単一の座標を変更してもその他のパスの構成点は変化しないため，パスをアンカー的な扱いをする場合はこちらのほうが有利だ．

<svg viewBox="0 0 200 200">
    <path stroke="black" stroke-width="20" fill="none" d="M20,70H80L50,130z"/>
    <path stroke="black" stroke-width="20" fill="none" d="M120,70H180L150,130L120,70"/>
</svg>

同じコマンドを連続して用いる場合はコマンドの記述を省くことが出来る．が，見通しが悪くなるので多用は禁物である．

<svg viewBox="0 0 200 200">
    <path stroke="black" stroke-width="20" fill="none" d="M20,70l60,0,-30,60z"/>
    <path stroke="black" stroke-width="20" fill="none" d="M120,70l60,0,-30,60,-30,-60"/>
</svg>

Mコマンドの後ろに座標を連ねた場合はLコマンドとして扱われる．

<svg viewBox="0 0 200 200">
    <path stroke="black" stroke-width="20" fill="none" d="M20,70 80,70 50,130z"/>
    <path stroke="black" stroke-width="20" fill="none" d="m120,70 60,0 -30,60 -30,-60"/>
</svg>

線と面への色の指定

線の色はstroke，線の幅はstroke-width，塗りつぶしの色はfillで設定する．strokeとfillの両方に値が設定された場合は，塗り潰しの上に線が描画される†．以降の基本図形においても同様である．なお，strokeで描画される線はhtmlにおけるborderとは動作が異なる点に注意する．htmlのborder属性では要素を囲むように境界が描画されるが，svgのstroke属性による線の描画は線の中央が丁度図形の境界となる．

†なおSVG2をサポートしている環境であればpaint-orderプロパティによりこの順番を変更することができる.

stroke
線の色
none
線の描画を行わない．（透明とは異なる）
[color値]
線の色
url(#[id])
グラデーション，パターンの参照
currentColor
color属性の参照
stroke-width
線の幅
fill
塗りつぶしの色
none
塗り潰しの描画を行わない．（透明とは異なる）
[color値]
塗り潰しの色
url(#[id])
グラデーション，パターンの参照
currentColor
color属性の参照
<svg viewBox="0 0 200 200">
    <path d="M 20 20 h 160" stroke="black" stroke-width="1"/>
    <path d="M 20 40 h 160" stroke="red" stroke-width="3"/>
    <path d="M 20 60 h 160" stroke="green" stroke-width="5"/>
    <path d="M 20 80 h 160" stroke="blue" stroke-width="7"/>
    <!--pathを閉じていない例．左上の描画に注目-->
    <path d="M 20 100 h 160 v 30 h -160 v -30" stroke="aqua" stroke-width="10" fill="none"/>
    <!--pathを閉じた例．左上の描画に注目-->
    <path d="M 20 150 h 160 v 30 h -160 z" stroke="aqua" stroke-width="10" fill="blue"/>
    <path d="M 20 100 h 160 v 30 h -160 v -30" stroke="black" stroke-width="1" fill="none"/>
    <path d="M 20 150 h 160 v 30 h -160 z" stroke="black" stroke-width="1" fill="none"/>
</svg>

svgで利用可能な色

svgでは様々な場面でグラフィックの色を指定することとなるが，svgで利用可能な色の指定方法としては次のものがある．

この内，rgba関数，hsl関数，hsla関数による色の指定はsvg1.1では定義されていないもの，css3の機能として先行実装されたもので，svg2から正式にサポートされることとなっている．

<svg viewBox="0 0 200 200">
    <path d="M5,10h40v80h-40z" fill="red"/>
    <path d="M55,10h40v80h-40z" fill="rgb(0,255,0)"/>
    <path d="M105,10h40v80h-40z" fill="rgba(0,255,255,0.3)"/>
    <path d="M155,10h40v80h-40z" fill="rgba(0%,50%,100%,0.7)"/>
    <path d="M5,110h40v80h-40z" fill="hsl(90,90%,50%)"/>
    <path d="M55,110h40v80h-40z" fill="hsla(270,60%,25%,0.8)"/>
    <path d="M105,110h40v80h-40z" fill="#00ff00"/>
    <path d="M155,110h40v80h-40z" fill="#00f"/>
</svg>

塗り潰しを行いたくない場合の対処

図形に色を付けたくない，塗り潰したくない場合は「none」を指定するか，透明を表す「rgba(0,0,0,0)」（黒の透明）を指定するようにする．transparent（htmlにおける透明を表すキーワード）はoperaで対応しておらず黒で表示されてしまう．勘違いしやすいが「none」は透明を表すキーワードではなく，そこに塗り潰し領域が存在しない事を表す．その結果，後述するマウスイベント等が図形上で発生しなくなり，a要素におけるリンクも無効となると言った効果もある．これらの処理が必要な場合はpointer-eventsをall等に設定すると良い（詳しくは後述）．下記に例を示す．緑色の枠にカーソルを当ててもイベントが発生していないことが判る．

カーソルが乗っています
<svg viewBox="0 0 200 200">
    <style>
        g#hover>path:hover~text{
            display:inline;
        }
    </style>
    <g id="hover" stroke-width="5">
        <path d="M10,10h80v80h-80z" fill="transparent" stroke="red"/>
        <path d="M110,10h80v80h-80z" fill="none" stroke="green"/>
        <path d="M10,110h80v80h-80z" fill="rgba(0,0,0,0)" stroke="blue"/>
        <path d="M110,110h80v80h-80z" fill="none" pointer-events="all" stroke="purple"/>
        <text y="200" fill="black" stroke="none" display="none">カーソルが乗っています</text>
    </g>
</svg>

直線の描画

path要素では直線を引くコマンドとしてLコマンド，Hコマンド，Vコマンドの3つ（絶対位置，相対位置を分けると6つ）が提供されている．Lコマンドは現在位置から任意の座標に，Hコマンドは現在の位置から水平方向（x軸方向）に，Vコマンドは垂直方向（y軸方向）に線を引く場合に用いる．上手く使い分けることでコマンドの記述量を減らすことができる．

//絶対座標指定 //相対座標指定
<svg viewBox="0 0 200 200">
    <g stroke="black" stroke-width="5">
        //絶対座標指定
        <path d="M 20 20 L 80 80"/>
        <path d="M 20 20 H 80"/>
        <path d="M 20 20 V 80"/>
        //相対座標指定
        <path d="M 120 120 l 60 60"/>
        <path d="M 120 120 h 60"/>
        <path d="M 120 120 v 60"/>
    </g>
</svg>

曲線の描画

svgでは曲線を引くためにベジェ曲線コマンドが提供されている．

2次ベジェ曲線

2次ベジェ曲線を引くにはQコマンド及びTコマンドを用いる．Qコマンドでは制御点と次頂点の2つを指定する．

Tコマンドを用いて制御点の指定を省略することが出来る．前回用いた制御点から点対称の位置を新たな制御点として利用することで，曲線を滑らかにつなぐ．

<svg viewBox="0 0 200 200">
    <path d="M 0 0 Q 10 90 100 100 Q 110 10 200 0" stroke="black" stroke-width="1" fill="purple"/>
    <path d="M 0 0 L 10 90 L 100 100" stroke="black" stroke-width="2" fill="none"/>
    <path d="M 100 100 L 110 10 L 200 0" stroke="black" stroke-width="2" fill="none"/>
    <path d="M 0 200 Q 50 110 100 150 T 200 200" stroke="black" stroke-width="1" fill="yellow"/>
    <path d="M 0 200 L 50 110 L 100 150" stroke="black" stroke-width="2" fill="none"/>
    <path d="M 100 150 L 150 190 L 200 200" stroke="blue" stroke-width="2" fill="none" stroke-dasharray="2"/>
</svg>
<svg viewBox="0 0 200 200">
    <path d="M 25 25 L 175 25" stroke="black" stroke-dasharray="2"/>
    <path d="M 175 25 L 175 175" stroke="black" stroke-dasharray="2"/>
    <path d="M 25 25 Q 175 25 175 175" stroke="blue" fill="none"/>
    <path stroke="red">
        <animate attributeName="d" calcMode="linear" from="M 25 25 L 175 25" to="M 175 25 L 175 175" begin="0s" dur="6s" repeatCount="indefinite"/>
    </path>
    <circle fill="red" r="5">
        <animateMotion path="M 25 25 Q 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
    </circle>
</svg>

3次ベジェ曲線

3次ベジェ曲線を引くにはCコマンド及びSコマンドを用いる．Cコマンドでは始点に対する制御点，終点に対する制御点，次頂点（終点）の合わせて3つの点を指定する．制御点から頂点に引いた直線に接するように曲線が引かれる．

Sコマンドを用いて始点に対する制御点を省略することが出来る．前回用いた制御点から点対称の位置を新たな制御点として利用することで，曲線を滑らかにつなぐ．

<svg viewBox="0 0 200 200">
    <path d="M 0 0 C 25 50 50 75 100 100 C 125 50 175 50 200 0" stroke="black" stroke-width="1" fill="red"/>
    <path d="M 0 0 L 25 50 M 50 75 L 100 100 L 125 50 M 175 50 L 200 0" stroke="black" stroke-width="2" fill="none"/>
    <path d="M 0 200 C 50 200 50 100 100 125 S 150 200 200 200" stroke="black" stroke-width="1" fill="green"/>
    <path d="M 50 100 L 100 125" stroke="black" stroke-width="2" fill="none"/>
    <path d="M 100 125 L 150 150" stroke="blue" stroke-width="2" fill="none" stroke-dasharray="2"/>
</svg>
<svg viewBox="0 0 200 200">
    <path d="M 25 175 L 25 25" stroke="black" stroke-dasharray="2"/>
    <path d="M 175 25 L 175 175" stroke="black" stroke-dasharray="2"/>
    <path d="M 25 25 L 175 25" stroke="black" stroke-dasharray="2"/>
    <path d="M 25 175 Q 25 25 175 25" stroke="black" stroke-dasharray="2" fill="none"/>
    <path d="M 25 25 Q 175 25 175 175" stroke="black" stroke-dasharray="2" fill="none"/>
    <path d="M 25 175 C 25 25 175 25 175 175" stroke="blue" fill="none"/>
    <path stroke="red">
        <animate attributeName="d" calcMode="linear" from="M 25 175 L 25 25" to="M 25 25 L 175 25" begin="0s" dur="6s" repeatCount="indefinite"/>
    </path>
    <path stroke="red">
        <animate attributeName="d" calcMode="linear" from="M 25 25 L 175 25" to="M 175 25 L 175 175" begin="0s" dur="6s" repeatCount="indefinite"/>
    </path>
    <circle fill="red" r="5">
        <animateMotion path="M 25 175 Q 25 25 175 25" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
    </circle>
    <circle fill="red" r="5">
        <animateMotion path="M 25 25 Q 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
    </circle>
    <circle fill="red" r="5">
        <animateMotion path="M 25 175 C 25 25 175 25 175 175" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite"/>
    </circle>
</svg>

円弧の描画

先のベジェ曲線はどちらかというとグラフィックツール向けの機能だが，次に示す円弧の引き方はテキストベースでのsvg記述においても便利な機能だ． 円弧を引くにはA操作を行う．一般に始点と終点を通る半径が一定の円弧を考えると，長くて時計回り短くて時計回り長くて反時計回り短くて反時計回りの4曲線が得られる．従って，始点から終点に円弧を書く際にどのような円弧を引くかについてlarge-arc-flagでは円弧の長さの選択し，sweep-flagでは円弧の方向を選択する．

rx
水平方向の半径
ry
垂直方向の半径
x-axis-rotation
楕円の傾き
large-arc-flag
1:円弧の長い方を採用，0:短い方を採用
sweep-flag
円弧の方向 1: 時計回りを採用，0:半時計回りを採用
x,y
円弧の終点

角度は右へ伸びる線分を0度としそこから時計回りに数える．

構文は「A rx,ry x-axis-rotation large-arc-flag,sweep-flag x,y」と非常に長いので面倒ではある．

楕円の傾き
<svg viewBox="0 0 200 200">
    <g fill="none" stroke-width="15">
        <!--意図しない結果となってもどうせ4パターンしか無いからいろいろ試してみるといい．-->
        <path d="M 75,125 A 60,40 15 0,1 125,75" stroke="blue"/>
        <path d="M 75,125 A 60,40 15 0,0 125,75" stroke="red"/>
        <path d="M 75,125 A 60,40 15 1,1 125,75" stroke="yellow"/>
        <path d="M 75,125 A 60,40 15 1,0 125,75" stroke="green"/>
    </g>
    <g transform="rotate(15)">
        <line x1="-100" y1="0" x2="300" y2="0" stroke="black" stroke-dasharray="2"/>
        <text x="200" text-anchor="end">楕円の傾き</text>
    </g>
</svg>

半径の設定が始点と終点との距離よりも短い場合，円弧は自動的に拡大される．その際，楕円の中心は始点と終点の中央に合わせられ，sweep-flagは無視される．

<svg viewBox="0 0 200 200">
    <g fill="none" stroke="blue" stroke-width="10">
        <path d="M 75,100 A 1,4 0 0,1 125,100"/>
        <path d="M 75,100 A 1,4 30 0,1 125,100"/>
        <path d="M 75,100 A 1,4 60 0,1 125,100"/>
        <path d="M 75,100 A 1,4 90 0,1 125,100"/>
        <path d="M 75,100 A 1,4 120 0,1 125,100"/>
        <path d="M 75,100 A 1,4 150 0,1 125,100"/>
        <path d="M 75,100 A 1,4 180 0,1 125,100"/>
    </g>
    <g fill="none" stroke="red" stroke-width="10">
        <path d="M 75,100 A 1,4 0 0,0 125,100"/>
        <path d="M 75,100 A 1,4 30 0,0 125,100"/>
        <path d="M 75,100 A 1,4 60 0,0 125,100"/>
        <path d="M 75,100 A 1,4 90 0,0 125,100"/>
        <path d="M 75,100 A 1,4 120 0,0 125,100"/>
        <path d="M 75,100 A 1,4 150 0,0 125,100"/>
        <path d="M 75,100 A 1,4 180 0,0 125,100"/>
    </g>
    <g fill="none" stroke="yellow" stroke-width="5">
        <path d="M 75,100 A 1,4 0 1,1 125,100"/>
        <path d="M 75,100 A 1,4 30 1,1 125,100"/>
        <path d="M 75,100 A 1,4 60 1,1 125,100"/>
        <path d="M 75,100 A 1,4 90 1,1 125,100"/>
        <path d="M 75,100 A 1,4 120 1,1 125,100"/>
        <path d="M 75,100 A 1,4 150 1,1 125,100"/>
        <path d="M 75,100 A 1,4 180 1,1 125,100"/>
    </g>
    <g fill="none" stroke="green" stroke-width="5">
        <path d="M 75,100 A 1,4 0 1,0 125,100"/>
        <path d="M 75,100 A 1,4 30 1,0 125,100"/>
        <path d="M 75,100 A 1,4 60 1,0 125,100"/>
        <path d="M 75,100 A 1,4 90 1,0 125,100"/>
        <path d="M 75,100 A 1,4 120 1,0 125,100"/>
        <path d="M 75,100 A 1,4 150 1,0 125,100"/>
        <path d="M 75,100 A 1,4 180 1,0 125,100"/>
    </g>
</svg>

円の描画と応用

なお，何らかの目的があってpath要素で閉じた円を描画したい場合（例えばtextPath要素でテキストを円周上に並べたい場合など）は，一旦2つの半円に分け，それらを繋げるようにする．というのも，始点と終点が同じ場合円弧を引くことができないからだ．

<svg viewBox="0 0 200 200">
    <path d="M 25,100 A 75,75 0 1,1 175,100 A 75,75 0 1,1 25,100 z" stroke="black" fill="none"/>
</svg>

このような仕様になっているのは，円弧を他の曲線・直線と連結できるようにしているためで，中心と半径と角度を与えて円弧を描きたい場合には（三角関数を使って）端点の座標を算出する必要があるために非常に面倒である．このとき扇形を作りたいだけなら，circle要素で描いた円を別の図形で隠す方法もある．transform属性を使って覆いとなる図形を回転させることで扇形に見せるのだ．

<svg viewBox="0 0 200 200">
    <g transform="rotate(13,100,100)">
        <circle cx="100" cy="100" r="100" fill="red"/>
        <g fill="white" stroke="black" stroke-dasharray="2">
            <rect x="-10" y="-10" width="110" height="220"/>
            <rect x="100" y="-10" width="110" height="220" transform="rotate(48,100,100)"/>
        </g>
    </g>
</svg>

パスの統合・分離

複数のpath要素のd属性を連結することでパスの統合を行うことが出来る．またMコマンドで分割することで複数のパスに分離することができる．なお，mコマンドが指定されていた場合はパスの開始位置が直前のパスの終了位置からの相対指定となるため，位置がずれる点に注意しよう．

ベジェ曲線の利用

3次ベジェ曲線はその汎用性から広範な環境で利用されており，様々な特徴が数学的に確かめられている．svgにおいてもこれらの特徴をそのまま利用することができるので，いろいろ調べてみると良い．

2次ベジェ曲線を3次ベジェ曲線に変換する

一般にpath要素で記述する図形はA操作による円弧を除き全て3次ベジェ曲線に変換することができる．実際，任意の2次のベジェ曲線は3次ベジェ曲線に変換することができる．新たな制御点はもともとの制御点に対して丁度2/3の位置に取るようにする．参照元

<svg viewBox="0 0 200 200">
    <path d="M10,10 Q70,190 190,40" fill="none" stroke="red" stroke-width="3" stroke-dasharray="5" stroke-dashoffset="5"/>
    <path d="M10,10 C50,130 110,140 190,40" fill="none" stroke="blue" stroke-width="3" stroke-dasharray="5"/>
    <path d="M10,10 L70,190 L190,40" fill="none" stroke="black" stroke-dasharray="2"/>
    <path d="M10,10 L50,130 M110,140 L190,40" fill="none" stroke="blue"/>
</svg>

この変換は後に説明するアニメーションにおいて重宝する．d操作の形を揃えることでパス間の変形を自由に行えるようになるのだ．

円弧の近似

A操作による円弧も実用上問題がない程度に3次ベジェ曲線で近似することができる．半径に対し制御点を0.5522847倍の位置に定める．（実際ブラウザ内部でもこのように処理されているのかもしれない．）

<svg viewBox="0 0 200 200">
    <path d="M0,0 a 200,200 0 0,1 200,200" fill="red"/>
    <path d="M0,0 c 110.45694,0 200,89.54306 200,200" opacity="0.5"/>
    <path d="M0,0 h 110.45694 M200,200 v-110.45694" stroke="blue" stroke-width="3"/>
</svg>

このケースは中心角90°の円弧をベジェ曲線で近似したが，任意角度の円弧を近似することもできる．方法については参照元に詳しい．

放物線の描画法

ベジェ曲線を用いると，一般的に作図が面倒な放物線や3次曲線等を記述することができる．参照元．一般にどの放物線も平行移動・拡大・縮小・反転させることで重ね合わせることができるため，基本形を憶えておくと，d属性内部の座標を伸縮するだけで自由に放物線を記述できるようになる．但しtransform属性による変形は線の太さが変化するためお勧めできない．

尖った放物線を描く際，端点が描画範囲を大きく外れる場合は，clip-path属性で描画範囲を制限するとよい．

基本形：y=x^2
<svg viewBox="-110 -160 220 220">
    <g fill="none" stroke="black">
        <!--y軸対照な放物線のサンプル．放物線の頂点から相対位置で端点と制御点を指定しておくと後で流用しやすい．-->
        <!--端点・制御点の座標を伸縮することでいかなる放物線も表現可能-->
        <path d="M 0,0 m -100,-100 q 100,200 200,0" stroke-width="2"/>
        <line x1="-100" y1="0" x2="100" y2="0"/>
        <line x1="0" y1="-150" x2="0" y2="50"/>
    </g>
    <text x="10" y="20">基本形：y=x^2</text>
</svg>
基本形：y=x^3
<svg viewBox="-100 -100 200 200">
    <g fill="none" stroke="black">
        <path d="M 0,0 m -90,90 c 30,-90 60,-90 90,-90 s 60,0 90,-90" stroke-width="2"/>
        <line x1="-90" y1="0" x2="90" y2="0"/>
        <line x1="0" y1="-90" x2="0" y2="90"/>
        <g stroke-dasharray="2">
            <line x1="45" y1="0" x2="45" y2="-11.25"/>
            <line x1="90" y1="0" x2="90" y2="-90"/>
            <line x1="-45" y1="0" x2="-45" y2="11.25"/>
            <line x1="-90" y1="0" x2="-90" y2="90"/>
            <line x1="0" y1="-11.25" x2="45" y2="-11.25"/>
            <line x1="0" y1="-90" x2="90" y2="-90"/>
            <line x1="0" y1="11.25" x2="-45" y2="11.25"/>
            <line x1="0" y1="90" x2="-90" y2="90"/>
        </g>
    </g>
    <text x="10" y="20">基本形：y=x^3</text>
</svg>

放物線の例をもうひとつ示す．点(0,0)から(1,1)へ放物線を引く場合，3次ベジェ曲線の制御点を(1/3,0)，(2/3,1/3)に取ることで丁度放物線となる．これはアニメーションを定義する際，スプライン関数を使って自由落下のような動きを実現するのに非常に便利である．構造も判りやすいので，暗記してしまおう．

基本形：y=x^2
<svg viewBox="-110 -160 220 220">
    <g fill="none" stroke="black">
        <!--放物線のサンプルその２．-->
        <path d="M 0,0 m-90,-90 c30,60 60,90 90,90 c30,0 60,-30 90,-90" stroke-width="2"/>
        <line x1="-100" y1="0" x2="100" y2="0"/>
        <line x1="0" y1="-150" x2="0" y2="50"/>
    </g>
    <g stroke="blue" stroke-width="4">
        <line x1="0" y1="0" x2="30" y2="0"/>
        <line x1="60" y1="-30" x2="90" y2="-90"/>
    </g>
    <text x="10" y="20">基本形：y=x^2</text>
</svg>

d属性の座標指定に単位を反映させる

通常path要素のd属性の座標指定には単位を指定することが出来ない．その為本来%指定によるpath図形の描画は出来ないのだが，svg要素を入れ子として次のようにviewBox属性を0 0 100 100及びpreserveAspectRatioをnoneとすると，内部での幅と高さが100となり%で指定した場合と同じこととなる．

<svg>
    <svg y="12.5%" width="100%" height="75%" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path d="M0,0L50,50L100,0" fill="red"/>
        <path d="M0,0L50,50L0,100" fill="blue"/>
        <path d="M0,100L50,50L100,100" fill="green"/>
        <path d="M100,0L50,50L100,100" fill="yellow"/>
    </svg>
</svg>
<svg style="width:300px;height:200px;">
    <svg y="12.5%" width="100%" height="75%" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path d="M0,0L50,50L100,0" fill="red"/>
        <path d="M0,0L50,50L0,100" fill="blue"/>
        <path d="M0,100L50,50L100,100" fill="green"/>
        <path d="M100,0L50,50L100,100" fill="yellow"/>
    </svg>
</svg>

なおこの方法を利用した場合，stroke属性による線の描画幅に影響を及ぼす点に注意する．この問題はsvg1.2tinyのvector-effect属性を使うことで回避できる．

他の単位については下記のように単位領域に1×1のviewBoxを指定することで同様の記述ができる．overflow属性にvisibleを指定するとsvg要素の範囲外への図形描画が有効となることを利用する．

センチメートルによる描画 インチによる描画 パイカによる描画
<svg>
    <text x="25" y="40">センチメートルによる描画</text>
    <svg x="25" y="50" width="1cm" height="1cm" viewBox="0 0 1 1" overflow="visible">
        <path d="M0,0h3" stroke-width="0.1" stroke="red" stroke-linecap="round"/>
    </svg>
    <text x="25" y="90">インチによる描画</text>
    <svg x="25" y="100" width="1in" height="1in" viewBox="0 0 1 1" overflow="visible">
        <path d="M0,0h3" stroke-width="0.1" stroke="red" stroke-linecap="round"/>
    </svg>
    <text x="25" y="140">パイカによる描画</text>
    <svg x="25" y="150" width="1pc" height="1pc" viewBox="0 0 1 1" overflow="visible">
        <path d="M0,0h3" stroke-width="0.1" stroke="red" stroke-linecap="round"/>
    </svg>
</svg>

基本的な図形要素

直線，円，楕円，四角形，折れ線，多角形は全てpath要素で記述できるが，これらの基本的な図形については専用の要素が用意されている．path要素のd属性の可読性は余りよくないので，普段はこれらの要素を用いることとなるだろう．

line:直線の描画

line要素は直線を表す．属性値に始点と終点とを指定することで直線を引くことができる．終点を始点からの相対位置で指定したい場合はpath要素を用いると良い．

x1,y1
始点
x2,y2
終点
<svg viewBox="0 0 200 200">
    <line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="1"/>
</svg>

rect:四角形

rect要素は四角形を表す．左上の座標と幅,高さを指定することで四角形を作成することができる．また，頂点の半径を与えることで角が丸まる．なお，htmlでのborder-radiusのような角毎に半径を指定することはできないようだ．このようなケースでは面倒だがpath要素を使うしか無い．

x,y
左上の位置
rx
楕円の横方向の半径
ry
楕円の縦方向の半径
<svg viewBox="0 0 200 200">
    <rect x="10" y="10" width="120" height="100" stroke="black" stroke-width="1" fill="none"/>
    <rect x="50" y="50" rx="15" ry="10" width="120" height="100" stroke="black" stroke-width="1" fill="none"/>
</svg>

半径の値を辺の長さの半分（よりも大）に取るとrect要素で円や楕円を描画することができる．左上を描画の基準とするため，中心を描画の基準とするcircle要素，ellipse要素と使い分けると良い．

<svg viewBox="0 0 200 200">
    <rect x="10" y="10" width="120" height="120" rx="60" ry="60" stroke="black" stroke-width="1" fill="none"/>
    <rect x="50" y="90" rx="60" ry="40" width="120" height="80" stroke="black" stroke-width="1" fill="none"/>
</svg>

circle:円，ellipse:楕円

circle要素は円を表す．中心の座標と半径を指定することで円を作成することが出来る．

cx,cy
円の中心
r
円の半径

ellipse要素は楕円を表す．中心の座標と横方向の半径rxと縦方向ryの半径とを指定することで楕円を作成することが出来る．

<svg viewBox="0 0 200 200">
    <circle cx="70" cy="60" r="50" stroke="black" stroke-width="1" fill="yellow"/>
    <ellipse cx="120" cy="140" rx="50" ry="30" stroke="black" stroke-width="1" fill="yellow"/>
</svg>

polyline:折れ線，polygon:多角形

polyline要素は折れ線を表す．points属性に頂点のリストを設定することで折れ線を作成することが出来る．

points
頂点のリスト
<svg viewBox="0 0 200 200">
    <polyline points="50,50 150,50 150,150, 50,150 125,75 150,150" stroke="black" stroke-width="1" fill="lightgreen"/>
</svg>

polygon要素は多角形を表す．polyline要素との違いはpathが閉じられるか否かである．

<svg viewBox="0 0 200 200">
    <polygon points="50,50 150,50 150,150, 50,150 125,75 150,150" stroke="black" stroke-width="1" fill="lightgreen"/>
</svg>

塗りつぶしの方法

path・polyline・polygon要素を用いて塗りつぶし・敷き詰めを行った場合，その方法をfill-ruleで指定することができる．evenoddを指定すると線によって囲まれた領域が何本の線分に囲まれているかによって塗る・塗らない（白抜き）が切り替わる．この白抜きは憶えておくと便利かもしれない．

fill-rule
塗りつぶしの方法
nonzero
全面
evenodd
白抜き．領域が何本のpath/polygonにより囲まれているかを算出し，奇数領域を塗りつぶす．
0 1 1 2
<svg viewBox="0 0 200 200">
    <polygon points="50,50 150,50 150,150, 50,150 125,75 150,150" fill-rule="evenodd" stroke="black" stroke-width="1" fill="lightgreen"/>
    <g font-size="20">
        <text x="60" y="110">0</text>
        <text x="100" y="80">1</text>
        <text x="100" y="140">1</text>
        <text x="115" y="110">2</text>
    </g>
</svg>

path要素においてはfill-ruleがnonzeroであっても，白抜きとなるケースが発生する．複数のパスから構成されたpash図形であった場合，互いにパスの向きが逆向きであった場合は，内側と外側とが打ち消し合い，fill対象の領域から除外される．

0 1 2 0 1 0
<svg viewBox="0 0 200 200">
    <svg x="0" y="0" width="100" height="100" viewBox="0 0 200 200" overflow="visible">
        <path stroke="black" stroke-width="2" fill="lightgreen" fill-rule="nonzero" d="M 0,100 A 100,100 0 0,0 200,100 A 100,100 0 0,0 0,100 Z
            M 50,100 A 50,50 0 0,0 150,100 A 50,50 0 0,0 50,100 Z"/>
    </svg>
    <svg x="100" y="100" width="100" height="100" viewBox="0 0 200 200" overflow="visible">
        <path stroke="black" stroke-width="2" fill="lightgreen" fill-rule="nonzero" d="M 0,100 A 100,100 0 0,0 200,100 A 100,100 0 0,0 0,100 Z
            M 50,100 A 50,50 0 0,1 150,100 A 50,50 0 0,1 50,100 Z"/>
    </svg>
    <g font-size="20" text-anchor="middle">
        <text x="50" y="120">0</text>
        <text x="50" y="95">1</text>
        <text x="50" y="70">2</text>
        <text x="150" y="95">0</text>
        <text x="150" y="120">1</text>
        <text x="150" y="145">0</text>
    </g>
</svg>

線の装飾

strokeで引かれる線について様々な装飾を行うことができる．

点線の設定

stroke-dasharrayを設定すると点線になる．描画部と非描画部の長さをリスト形式で記述し，点線のパターンを定義する．stroke-dashoffset属性は点線の開始位置を指定する．

stroke-dasharray
点線の長さパターンの指定
stroke-dashoffset
点線の始まり位置
<svg viewBox="0 0 200 200">
    <line x1="20" y1="25" x2="180" y2="25" stroke="red" stroke-width="5" stroke-dasharray="10"/>
    <line x1="20" y1="40" x2="180" y2="40" stroke="green" stroke-width="5" stroke-dasharray="20,10"/>
    <path d="M20,80Q50,30,100,70T180,60" stroke="gray" stroke-width="5" stroke-dasharray="10" fill="none"/>
    <circle cx="50" cy="140" r="40" stroke="blue" stroke-width="5" stroke-dasharray="10" fill="none"/>
    <rect x="100" y="100" width="80" height="80" stroke="orange" stroke-width="5" stroke-dasharray="10" fill="none"/>
</svg>
<svg viewBox="0 0 200 200">
    <g stroke="red" stroke-width="18">
        <path d="M10,20h180" stroke-dasharray="20"/>
        <path d="M10,40h180" stroke-dasharray="20,30"/>
        <path d="M10,60h180" stroke-dasharray="20,30,10"/>
    </g>
    <g stroke="green" stroke-width="18" stroke-dashoffset="40" transform="translate(0,60)">
        <path d="M10,20h180" stroke-dasharray="20"/>
        <path d="M10,40h180" stroke-dasharray="20,30"/>
        <path d="M10,60h180" stroke-dasharray="20,30,10"/>
    </g>
    <g stroke="blue" stroke-width="18" stroke-dashoffset="-40" transform="translate(0,120)">
        <path d="M10,20h180" stroke-dasharray="20"/>
        <path d="M10,40h180" stroke-dasharray="20,30"/>
        <path d="M10,60h180" stroke-dasharray="20,30,10"/>
    </g>
</svg>

図形が複数のパーツから構成されていた（つまりpath図形にmコマンドによるジャンプが存在する）場合，そのパーツ毎に点線の描画処理が行われる．

<svg viewBox="0 0 200 200">
    <path d="M10,50h180 M10,100h180 M10,150h180" stroke-width="5" stroke="black" stroke-dasharray="50,30"/>
</svg>

端点と頂点のスタイル指定

stroke-linecapで端点のスタイル，stroke-linejoinで頂点のスタイルを指定する．stroke-widthの値を大きく取ると端点，頂点の形が目立つようになるが，これらのスタイルを設定することでより見栄えのする線を引くことが可能となる．この値はcanvas要素における内容と同じである．

stroke-linecap
端点のスタイル
butt
なし
round
円形
square
四角
stroke-linejoin
頂点のスタイル
miter
鋭角
round
円形
bevel
面取り
stroke-miterlimit
stroke-linejoinがmiterだった際の尖りの上限比率．尖り過ぎと判定されると自動的に面取りが施される．初期値は4．
<svg viewBox="0 0 200 200">
    <g stroke="black" stroke-width="20" fill="none">
        <polyline points="20,20 80,20 100,50 120,20 180,20" stroke-linecap="butt" stroke-linejoin="miter"/>
        <polyline points="20,70 80,70 100,100 120,70 180,70" stroke-linecap="round" stroke-linejoin="round"/>
        <polyline points="20,120 80,120 100,150 120,120 180,120" stroke-linecap="square" stroke-linejoin="bevel"/>
    </g>
    <g stroke="white" stroke-width="3" fill="none">
        <polyline points="20,20 80,20 100,50 120,20 180,20"/>
        <polyline points="20,70 80,70 100,100 120,70 180,70"/>
        <polyline points="20,120 80,120 100,150 120,120 180,120"/>
    </g>
</svg>

miter長は頂点からstrokeによる頂点までの距離であり，miter長/（stroke幅/2）（この値は頂点が為す角度から自動計算される）がstroke-miterlimit値よりも大きくなると自動的に面取り処理がなされる．従って十分に大きな値を設定しておけば面倒な計算を行うこと無く角を尖らせることが出来る．

<svg viewBox="0 0 200 200">
    <!--この例ではおよそ4.5が尖る尖らないの閾値となっている-->
    <g stroke="blue" stroke-width="20" fill="none" stroke-linejoin="miter">
        <polyline points="20,20 150,50 20,80" stroke-miterlimit="3"/>
        <polyline points="20,120 150,150 20,180" stroke-miterlimit="4.6"/>
    </g>
    <g stroke="white" stroke-width="2" fill="none">
        <polyline points="20,20 150,50 20,80"/>
        <polyline points="20,120 150,150 20,180"/>
    </g>
    <g>
        <path d="M150,20v160" stroke="black" stroke-width="1"/>
        <path d="M180,20v60" stroke="black" stroke-width="1"/>
        <path d="M196,120v60" stroke="black" stroke-width="1"/>
    </g>
</svg>

丸い点線を描く

stroke-dasharray属性とstroke-linecap属性を使って丸い点線を描くことができる．stroke-widthとstroke-dasharrayの値を調整し，丸の間隔を制御する．なお，長さ0の取扱いがブラウザによって異なるため，不都合がある場合は0の値を0.1とするなど目立たない程度に値を取ると良い．

<svg viewBox="0 0 200 200">
    <g stroke="orange" stroke-width="10" stroke-linecap="round">
        <line stroke-dasharray="0 8" x1="20" y1="20" x2="180" y2="20"/>
        <line stroke-dasharray="0 10" x1="20" y1="40" x2="180" y2="40"/>
        <line stroke-dasharray="0 15" x1="20" y1="60" x2="180" y2="60"/>
        <line stroke-dasharray="0 20" x1="20" y1="80" x2="180" y2="80"/>
        <line stroke-dasharray="0 10 0 20" x1="20" y1="100" x2="180" y2="100"/>
        <line stroke-dasharray="0 10 10 10 0 20" x1="20" y1="120" x2="180" y2="120"/>
        <line stroke-dasharray="0 10 10" x1="20" y1="140" x2="180" y2="140"/>
    </g>
</svg>

pathの一部にのみstrokeを引く

stroke-dasharray属性及びstroke-dashoffset属性は一般に点線を定義するためのものと思い込みがちだが，値を十分に大きく取ることでpath図形の一部にstrokeを引くといった用途に応用することが出来る．この場合，パスの道のりを基準とした描画となる．

<svg viewBox="0 0 200 200">
    <g fill="none">
        <path d="M 20,180Q50,0,100,100T180,20" stroke="black"/>
        <path d="M 20,180Q50,0,100,100T180,20" stroke-width="10" stroke="red" stroke-dashoffset="-50" stroke-dasharray="200,1000"/>
    </g>
</svg>
<svg viewBox="0 0 200 200">
    <g fill="none">
        <path d="M 20,180Q50,0,100,100T180,20" stroke="black"/>
        <path d="M 20,180Q50,0,100,100T180,20" stroke-width="10" stroke="red" stroke-dasharray="0,50,200,1000"/>
    </g>
</svg>

その際にpathLength属性を使ってpath要素で描画されるラインの形式的な長さを指定することで設定する値を簡略化することが出来る．なおブラウザによってpathLengthの影響を受ける属性の種類が異なる．

<svg viewBox="0 0 200 200">
    <g fill="none">
        <path d="M 20,180Q50,0,100,100T180,20" stroke="black"/>
        <path d="M 20,180Q50,0,100,100T180,20" pathLength="100" stroke-width="10" stroke="red" stroke-dashoffset="-20" stroke-dasharray="60,100"/>
    </g>
</svg>
<svg viewBox="0 0 200 200">
    <g fill="none">
        <path d="M 20,180Q50,0,100,100T180,20" stroke="black"/>
        <path d="M 20,180Q50,0,100,100T180,20" pathLength="100" stroke-width="10" stroke="red" stroke-dasharray="0,20,60,100"/>
    </g>
</svg>

rect要素，circle要素，ellipse要素の起点

rect要素・circle要素・ellipse要素で定義される図形に対しstroke-dasharrayを使った点線の描画を行う場合，その図形の描画起点を考える必要がある．

rect要素については図形の左上を起点とし，時計回りにパスを描く．但し角が丸まっていた場合はその分右に起点をずらすこととなる．

circle要素・ellipse要素については概ね中心から見て0°の方向から時計回りにパスを描く．

<svg viewBox="0 0 200 200">
    <g stroke-linecap="round" stroke-width="8" fill-opacity="0.5" stroke-dasharray="300,1000">
        <rect x="20" y="20" width="160" height="160" rx="30" ry="30" stroke="red" fill="yellow"/>
        <circle cx="100" cy="100" r="80" stroke="green" fill="pink" stroke-linecap="round"/>
        <ellipse cx="100" cy="100" rx="80" ry="40" stroke="blue" fill="aqua"/>
    </g>
</svg>

図形描画の品質

グラフなどを描画する際，図形の境界をくっきり表示させたい場合がある．このような場合は，属性shape-renderingにcrispEdgesを指定することでアンチエイリアシング処理を省き，境界を明確化することが出来る．なお，形状によっては非常に見苦しい結果となるので，適用する図形を吟味した上で利用したい．

shape-rendering
図形描画のクオリティ設定．（詳しくは後述する．）
<svg viewBox="0 0 200 200">
    <line x1="10" y1="10" x2="190" y2="10" stroke-width="1" stroke="black"/>
    <line x1="10" y1="30" x2="190" y2="60" stroke-width="1" stroke="black"/>
    <circle cx="50" cy="150" r="40" stroke-width="1" stroke="black" fill="none"/>
    <g shape-rendering="crispEdges">
        <line x1="10" y1="20" x2="190" y2="20" stroke-width="1" stroke="black"/>
        <line x1="10" y1="40" x2="190" y2="70" stroke-width="1" stroke="black"/>
        <circle cx="150" cy="150" r="40" stroke-width="1" stroke="black" fill="none"/>
    </g>
</svg>

g:図形のグループ化

g要素は図形をグループ化する．複数の図形を論理的にグループ化しグラフィック構造を明確化し，スタイルの設定を容易にする．なお図形固有の配置（位置とサイズ）についてはまとめることができない（詳しくはstyle要素の項で述べる）．g要素は階層構造をとることができる．ここでは2つの円にtransform属性を一括設定してみた．

<svg viewBox="0 0 200 200">
    <g stroke="black" stroke-width="1" fill="yellow" transform="scale(1,0.4)">
        <circle cx="120" cy="80" r="50"/>
        <ellipse cx="70" cy="80" rx="50" ry="30"/>
    </g>
    <g stroke="black" stroke-width="1" fill="orange" opacity="0.5">
        <circle cx="120" cy="80" r="50"/>
        <ellipse cx="70" cy="80" rx="50" ry="30"/>
    </g>
</svg>

要素に直接プレゼンテーション属性が設定されていた場合は，そちらの設定値が優先される．未設定の場合は一番近くのg要素の設定値が用いられる．

<svg viewBox="0 0 200 200">
    <g fill="red">
        <circle cx="70" cy="70" r="50"/>
        <circle cx="130" cy="70" r="50" fill="blue"/>
        <g fill="green">
            <circle cx="70" cy="130" r="50"/>
            <circle cx="130" cy="130" r="50" fill="yellow"/>
        </g>
    </g>
</svg>

なお例外もあって，g要素に設定された際にグループ化した図形全体に対する設定を与えるものもある．opacity, stroke-opacity, fill-opacity, mask, filterがこれに相当する．従って図形要素とg要素の両方にスタイルが指定されていた場合に思わぬ結果を引き起こす場合がある．

<svg viewBox="0 0 200 200">
    <g opacity="0.5">
        <rect x="10" y="10" width="80" height="80"/>
        <rect x="110" y="110" width="80" height="80" opacity="0.5"/>
    </g>
</svg>

概念上のg要素の用い方はこれで良いが，内部的な動作を捉えておこう．g要素が宣言されると，その中の図形は一時的な描画領域に描きこまれ，全ての図形の描画が完了した後に一時的な描画領域の内容が元の描画領域に複写されるのだ．描画のサブルーチン化とも言えるかもしれない．※ドローイングツールにおけるレイヤである．従って，g要素は図形をまとめると言った用途だけでなく，filterやmask等の画像処理の順番を制御する目的にも用いられる点を憶えておこう．

なおSVG2ではこの定義が変更され，よりグラフィックの構造化を主眼としたものとなった．

color属性による色指定の共通化

ここまでで塗りつぶしの色にはfill属性を，線の色にはstroke属性を用いることを学んだ．ただこのままだと異なる属性に同一の色を指定するのがいささか面倒である．このような場合はg要素とcolor属性を用いることで色設定の共通化を図ることができる．

color
色の指定．この値はfill属性，stroke属性，stop-color属性，flood-color属性，lighting-color属性から参照可能．参照する場合はcurrentColorを指定する．

使い方の例を示す．次の例は最も素朴な例だ．2つのrect要素のfill属性，stroke属性に同じ色を設定している．

<svg viewBox="0 0 200 200">
    <rect x="0" y="0" width="100" height="100" fill="red"/>
    <rect x="100" y="100" width="100" height="100" stroke="red" stroke-width="10" fill="none"/>
</svg>

これをg要素を用いて書き換えたもの．色を扱う要素においてはfill属性やstroke属性に「currentColor」を設定することでcolor属性に設定された色を参照するようになる．この特徴を踏まえて，g要素のcolor属性に色を指定することで，rect要素のfill属性，stroke属性の両方に同じ色がされている．全く同じ描画結果ながら色の設定が1箇所にまとまり大分見通しが良くなったはずだ．

<svg viewBox="0 0 200 200">
    <g color="red">
        <rect x="0" y="0" width="100" height="100" fill="currentColor"/>
        <rect x="100" y="100" width="100" height="100" stroke="currentColor" stroke-width="10" fill="none"/>
    </g>
</svg>

colorの値をcssで指定しても同じ結果となる．

<svg viewBox="0 0 200 200">
    <g style="color:blue;">
        <rect x="0" y="0" width="100" height="100" fill="currentColor"/>
        <rect x="100" y="100" width="100" height="100" stroke="currentColor" stroke-width="10" fill="none"/>
    </g>
</svg>

もうひとつの特徴として，svg要素を含んでいるhtml要素（例えばdiv要素）についてcssのcolorプロパティが設定されていると，svg要素内部の図形にそのcolor属性が引き継がれる．この特徴を利用してHtmlの文字列とsvg要素の色とを一括して定義するといった利用も可能である．この機能は非常に役に立つので絶対に憶えておいたほうが良い．

カーソルを合わせてみて下さい．ここは黄色緑色の文字列になっているはずです．

付録・システムカラーキーワード

ActiveBorder
アクティブウィンドウの境界
ActiveCaption
アクティブウィンドウのタイトルバー
AppWorkspace
mdi(multiple document interface)の背景色
Background
デスクトップ背景
ButtonFace
立体ボタンの表面
ButtonHighlight
立体ボタンの陰の部分
ButtonShadow
立体ボタンの影
ButtonText
立体ボタンのテキスト
CaptionText
テキスト
GrayText
無効化されたテキスト
Highlight
選択アイテム
HighlightText
選択中のテキスト
InactiveBorder
非アクティブウィンドウの境界
InactiveCaption
非アクティブウィンドウのタイトルバー
InfoBackground
ツールチップ背景
InfoText
ツールチップテキスト
Menu
メニュー背景
MenuText
メニューテキスト
Scrollbar
スクロールバーの背景
ThreeDDarkShadow
立体部品の陰
ThreeDFace
立体部品の表面
ThreeDHighlight
立体部品のハイライト
ThreeDLightShadow
立体部品の光源側境界
ThreeDShadow
立体部品の影
Window
ウィンドウ背景
WindowFrame
ウィンドウ枠
WindowText
ウィンドウ内テキスト

付録・css色キーワード

色色名r,g,b値
aliceblue240, 248, 255
antiquewhite250, 235, 215
aqua 0, 255, 255
aquamarine127, 255, 212
azure240, 255, 255
beige245, 245, 220
bisque255, 228, 196
black 0, 0, 0
blanchedalmond255, 235, 205
blue 0, 0, 255
blueviolet138, 43, 226
brown165, 42, 42
burlywood222, 184, 135
cadetblue 95, 158, 160
chartreuse127, 255, 0
chocolate210, 105, 30
coral255, 127, 80
cornflowerblue100, 149, 237
cornsilk255, 248, 220
crimson220, 20, 60
cyan 0, 255, 255
darkblue 0, 0, 139
darkcyan 0, 139, 139
darkgoldenrod184, 134, 11
darkgray169, 169, 169
darkgreen 0, 100, 0
darkgrey169, 169, 169
darkkhaki189, 183, 107
darkmagenta139, 0, 139
darkolivegreen 85, 107, 47
darkorange255, 140, 0
darkorchid153, 50, 204
darkred139, 0, 0
darksalmon233, 150, 122
darkseagreen143, 188, 143
darkslateblue 72, 61, 139
darkslategray 47, 79, 79
darkslategrey 47, 79, 79
darkturquoise 0, 206, 209
darkviolet148, 0, 211
deeppink255, 20, 147
deepskyblue 0, 191, 255
dimgray105, 105, 105
dimgrey105, 105, 105
dodgerblue 30, 144, 255
firebrick178, 34, 34
floralwhite255, 250, 240
forestgreen 34, 139, 34
fuchsia255, 0, 255
gainsboro220, 220, 220
ghostwhite248, 248, 255
gold255, 215, 0
goldenrod218, 165, 32
gray128, 128, 128
grey128, 128, 128
green 0, 128, 0
greenyellow173, 255, 47
honeydew240, 255, 240
hotpink255, 105, 180
indianred205, 92, 92
indigo 75, 0, 130
ivory255, 255, 240
khaki240, 230, 140
lavender230, 230, 250
lavenderblush255, 240, 245
lawngreen124, 252, 0
lemonchiffon255, 250, 205
lightblue173, 216, 230
lightcoral240, 128, 128
lightcyan224, 255, 255
lightgoldenrodyellow250, 250, 210
lightgray211, 211, 211
lightgreen144, 238, 144
lightgrey211, 211, 211
lightpink255, 182, 193
lightsalmon255, 160, 122
lightseagreen 32, 178, 170
lightskyblue135, 206, 250
lightslategray119, 136, 153
lightslategrey119, 136, 153
lightsteelblue176, 196, 222
lightyellow255, 255, 224
lime 0, 255, 0
limegreen 50, 205, 50
linen250, 240, 230
magenta255, 0, 255
maroon128, 0, 0
mediumaquamarine102, 205, 170
mediumblue 0, 0, 205
mediumorchid186, 85, 211
mediumpurple147, 112, 219
mediumseagreen 60, 179, 113
mediumslateblue123, 104, 238
mediumspringgreen 0, 250, 154
mediumturquoise 72, 209, 204
mediumvioletred199, 21, 133
midnightblue 25, 25, 112
mintcream245, 255, 250
mistyrose255, 228, 225
moccasin255, 228, 181
navajowhite255, 222, 173
navy 0, 0, 128
oldlace253, 245, 230
olive128, 128, 0
olivedrab107, 142, 35
orange255, 165, 0
orangered255, 69, 0
orchid218, 112, 214
palegoldenrod238, 232, 170
palegreen152, 251, 152
paleturquoise175, 238, 238
palevioletred219, 112, 147
papayawhip255, 239, 213
peachpuff255, 218, 185
peru205, 133, 63
pink255, 192, 203
plum221, 160, 221
powderblue176, 224, 230
purple128, 0, 128
red255, 0, 0
rosybrown188, 143, 143
royalblue 65, 105, 225
saddlebrown139, 69, 19
salmon250, 128, 114
sandybrown244, 164, 96
seagreen 46, 139, 87
seashell255, 245, 238
sienna160, 82, 45
silver192, 192, 192
skyblue135, 206, 235
slateblue106, 90, 205
slategray112, 128, 144
slategrey112, 128, 144
snow255, 250, 250
springgreen 0, 255, 127
steelblue 70, 130, 180
tan210, 180, 140
teal 0, 128, 128
thistle216, 191, 216
tomato255, 99, 71
turquoise 64, 224, 208
violet238, 130, 238
wheat245, 222, 179
white255, 255, 255
whitesmoke245, 245, 245
yellow255, 255, 0
yellowgreen154, 205, 50
  1. TOPページ
  2. svgの基礎知識
  3. svg要素とsvg文書
  4. 図形の描画と図形のグループ化
  5. 図形の変形
  6. 図形の定義と再利用
  7. スタイル設定
  8. マーカーの定義と設定
  9. 文字列の挿入
  10. グラデーションとパターン
  11. 画像の合成
  12. 画像効果
  13. アニメーション
  14. 連携・拡張
  15. 図形の表示とカーソルイベント
  16. スクリプティング
  17. フォント定義
  18. その他の要素と属性
  19. svg tiny 1.2の要素・属性
  20. Raphaëlを用いたベクタグラフィック
  21. D3.jsによるグラフの描画
  22. sieを用いたベクタグラフィックの描画
  23. canvgを用いたcanvas要素との連携
  24. 目的別リンク
  25. 参考文献