Skip to main content

🗓️ 21062025 1647
📎

svg_shapes

  • SVGs are made of primitive shapes, each defined by a tag and a set of attributes.
  • Shapes are absolutely positioned by default.
  • There are seven primitive shapes in SVG.

Primitive Shapes​

1. rect – Rectangle​

AttributeDescription
xX position of top-left corner
yY position of top-left corner
widthWidth of the rectangle
heightHeight of the rectangle
fillFill color
strokeOutline color
  • Positioned from top-left corner using x and y.

2. line – Straight Line​

AttributeDescription
x1, y1Starting coordinates
x2, y2Ending coordinates
strokeLine color
stroke-widthLine thickness
  • Appearance controlled with stroke; fill is ignored.

3. circle – Circle​

AttributeDescription
cxX position of the center
cyY position of the center
rRadius of the circle
fillFill color
strokeOutline color
  • Positioned by center coordinates.

4. ellipse – Ellipse​

AttributeDescription
cxX position of the center
cyY position of the center
rxHorizontal radius
ryVertical radius
fillFill color
strokeOutline color
  • Like a circle but with separate radii.

5. polyline – Open Shape​

AttributeDescription
pointsList of coordinates for connected lines
  • Sequence of connected straight lines; not closed.

6. polygon – Closed Shape​

AttributeDescription
pointsList of coordinates; shape is automatically closed
  • Like a polyline, but connects last point back to first.

7. path – Custom Shape​

AttributeDescription
dCommands and coordinates for complex paths
  • Most flexible shape; can replicate any of the above.

Positioning Notes​

Shape TypePositioning Attributes
rectx, y
circle, ellipsecx, cy
linex1, y1, x2, y2
polyline, polygonpoints
pathd
  • The SVG canvas acts like a relatively positioned container.
  • All shapes are absolutely positioned within it

References