HTML Graphics
SVG Element Complete Reference
SVG defines dozens of elements for drawing shapes, grouping and reusing graphics, painting with gradients and patterns, applying filters, and rendering text. This reference lists the elements you will use most often, each with a one-line description, plus a runnable showcase example that combines many of them in a single drawing. Use it as a lookup table whenever you meet an unfamiliar SVG tag.
Showcase Example
This single SVG uses a container (<g>), reusable definitions (<defs>, <linearGradient>), a symbol reused with <use>, several shape primitives, and <text> - a tour of the most common elements at once. Run it and inspect each tag.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG Element Showcase</title></head>
<body style="background:#0f172a;display:grid;place-items:center;min-height:100vh;margin:0;">
<svg width="400" height="260" viewBox="0 0 400 260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0ea5e9" />
<stop offset="100%" stop-color="#7dd3fc" />
</linearGradient>
<g id="star">
<polygon points="0,-12 3,-4 12,-4 5,2 7,11 0,6 -7,11 -5,2 -12,-4 -3,-4" fill="#fde047" />
</g>
</defs>
<rect x="0" y="0" width="400" height="180" fill="url(#sky)" />
<rect x="0" y="180" width="400" height="80" fill="#65a30d" />
<use href="#star" x="60" y="50" />
<use href="#star" x="140" y="35" />
<use href="#star" x="320" y="60" />
<circle cx="330" cy="45" r="26" fill="#fef08a" />
<ellipse cx="200" cy="185" rx="90" ry="18" fill="#4d7c0f" />
<path d="M170 185 L200 110 L230 185 Z" fill="#166534" />
<text x="200" y="235" text-anchor="middle" font-family="Arial"
font-size="22" fill="#f8fafc">SVG Elements</text>
</svg>
</body>
</html>SVG Elements Reference Table
The table below covers structural containers, shape primitives, painting servers, filters, text and animation elements. Attributes and CSS properties are covered on the SVG Attribute and SVG Property reference pages.
| Element | Description |
|---|---|
| <svg> | Root container for an SVG drawing; sets size and the viewBox coordinate system. |
| <g> | Groups child elements so they can be transformed, styled or reused together. |
| <defs> | Holds reusable definitions (gradients, symbols, filters) that are not drawn directly. |
| <symbol> | Defines a reusable template that is rendered only when referenced by <use>. |
| <use> | Clones and draws an element (or symbol) defined elsewhere, via href. |
| <rect> | Draws a rectangle using x, y, width, height (and rx/ry for rounded corners). |
| <circle> | Draws a circle from centre (cx, cy) and radius r. |
| <ellipse> | Draws an oval from centre (cx, cy) with radii rx and ry. |
| <line> | Draws a straight line from (x1, y1) to (x2, y2); needs a stroke. |
| <polyline> | Draws connected straight segments through a points list (open path). |
| <polygon> | Like polyline but automatically closes the shape for filling. |
| <path> | Draws an arbitrary outline from the d command string (lines, curves, arcs). |
| <text> | Renders selectable vector text at position x, y. |
| <tspan> | A styled or repositioned run of text inside a <text> element. |
| <textPath> | Flows text along the shape of a referenced <path>. |
| <image> | Embeds a raster or SVG image inside the drawing. |
| <linearGradient> | Defines a gradient that changes colour along a straight line. |
| <radialGradient> | Defines a gradient that radiates outward from a centre point. |
| <stop> | One colour stop (offset + colour) inside a gradient. |
| <pattern> | Defines a tile that repeats to fill a shape. |
| <clipPath> | Defines a shape that clips (masks to) another element's visible region. |
| <mask> | Defines a soft, luminance-based mask applied to another element. |
| <filter> | Container for filter primitives that post-process pixels (blur, shadow, etc.). |
| <feGaussianBlur> | Filter primitive that blurs its input (used for shadows and glows). |
| <feOffset> | Filter primitive that shifts its input, commonly for drop shadows. |
| <feColorMatrix> | Filter primitive that remaps colours via a matrix (tint, greyscale). |
| <marker> | Defines an arrowhead or symbol drawn at the ends of lines and paths. |
| <a> | Wraps SVG content in a hyperlink. |
| <title> | Accessible tooltip/name for an element (read by assistive tech). |
| <desc> | Longer accessible description of an element or the whole drawing. |
| <foreignObject> | Embeds non-SVG content (like HTML) inside the SVG canvas. |
| <animate> | SMIL animation of a single attribute over time. |
| <animateTransform> | SMIL animation of a transform such as rotate, scale or translate. |
Group related shapes in a <g> and apply one transform or one class to move or style them all at once - the SVG equivalent of a folder.