svg の覚え書き

初版作成　　2021.2.25
最終更新　　2024.04.01

◆◆ ファイル先頭 ◆◆


<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="480px" viewBox="0 0 600 480">

width, height : web ページに表示するときのピクセル数

100% のように % で指定する方法もある。
ブラウザの横幅いっぱいに描く

viewBox の範囲内を width height のサイズで描く
PostScript の Bounding Box に相当するようだ

座標位置は左上が (0,0)

◆◆ 属性の指定方法 ◆◆


線色        stroke="#ff0000"
線幅        stroke-width="2"
塗りつぶし  fill="#ffffff"   fill="none"
点線        stroke-dasharray="5,3"
　　　　　　"a, b, c" のように奇数個指定すると
　　　　　　a b c a b c という数列に対して、「線あり、線なし」が
　　　　　　交互に割り当てられる

◆◆ 図形要素 ◆◆


・線
<line x1="10" y1="20" x2="20" y2="20" stroke="#a0c0c0" stroke-width="2" />

・長方形
<rect x="0" y="0" width="400" height="100" fill="#000000" stroke-width="2" />

・折れ線
<polyline points="x1 y1, x2 y2, y3 y3, x4 y4" fill="none" stroke="#000000" stroke-width="3" />

・多角形（折れ線との違いは、始点と終点が自動的につながる）
<polygon points="x1 y1, x2 y2, y3 y3, x4 y4" fill="#ff00ff" stroke="#000000 stroke-width="2" />

・パス
<path d="M 5 20 L 20 5 L 35 20 L 20 20 Z" stroke="#000000" fill="transparent" stroke-width="2">

最初は MoveTo から始まらねばならない。LineTo で開始すると、
線を描かない。
Z は close path

・文字
<text x="10" y="10" fill="#ff0000" font-size="20" font-family="Century" transform="rotate(angle xorg yorg)">Hello World</text>

rotate は角度　角度は時計回りが正
回転の中心位置  xorg yorg は x y の値と同一にする
font-family の例
Century
Symbol
Times
Helvetica
Verdana    Helvetica と似ている　少し横幅が広い

◆◆ 自作グラフ描画ライブラリとの対応 ◆◆


svg の単位はピクセル

1 xy-unit = 1/262 cm

A4 の紙を 21 cm x 29.7 cm として
xy-unit に換算すると 5502 x 7781 となる

svg ファイルのピクセル数は上記の値に設定する。