18.XMLベースのテクノロジー - XHTML(eXtensible HyperText Markup Language) - SVG(Scalable Vector Graphics)
XMLベースのテクノロジー
XHTML(eXtensible HyperText Markup Language)
XHTMLは、HTMLの拡張であり、より厳格なXML構文に基づいたマークアップ言語です。 HTMLが寛容であるのに対し、XHTMLはXMLの規則に従うことが求められます。 これにより、文書の整合性が向上し、XMLの柔軟性をHTMLに組み込むことが可能となりました。
XHTMLはHTMLと基本的な構造は同じですが、以下のような点が異なります。
- タグの小文字化: XHTMLではすべてのタグと属性が小文字で記述される必要があります。これはXMLの構文規則に基づいています。
- 閉じられたタグ: すべての要素は閉じられた形式で記述される必要があります。例えば、<p>要素は</p>で閉じられます。
- 属性の引用: 属性値はダブルクォーテーションでくくられる必要があります。
以下は、XHTMLの例です。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Example</title>
</head>
<body>
<h1>Hello, XHTML!</h1>
<p>This is an XHTML document.</p>
</body>
</html>
SVG(Scalable Vector Graphics)
SVGは、XMLベースのベクトルグラフィックス言語であり、静的または動的な2次元のベクトル画像を表現するために使用されます。 ベクトルグラフィックスは拡大縮小しても画質が劣化せず、異なる解像度のデバイスで一貫した表示が可能です。
SVGの特徴的な点には以下があります。
- 座標系: SVGは座標系を使用してオブジェクトを配置します。絶対座標や相対座標を指定することができます。
- 図形とパス: SVGでは様々な図形(円、四角形、直線など)やパス(曲線、直線の連結)を描画できます。
- スタイルとアニメーション: CSSを使用してスタイルを適用し、アニメーションを追加することができます。
以下は、SVGの例です。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="80" fill="green" />
<text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="white">SVG</text>
</svg>
この例では、円とテキストがSVGで描画されています。SVGはWeb上のグラフィカルなコンテンツやデータ可 視化などで広く利用されています。