SVG

The svg element of Scalable Vector Graphics (SVG) is the root element for displaying vector graphics, defining images that can be scaled without loss of resolution based on XML.

svg element

　Scalable Vector Graphics（SVG）は、ベクターグラフィックスを表現するための XMLベースのフォーマットです。svg要素は、SVG画像を定義するルート要素であり、SVGドキュメントの基本構造を提供します。

基本構造

XML

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
	<!-- SVGコンテンツ -->
</svg>

width と height: SVGの幅と高さを指定します。
xmlns: SVGの名前空間を指定するための属性で、常に http://www.w3.org/2000/svg を使用します。

主な属性

viewBox

形式: viewBox="min-x min-y width height"

XML

<svg width="100" height="100" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

preserveAspectRatio

ビューポートと viewBoxのアスペクト比をどのように保持するかを指定します。

例: preserveAspectRatio="xMidYMid meet"

version

使用している SVGのバージョンを指定します。

SVG要素内の主なコンテンツ

図形要素: rect（長方形）、circle（円）、ellipse（楕円）、line（線）、polyline（折れ線）、polygon（多角形）、path（パス）など。
テキスト要素: text要素を使って文字列を表示できます。
グループ化: g要素を使って関連する要素をグループ化できます。

Sample

　簡単な SVG例です。円とテキストを表示します。

XML

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
	<circle cx="100" cy="100" r="50" fill="blue" />
	<text x="100" y="105" font-size="20" text-anchor="middle" fill="white">SVG</text>
</svg>

　この例では、青い円の中央に白い文字で「SVG」と表示されています。

　SVGの主な特徴として、解像度に依存せず拡大縮小が可能である点や、XMLベースであるため、他の XML形式と互換性が高い点が挙げられます。また、JavaScriptや CSSと組み合わせることで、インタラクティブなグラフィックスを作成することも可能です。