Basic SVG Shapes rect circle path

SVG uses a coordinate system where (0,0) is the top-left corner. X increases rightward; Y increases downward. The viewport is defined by the width and height attributes; the coordinate space is defined by the viewBox attribute.

Draw rectangles with <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. rx and ry round the corners. Fill and stroke are controlled by fill and stroke attributes or CSS. Omitting x and y defaults to 0,0.

Draw circles with <circle cx="100" cy="100" r="50">. cx and cy are the center coordinates; r is the radius. SVG circles have no equivalent to the canvas arc angle parameters — they are always complete circles.

Draw ellipses with <ellipse cx="100" cy="100" rx="80" ry="40">. rx is the horizontal radius; ry is the vertical radius. An ellipse with equal rx and ry is equivalent to a circle.

<line x1="0" y1="0" x2="100" y2="100"> draws a single line segment. <polyline points="0,0 100,50 200,0"> draws connected line segments through a series of coordinate pairs. Neither is automatically closed.

<polygon points="100,10 190,190 10,190"> is like polyline but the shape is automatically closed — a line connects the last point back to the first. Use polygon for closed shapes like triangles, stars, and other regular polygons.

path is the most powerful SVG shape — it can represent any combination of lines, arcs, and curves. The d attribute contains path commands: M (moveTo), L (lineTo), A (arc), C (cubic bezier), Q (quadratic bezier), Z (closePath).

Uppercase commands use absolute coordinates; lowercase use relative coordinates. M 100 50 moves to (100,50). L 200 150 draws a line to (200,150). Z closes the path. A rx ry rotation large-arc sweep x y draws an arc.

SVG shapes accept CSS: fill, stroke, stroke-width, opacity, and stroke-dasharray. Use CSS classes on SVG elements for maintainable styling. SVG CSS transitions work on fill, stroke, and opacity for smooth state changes.

The <g> element groups SVG elements. Apply transform, fill, or stroke to the group to affect all children. Grouping enables compositing of complex shapes that move or transform together — like a clock face with all its components.

Define reusable shapes in <defs>: symbols, gradients, and clip paths. Reference them with <use href="#id">. This avoids duplicating complex path data and enables instance-level transforms and styling via the use element.

What is the difference between polyline and polygon in SVG?

SVG provides declarative shape elements (rect, circle, ellipse, line, polyline, polygon) and the versatile path element for complex shapes using M, L, A, C, Q, Z commands. CSS styling, grouping with g, and reuse via defs/use enable maintainable, scalable vector graphics embedded directly in HTML.