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>

XHTMLの使用は、主に文書構造の整合性を重視する場合や、XMLと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上のグラフィカルなコンテンツやデータ可 視化などで広く利用されています。