はじめに
SVG (Scalable Vector Graphics) は、ウェブ上で高品質で拡張性の高い図形を表現するためのオープンな標準フォーマットです。この記事では、SVGの基本構文について詳しく解説していきます。
SVG要素の構造
SVGは、XML形式で記述されます。基本的な構造は、以下のようになります:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="幅" height="高さ" viewBox="0 0 幅 高さ">
<!-- SVGコンテンツをここに記述 -->
</svg>version属性
version属性は、SVGの仕様バージョンを指定します。通常は”1.1″を指定します。
xmlns属性
xmlns属性は、SVGの名前空間URIを指定します。これは、SVGがXML言語に基づいていることを示すためです。
width、height属性
width、height属性は、SVGの表示サイズをピクセルで指定します。表示サイズと描画範囲は別物なので、注意が必要です。
viewBox属性
viewBox属性は、SVGの描画範囲を指定します。この範囲内に、SVGコンテンツが収められます。x、y、width、heightの4つの値を指定します。
基本図形
SVGには、いくつかの基本的な図形要素が用意されています。これらの要素を組み合わせることで、様々な図形を描くことができます。
rect要素
rect要素は、矩形を描画します。基本的な属性は以下の通りです:
- x, y: 左上隅の座標
- width, height: 矩形のサイズ
- rx, ry: 角の丸み具合を指定
circle要素
circle要素は、円を描画します。基本的な属性は以下の通りです:
- cx, cy: 中心の座標
- r: 半径
ellipse要素
ellipse要素は、楕円を描画します。基本的な属性は以下の通りです:
- cx, cy: 中心の座標
- rx, ry: x方向とy方向の半径
line要素
line要素は、直線を描画します。基本的な属性は以下の通りです:
- x1, y1: 開始点の座標
- x2, y2: 終了点の座標
polyline要素
polyline要素は、複数の直線からなる折れ線を描画します。pointsという属性に座標の列を指定します。
polygon要素
polygon要素は、多角形を描画します。polyline要素と同様に、pointsに座標の列を指定しますが、最初と最後の座標が自動的に接続されます。
パス
パスは、SVGで最も柔軟で表現力の高い要素です。曲線や複雑な図形を自由に描くことができます。
path要素
path要素は、d属性にパス情報を指定することで、任意の図形を描画できます。パス情報は、以下のようなコマンドで構成されています:
- M (移動): 開始点を指定
- L (線分): 直線を引く
- H (水平線): 水平方向の直線を引く
- V (垂直線): 垂直方向の直線を引く
- C (三次ベジェ曲線): 制御点を使った曲線
- S (二次ベジェ曲線): 制御点を使った曲線
- A (楕円弧): 楕円の一部を描く
- Z (クローズ): パスを閉じる
パスの例
以下は、三角形を描くパスの例です:
<path d="M 100 100 L 300 100 L 200 300 z" />
スタイル
SVGの図形には、さまざまなスタイルを適用できます。塗りつぶしの色や線の色、線の太さなどを指定することができます。
fill属性
fill属性は、図形の塗りつぶしの色を指定します。単色の他、線形グラデーションや放射グラデーションを指定することもできます。
stroke属性
stroke属性は、図形の線の色を指定します。lineやpathなどの線を含む図形要素で使用します。
stroke-width属性
stroke-width属性は、線の太さをピクセル単位で指定します。
stroke-linecap属性
stroke-linecap属性は、線の端の形状を指定します。butt (平らな端)、round (丸い端)、square (平らで延長された端) を選べます。
stroke-linejoin属性
stroke-linejoin属性は、線の接合部分の形状を指定します。miter (尖った角)、round (丸い角)、bevel (面取りされた角) を選べます。
まとめ
この記事では、SVGの基本構文について詳しく解説しました。SVGを使うことで、ウェブ上で高品質で拡張性の高い図形を表現することができます。基本的な図形要素を組み合わせたり、パスを使って複雑な図形を描いたりと、SVGの表現力は非常に高いものがあります。また、スタイルを適用することで、さらに魅力的なグラフィックスを作成できるでしょう。SVGを活用することで、インタラクティブでビジュアル的に魅力的なウェブコンテンツを作成することができます。
この記事はAIを元にした記事となっております。
