SVG（Scalable Vector Graphics）は、XMLベースのファイルフォーマットで、主に2Dグラフィックを描画するために使用されます。SVGは、スケーラブル（拡大縮小可能）であり、品質を損なうことなく、どんな解像度でも表示することができます。そのため、ウェブデザインやインターフェースデザインでよく利用されています。ここでは、SVGを使用してシンプルな図形を作成する方法について、包括的に解説します。
SVGの基本構造
まず、SVGファイルの基本的な構造を理解することが大切です。SVGファイルは、通常、以下のような形式で記述されます。
xmlns属性は、XMLネームスペースを指定します。これにより、SVGとして認識されます。widthおよびheight属性は、SVGの描画領域のサイズを指定します。
この基本構造を基に、様々な図形を描くことができます。
1. 長方形の作成
SVGでは、長方形（
xとyは、長方形の左上の座標を指定します。widthとheightは、長方形の幅と高さを指定します。fillは、長方形の塗りつぶし色を指定します。
上記のコードは、左上に青色の長方形を描画します。
2. 円の作成
円を描くためには、
cxとcyは、円の中心の座標を指定します。rは、円の半径を指定します。fillは、円の塗りつぶし色を指定します。
この例では、赤い円が中央に描画されます。
3. 線（直線）の作成
直線を描くためには、
x1とy1は、直線の始点の座標を指定します。x2とy2は、直線の終点の座標を指定します。strokeは、直線の色を指定します。stroke-widthは、直線の太さを指定します。
この例では、緑色の直線が始点（10,10）から終点（150,150）まで描画されます。
4. 多角形の作成
多角形を描くには、points属性を使用します。
points属性には、頂点の座標をカンマ区切りで指定します。各頂点はx,y形式で指定します。fillは、多角形の塗りつぶし色を指定します。
この例では、黄色の三角形が描画されます。
5. パス（複雑な形状）の作成
SVGでは、より複雑な形状を描くために
d属性は、パスのデータを指定します。例えば、Mは移動、Qは二次ベジェ曲線を描く命令です。fillは、パス内の塗りつぶし色を指定します。strokeは、パスの線の色を指定します。stroke-widthは、線の太さを指定します。
この例では、曲線と直線が組み合わさった紫色のパスが描画されます。
6. テキストの追加
SVGでは、テキストを追加することもできます。テキストを追加するには、
xとyは、テキストの開始位置を指定します。font-familyは、使用するフォントを指定します。font-sizeは、テキストのサイズを指定します。fillは、テキストの色を指定します。
この例では、こんにちはという文字が指定した位置に描画されます。
7. グラデーションの使用
SVGでは、グラデーションを使用して、図形の色を滑らかに変化させることができます。
stopタグで色の変化点を指定します。fill="url(#grad1)"で、グラデーションを塗りつぶしとして適用します。
この例では、黄色から赤への線形グラデーションが適用された長方形が描画されます。
結論
SVGは、非常に柔軟で強力なグラフィック技術です。上記で紹介した基本的な図形作成の方法を理解すれば、複雑な図形やアニメーションの作成も可能になります。SVGを活用することで、ウェブページに軽量で美しいグラフィックを追加することができます。