What are the basic shape elements in SVG and what are their respective attributes

SVG provides various basic shape elements, each with specific attributes and uses:

1. Rectangle (rect)

svg
<rect x="10" y="10" width="100" height="50" rx="5" ry="5" fill="blue" />

• x, y: Top-left corner coordinates
• width, height: Rectangle width and height
• rx, ry: Corner radius (horizontal and vertical)
• Uses: Buttons, cards, backgrounds, etc.

2. Circle (circle)

svg
<circle cx="50" cy="50" r="40" fill="red" />

• cx, cy: Center coordinates
• r: Radius
• Uses: Dots, circular decorations, avatars, etc.

3. Ellipse (ellipse)

svg
<ellipse cx="100" cy="50" rx="50" ry="30" fill="green" />

• cx, cy: Ellipse center coordinates
• rx, ry: Horizontal and vertical radii
• Uses: Elliptical decorations, eye shapes, etc.

4. Line (line)

svg
<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />

• x1, y1: Start point coordinates
• x2, y2: End point coordinates
• stroke: Stroke color
• stroke-width: Stroke width
• Uses: Dividers, connection lines, etc.

5. Polyline (polyline)

svg
<polyline points="10,10 50,50 100,10 150,50" fill="none" stroke="blue" stroke-width="2" />

• points: List of point coordinates (x1,y1 x2,y2 ...)
• Uses: Charts, line graphs, etc.

6. Polygon (polygon)

svg
<polygon points="50,10 90,90 10,90" fill="orange" />

• points: List of vertex coordinates (automatically closed)
• Uses: Triangles, star shapes, and other closed shapes

7. Path (path)

svg
<path d="M 10 10 L 100 100 L 10 100 Z" fill="purple" />

• d: Path commands (most powerful shape element)
• Uses: Complex shapes, custom graphics

Common Attributes:

• fill: Fill color
• stroke: Stroke color
• stroke-width: Stroke width
• stroke-linecap: Line end style (butt, round, square)
• stroke-linejoin: Line join style (miter, round, bevel)
• opacity: Transparency (0-1)
• transform: Transformations (rotate, scale, translate, etc.)

Selection Recommendations:

• Use basic elements (rect, circle, ellipse) for simple shapes
• Use path for complex shapes
• Use polyline or polygon for shapes with multiple points
• Consider code readability and maintainability