HTML Graphics
SVG Element Complete Reference
SVG defines a rich vocabulary of elements: shape primitives, container and reuse elements, gradient and paint servers, clipping and masking helpers, filter primitives and text-related tags. This reference lists the most commonly used SVG elements with a short description of what each one does. Combine these building blocks to create everything from a single icon to a fully interactive chart.
Structure & Shape Elements
These elements form the visible geometry of a drawing plus the containers that group and organise it.
| Element | Description |
|---|---|
| <svg> | Root container that establishes a viewport and coordinate system; can also be nested inside another SVG. |
| <g> | Group container; applies shared attributes, transforms and styles to all child shapes at once. |
| <rect> | Draws a rectangle using x, y, width, height, with optional rounded corners via rx/ry. |
| <circle> | Draws a circle defined by centre cx, cy and radius r. |
| <ellipse> | Draws an ellipse defined by centre cx, cy and separate radii rx and ry. |
| <line> | Draws a straight line segment from (x1, y1) to (x2, y2); requires a stroke to be visible. |
| <polyline> | Draws connected straight segments through a list of points; not automatically closed. |
| <polygon> | Like polyline but the last point is automatically joined back to the first, forming a closed shape. |
| <path> | The most flexible shape; its d attribute encodes move, line, cubic/quadratic Bezier and arc commands. |
| <image> | Embeds a raster or SVG image (PNG, JPG, SVG) at a given x, y, width, height. |
Definition & Reuse Elements
These elements let you define reusable pieces (gradients, patterns, symbols) once and reference them elsewhere, keeping markup DRY.
| Element | Description |
|---|---|
| <defs> | Holds definitions (gradients, patterns, symbols, filters) that are not drawn directly but referenced by id. |
| <use> | Clones and re-renders another element referenced by href, so one shape can appear many times. |
| <symbol> | Defines a reusable graphic template that is only rendered when instantiated by a <use> element. |
| <marker> | Defines a graphic (arrowhead, dot) drawn at the vertices or ends of a path, line, polyline or polygon. |
| <pattern> | Defines a tile that repeats to fill a shape's fill or stroke. |
| <linearGradient> | Defines a gradient whose colours transition along a straight line between two points. |
| <radialGradient> | Defines a gradient whose colours radiate outward from a centre point in circles. |
| <stop> | Defines a single colour stop (offset + stop-color) inside a linear or radial gradient. |
Clipping, Masking & Filters
| Element | Description |
|---|---|
| <clipPath> | Defines a hard-edged region; anything of the target outside this region is clipped away (fully shown or fully hidden). |
| <mask> | Defines a soft, luminance/alpha-based region so parts of an element can be partially transparent. |
| <filter> | Container for a chain of filter primitives (blur, drop shadow, colour shift) applied to an element. |
Text & Metadata Elements
| Element | Description |
|---|---|
| <text> | Renders text as vector glyphs positioned with x and y attributes. |
| <tspan> | A span inside <text> used to restyle or reposition part of a text run (superscripts, coloured words). |
| <textPath> | Renders text flowing along the shape of a referenced <path>. |
| <title> | Provides an accessible name / tooltip for its parent element; read by assistive technology. |
| <desc> | Provides a longer accessible description of its parent element for assistive technology. |
Elements placed inside <defs>, <symbol> or <clipPath> are not rendered on their own; they only take effect when referenced (by url(#id) or a <use>).