SVGの基本図形 rect circle path

SVGでは、(0,0)が左上隅になる座標系を使用します。Xは右方向に増加し、Yは下方向に増加します。ビューポートはwidth属性とheight属性で定義され、座標空間はviewBox属性で定義されます。

<rect x="10" y="10" width="200" height="100" rx="8" ry="8">で長方形を描画します。rxとryで角を丸めます。塗りつぶしと線は、fill属性とstroke属性またはCSSで制御します。xとyを省略すると、デフォルトで0,0になります。

<circle cx="100" cy="100" r="50">で円を描画します。cxとcyは中心座標、rは半径です。SVGの円にはcanvasのarcの角度パラメーターに相当するものがなく、常に完全な円になります。

<ellipse cx="100" cy="100" rx="80" ry="40">で楕円を描画します。rxは水平方向の半径、ryは垂直方向の半径です。rxとryが等しい楕円は、円と同じ形になります。

<line x1="0" y1="0" x2="100" y2="100">は1本の線分を描画します。<polyline points="0,0 100,50 200,0">は、複数の座標ペアを通る接続された線分を描画します。どちらも自動的には閉じられません。

<polygon points="100,10 190,190 10,190">はpolylineに似ていますが、図形が自動的に閉じられます。つまり、最後の点と最初の点が線で結ばれます。三角形や星、その他の正多角形のような閉じた図形にはpolygonを使用します。

pathは最も強力なSVG図形で、線、円弧、曲線を組み合わせたあらゆる形状を表現できます。d属性にはパスコマンドが含まれます。M (moveTo)、L (lineTo)、A (arc)、C (cubic bezier)、Q (quadratic bezier)、Z (closePath)を使用します。

大文字のコマンドは絶対座標を使用し、小文字のコマンドは相対座標を使用します。M 100 50は(100,50)に移動します。L 200 150は(200,150)まで線を描画します。Zはパスを閉じます。A rx ry rotation large-arc sweep x yは円弧を描画します。

SVGの図形では、fill、stroke、stroke-width、opacity、stroke-dasharrayなどのCSSを使用できます。保守しやすいスタイル設定には、SVG要素にCSSクラスを使用します。SVGのCSSトランジションはfill、stroke、opacityで機能し、状態を滑らかに変化させられます。

<g>要素はSVG要素をグループ化します。グループにtransform、fill、strokeを適用すると、すべての子要素に影響します。グループ化により、時計の文字盤とそのすべての部品のように、複雑な図形をまとめて合成、移動、変形できます。

再利用する図形、グラデーション、クリップパスなどを<defs>内に定義します。<use href="#id">で参照します。これにより、複雑なパスデータの重複を避け、use要素ごとに変形やスタイルを適用できます。

SVGにおけるpolylineとpolygonの違いは何ですか？

SVGには、宣言的な図形要素（rect、circle、ellipse、line、polyline、polygon）と、M、L、A、C、Q、Zコマンドを使用して複雑な図形を表現できる柔軟なpath要素があります。CSSによるスタイル設定、gによるグループ化、defs/useによる再利用を組み合わせることで、保守しやすく拡張可能なベクターグラフィックスをHTMLに直接組み込めます。