SVGの常用ラベル

以下の六つのラベルは最もよく使われています。比較的簡単なものです。
 
1）ライン：直線
 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">



<line x1="0" y1="0" x2="300" y2="300"

style="stroke:rgb(99,99,99);stroke-width:2"/>



</svg>

コードの説明：x 1属性x軸で線の開始y 1属性を定義します。y軸で線の開始x 2属性を定義します。x軸で線の終了y 2属性を定義します。y軸で線の終了を定義します。
 
 
2）polyline：折れ線
 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">



<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>



</svg>

 
3）rect：長方形
 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">



<rect x="20" y="20" rx="20" ry="20" width="250"

height="100" style="fill:red;stroke:black;

stroke-width:5;opacity:0.5"/>



</svg>

 
rect要素のwidthとheight属性は、長方形の高さと幅style属性を定義して、CSS属性CSSのfill属性を定義する長方形の塗りつぶし色（rgb値、色名または16進数値）CSSのstoke-width属性を定義します。長方形の枠の幅CSSのstoke属性は、長方形の枠の色を定義します。
x属性定義矩形の左側位置（例えば、x=0）は、長方形からブラウザウィンドウの左側までの距離を0 pxと定義します。y属性定義矩形の先端位置（例えば、y=0）は、長方形からブラウザウィンドウの先端までの距離を0 pxと定義します。CSSのfill-opacity属性は、塗りつぶし色の透明度を定義します。CSSのstrook-opacity属性は、タッチの色の透明度を定義します。
CSSのopacity属性は、要素全体の透明値を定義します。
rxとryの属性は長方形に角を作ることができます。
 
4）circele：円形

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">



<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red"/>



</svg>

 
cxとcy属性は、ドットのxとy座標を定義する。cxとcyを省略すると、円の中心は(0,0)に設定されます。
r属性は円の半径を定義します。
 
5）ellipse：楕円形
 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">



<ellipse cx="300" cy="150" rx="200" ry="80"

style="fill:rgb(200,100,50);

stroke:rgb(0,0,100);stroke-width:2"/>



</svg>

 
cx属性定義円点のx座標cy属性定義円点のy座標rx属性定義水平半径ry属性定義垂直半径
6）ポリゴン：ポリゴン
 
 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">



<polygon points="220,100 300,210 170,250"

style="fill:#cccccc;

stroke:#000000;stroke-width:1"/>



</svg>

 
points属性は多角形の各角のxとy座標を定義します。