HTML, XML, SVGの歴史と基本

HTML と XML

1986年に SGML (Standard Generalized Markup Language) が世界で最初に標準化された後,
HTML と XML が生まれました.
HTML は主に PC初心者がページのソースを簡単に記述できることを目的とし,
1991年にティム・バーナーズ＝リーによって開発されています.
一方, XML は SGML を簡素化して汎用性を高める目的で, 1998年に W3C (World Wide Web Consortium) によって開発されました.
その後, 2000年に HTML 4.01 と XML の仕様をミックスしたマーク・アップ言語である
XHTML (Extensible HyperText Markup Language) がスタートしています.
XHTML は HTML の厳密なバージョンとして2000年代初頭に流行しましたが,
XML形式で書くことを強制していたことでブラウザ・エラーが多発したため,
2008年に HTML5 が登場し, XHTML は役割を終えました.

HTML と XML の比較

SVG の基本

▼ SVG_Command.pdf ▼

SVG (Scalable Vector Graphics) は XML を基盤としたフォーマットとして設計され, グラフィカルな内容をデータ形式で利用できるように作られています.

SVG の描画要素

• circle - 円
• rect - 矩形/長方形
• line - 線
• ellipse - 楕円
• polygon - 多角形
• polyline - 折れ線
• path - 任意の形状

SVG 独自の属性 / SVG 内で図形を描画する際に使われる専用のプロパティについて

＊ タグ<svg> ではなく SVG内部の要素について

図形: 線の色(外枠) / 線の太さ / 塗り

SVG の stroke / stroke-width / fill などの属性は, style の属性を使って書いても同じ効果が得られる.

stroke="blue"stroke-width="4"fill="#abcdef"

style="stroke:blue;stroke-width:4; fill:#abcdef;"

ただし, HTMLで使用する style は SVGには適用不可
style="border:solid 1px blue;background-color:#abcdef;"

SVG の書き方

準備 - その1: タグ<svg> 〜 </svg> で Viewport ビューポート (表示領域) を設定する

タグ<svg> と attribute width="400"height="400"を記述する

<svg width="400"height="400">

</svg>

領域は設定されているが, 通常は何も表示されない

準備 - その2: 作業中だけ Viewport に border(枠線) を付けておくことができる

style を追加する

<svg width="400"height="400"style="border:1px solid #456789;">

</svg>

今は範囲を確認するために style="border:1px solid #456789; を追加してある

準備 - その3: 場合によっては Viewport に border と background-color を追加することもできる

<svg width="400"height="400"style="border:1px solid #456789;background-color:#eeeeee;">

</svg>

style="border:1px solid #456789;background-color:#eeeeee;"

① 絶対パスで直線を描く

タグ<svg> の子要素として, タグ<path> と attribute "d"(データのこと / 小文字)を記述する
注意：<path> は Self-Closing Tag

■ 使用するコマンド
大文字 M は絶対パス → Move To:
大文字 L は絶対パス → Line To:

座標 (50,150)とは, 左の枠線から右方向に 50px 進んだ位置 ( x座標 ) で,
150 は 上の枠線から下方向に 150px 下りた位置 ( y座標 )のこと.
M50,150: の座標を原点とし, そこから L350,150 の座標まで線を引く.

<svg width="400"height="400"style="border:1px solid #456789;">

<path d="M50,150 L350,150"stroke="blue"stroke-width="4"/>

</svg>

または 〜

<style>
.パス_スタイル{border: 1px solid #456789;}
.path-style{stroke:blue;
stroke-width:4;}
</style>

<svg width="400"height="400"class="パス_スタイル">
<path d="M50,150 L350,150"class="パス_スタイル"/>
</svg>

② 相対パスで直線を描く

小文字 m は相対パス(Move To:)
小文字 l (エル)は相対パス(Line To:)

座標 (50,150)とは, 50 (x座標): 左から右に 50px 進んだ位置で,
150 (y座標): 上から下に 150px 下りた位置のこと.
m50,150: という原点から 300,0 に移動する.
L150,50: (50,50) から (150,50) に線を引く.
L150,150: (150,50) から (150,150) に線を引く.

<svg width="400"height="400"style="border:1px solid #456789;">

<path d="m50,150 l300,0"stroke="blue"stroke-width="4"/>

</svg>

③ 絶対パス / 相対パスで三角形を描く

Z / z: コマンドは Close Path ( クローズ・パス / 閉じるコマンド )と言い,
最初の点に戻る役割を果たします.

<svg width="400"height="400"style="border:1px solid #456789;">

<!-- 絶対パスで三角形 -->
<path d="M50,50 L150,50 L150,150 Z"fill="none"stroke="green"/>

<!-- 相対パスで三角形 -->
<path d="m50,250 l100,0 l0,100 z"fill="none"stroke="red"/>

</svg>

④ Bezier Curve ( ベジェ曲線 ) の書き方

cx は 円の中心のX座標 ( 水平方向の位置 ) で,
cy は 円の中心のY座標 ( 垂直方向の位置 )を指定している.
r は 円の半径.

1次ベジェ曲線 → 始点から終点まで直線 / 制御点が0個
　　　　　　　　コマンド: L (Line To) または l で表現される
　　　　　　　　直線はカーブしていないが, これも「ベジェ曲線」の一種とみなされる
2次ベジェ曲線 → 始点から制御点を経由して終点に到達する曲線(制御点が1個) 
　　　　　　　　　　/ 制御点が曲線の形状を決定する
　　　　　　　　コマンド: Q (Quadratic Bezier Curve) または q で表現される
3次ベジェ曲線 → 制御点が2個
　　　　　　　　コマンド: C (Cubic Bezier Curve) または c で表現される
数学的には 4次, 5次, 6次…と「次数」を増やすことも可能だが,
サポートされている SVGコマンドはない

<svg width="400"height="400">

<path d="M50,150 C150,150 250,150 350,150"stroke="blue"stroke-width="4"fill="transparent"/>

</svg> 

<svg width="400"height="400">

<path d="m50,150 c100,0 200,0 300,0"stroke="blue"stroke-width="4"fill="transparent"/>

</svg> 

Control Point (制御点) / Start Point (開始点) / End Point (終点)

<svg width="400"height="400">

<path d="M50,150 C150,50 250,250 350,150"
stroke="blue"stroke-width="4"fill="transparent"/>
<circle cx="150"cy="50"r="4"fill="green"/>
<circle cx="50"cy="150"r="8"fill="red"/>
<circle cx="350"cy="150"r="8"fill="#ff0000"/>

</svg>                   

Control Point (制御点) / Start Point (開始点) / End Point (終点)

<svg width="400"height="400"style="border:1px solid #456789;">

<path d="m50,150 c100,-100 200,100 300,0"
stroke="blue"stroke-width="4"fill="transparent"/>
<circle cx="150"cy="50"r="4"fill="green"/>
<circle cx="50"cy="150"r="8"fill="red"/>
<circle cx="350"cy="150"r="8"fill="#ff0000"/>

</svg>

1次ベジエ曲線(直線のみ)

2次ベジエ曲線(曲線を含む)

3次ベジエ曲線(曲線を含む)

⑤ 円の書き方

<svg width="400"height="400"style="background-color:lightgray;">

<circle cx="200"cy="200"r="50"fill="blue"/>

</svg>

⑥ SVGオブジェクトをリンク・ボタンにする

<svg width="400"height="400"style="background-color:lightgray;border:1px solid black;">
<a href="https://html-suisui.com/"><rect x="50"y="50"
width="150"height="150"fill="blue"/></a>
<a href="https://html-suisui.com/"><
circle cx="250"cy="250"r="50"fill="red"/></a>

</svg>

1. 移動コマンド
M (Move To) → 指定した座標に移動する
大文字: 絶対座標を指定
小文字: 現在の座標を基準とした相対座標を指定

2. 直線コマンド
L (Line To) → 現在の点から指定した座標まで直線を描く
大文字: 絶対座標を指定
小文字: 相対座標を指定

H (Horizontal Line To)

現在の点から指定した x 座標まで水平な直線を描く
大文字: 絶対 x 座標を指定
小文字: 相対 x 座標を指定

V (Vertical Line To)

現在の点から指定した y 座標まで垂直な直線を描く
大文字: 絶対 y 座標を指定
小文字: 相対 y 座標を指定

3. ベジエ曲線コマンド
C (Cubic Bezier Curve) → 3次ベジエ曲線(開始点 / 2つの制御点 / 終点)を描く
大文字: 絶対座標を指定
小文字: 相対座標を指定

S (Smooth Cubic Bezier Curve)

Q (Quadratic Bezier Curve) → 3次ベジエ曲線の制御点を自動計算しながら滑らかな線を描く
大文字: 絶対座標を指定
小文字: 相対座標を指定

2次ベジエ曲線を描きます（開始点、1つの制御点、終点）
大文字: 絶対座標を指定
小文字: 相対座標を指定

T (Smooth Quadratic Bezier Curve)

2次ベジエ曲線の制御点を自動計算しながら滑らかな曲線を描く
大文字: 絶対座標を指定
小文字: 相対座標を指定

4. 円弧コマンド
A (Arc To) → 指定した半径, 角度、方向で弧を描く
大文字: 絶対座標を指定
小文字: 相対座標を指定

5. 終了コマンド
Z (Close Path) → 現在の点からパスの開始点に戻ってパスを閉じる
大文字・小文字の区別なし: 同じ動作