基礎
svg は html内で直接コードを入力して利用できますので、webブラウザがあれば動作を確認できます。 次のような感じで svg タグを用いて利用します。<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="100">
ここに描きたい線や円などの要素を記述.
</svg>
svgタグの xmlns="..." は SVG のいろいろなタグを認識するために必要なものです。widthは横、heightは縦の幅になります。 単位は cm や mm などいろいろ使用できますが、省略した場合、pxになるようです。
属性 | 意味 |
width | 横の長さ |
height | 縦の長さ |
直線(line)
線を引く場合、line を用います。 lineは (x1,y1)を始点 (x2,y2)を終点の座標として次のように指定します。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="100">
<line x1="10" y1="10" x2="250" y2="80" stroke="black" />
</svg>
stroke は線の色を意味します。
属性 | 意味 |
(x1,y1) | 始点 |
(x2,y2) | 終点 |
stroke | 線の色 |
stroke-width | 線の太さ |
lineの「(x1,y1)は始点」「(x2,y2)は終点」の座標ですが、この座標の取り方は次のようになります。
yの座標の取り方は、下方向が正になっているので注意が必要です。
長方形(rect)
属性 | 意味 |
(x,y) | 左上の座標 |
width | 横幅 |
height | 縦幅 |
stroke | 線の色 |
fill | 塗りつぶしの色 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="110">
<rect x="5" y="5" width="120" height="100" fill="none" stroke="black" />
</svg>
円(circle)
属性 | 意味 |
(cx,cy) | 中心座標 |
r | 半径 |
stroke | 線の色 |
fill | 塗りつぶしの色 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="50">
<circle cx="50" cy="25" r="20" fill="none" stroke="black" />
</svg>
楕円(ellipse)
属性 | 意味 |
(cx,cy) | 中心座標 |
rx | 横の半径 |
ry | 縦の半径 |
stroke | 線の色 |
fill | 塗りつぶしの色 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="70">
<ellipse cx="50" cy="35" rx="30" ry="25" fill="none" stroke="black" />
</svg>