Standard Geometric Primitives in Native SVG

Scalable Vector Graphics (SVG) provides a dedicated set of native geometric primitive elements used to draw vector shapes directly inside the Document Object Model (DOM). These predefined elements—commonly referred to as SVG basic shapes—allow developers and designers to render vector graphics efficiently without writing complex mathematical paths manually. This guide covers each standard geometric primitive available in native SVG, including its primary use case and core attributes.

Rectangle (<rect>)

The <rect> element draws rectangles and squares. It is positioned using the top-left corner coordinates and dimensioned with width and height values.

• Key Attributes:
  • x and y: The coordinates of the top-left corner (default is 0).
  • width and height: The dimensions of the rectangle.
  • rx and ry: The horizontal and vertical corner radii, used to create rounded rectangles.

Circle (<circle>)

The <circle> element renders a circle defined by a central point and a single radius.

• Key Attributes:
  • cx and cy: The x and y coordinates of the circle’s center (default is 0).
  • r: The radius of the circle.

Ellipse (<ellipse>)

The <ellipse> element creates an oval shape similar to a circle, but allows distinct horizontal and vertical radii.

• Key Attributes:
  • cx and cy: The x and y coordinates of the center point.
  • rx: The horizontal radius.
  • ry: The vertical radius.

Line (<line>)

The <line> element defines a single, straight line segment drawn between two specified coordinate points.

• Key Attributes:
  • x1 and y1: The starting point coordinates.
  • x2 and y2: The ending point coordinates.
  • stroke: Required to make the line visible, as lines do not have an interior area to fill.

Polyline (<polyline>)

The <polyline> element creates a continuous series of connected straight line segments. Unlike polygons, polylines are typically left open, though they can be filled.

• Key Attributes:
  • points: A list of pairs of x and y coordinates that define each vertex (e.g., points="0,0 50,25 50,75 100,100").

Polygon (<polygon>)

The <polygon> element defines a closed geometric shape made up of straight line segments. SVG automatically closes the shape by connecting the last coordinate pair back to the first coordinate pair.

• Key Attributes:
  • points: A list of x and y coordinates defining each corner of the closed shape.

Path (<path>)

While the basic shapes cover standard geometry, the <path> element serves as the universal primitive in SVG. It can replicate all other primitives and draw complex shapes, including Bézier curves, arcs, and multi-segment outlines using a series of path commands.

• Key Attributes:
  • d: A string containing path commands such as M (moveto), L (lineto), C (cubic Bézier curve), A (elliptical arc), and Z (closepath).