Executive Summary: The W3C Scalable Vector Graphics (SVG) specification is composed of discrete XML elements that dictate layout, rendering, compositing, and interactivity. This glossary provides exhaustive technical definitions, specifications, and code patterns for 42 core SVG document elements grouped into 7 functional architectural domains:
- Structural Containers:
<svg>,<g>,<defs>,<symbol>,<use>, and<view>. - Shape Primitives:
<path>,<rect>,<circle>,<ellipse>,<line>,<polyline>, and<polygon>. - Embedded & Hybrid Content:
<foreignObject>and<image>. - Vector Typography:
<text>,<tspan>, and<textPath>. - Clipping, Masking & Markers:
<clipPath>,<mask>, and<marker>. - Paint Servers:
<linearGradient>,<radialGradient>,<stop>, and<pattern>. - Filter Shaders & Interactivity:
<filter>, filter primitives (<feGaussianBlur>,<feColorMatrix>,<feDropShadow>,<feMerge>), SMIL animations, and metadata nodes.
Interactive SVG DOM Node Inspector
Select an element to inspect:
<svg viewBox="0 0 100 100">
The root SVG viewport and canvas. Establishes the coordinate plane and defines how graphic elements are mapped to pixels.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<!-- Child vector graphic nodes -->
</svg>
Showing 42 / 42 elements
1. Structural & Container Elements
Container elements form the skeleton of an SVG document. They define coordinate spaces, establish grouping boundaries, and control element reuse.
Root Container
The root element that establishes an SVG document fragment. It defines the canvas dimensions via
width and height, the internal coordinate system via viewBox, and alignment modes via preserveAspectRatio. Can also be nested within an outer SVG to establish independent sub-viewports.<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">...</svg>
Grouping Node
A container element used to group related child vector elements. Attributes applied to a
<g> element—such as transform, fill, stroke, opacity, or CSS classes—cascade to all descendants unless explicitly overridden.<g transform="translate(10, 20) rotate(45)" fill="currentColor">
<circle cx="0" cy="0" r="5" />
<rect x="10" y="-5" width="20" height="10" />
</g>
Definitions Cache
Stores graphical definitions that are intended to be referenced by other elements rather than rendered directly. Any element placed inside
<defs> (such as gradients, clip paths, filters, markers, or reusable shapes) is hidden until invoked by <use> or a url(#id) property.<defs>
<linearGradient id="grad1">...</linearGradient>
<clipPath id="avatarClip">...</clipPath>
</defs>
Template Node
A specialized container element used to define reusable graphical templates. Unlike
<g>, a <symbol> is never rendered on screen directly and possesses its own independent viewBox and preserveAspectRatio attributes, making it the foundational element for SVG icon sprite sheets.<symbol id="icon-star" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</symbol>
Clone Instantiator
Clones and renders a target graphical node referenced via
href="#targetId". The browser creates an internal Shadow DOM boundary that replicates the target geometry while allowing context-sensitive cascading of colors and coordinates (x, y, width, height).<use href="#icon-star" x="10" y="10" width="24" height="24" fill="#C1DD2D" />
Viewport Fragment
Defines a designated viewBox coordinate crop that can be targeted via URI fragment identifiers (e.g.,
image.svg#viewId). Allows a single SVG asset to expose multiple targeted camera views or zoom states without duplicating markup.<view id="detail-crop" viewBox="50 50 100 100" />
2. Basic Shape Primitives
These elements produce concrete vector shapes defined by mathematical geometric formulas.
Vector Path
The most versatile SVG element. It creates arbitrary 2D vector geometry using path commands in its
d attribute: MoveTo (M), LineTo (L), Cubic Bézier (C, S), Quadratic Bézier (Q, T), Elliptical Arc (A), and ClosePath (Z).<path d="M10 80 Q 52.5 10, 95 80 T 180 80" fill="none" stroke="currentColor" stroke-width="2" />
Rectangle
Draws rectangles and squares aligned with the current user coordinate axes. Supports corner filleting via horizontal radius
rx and vertical radius ry.<rect x="10" y="10" width="80" height="40" rx="8" ry="8" fill="#C1DD2D" />
Circle
Renders a perfect circular shape defined by its center point coordinates (
cx, cy) and radial distance r.<circle cx="50" cy="50" r="40" fill="none" stroke="#C1DD2D" stroke-width="3" />
Ellipse
Draws an elliptical shape specified by its center point (
cx, cy) and independent horizontal (rx) and vertical (ry) semi-axes.<ellipse cx="100" cy="50" rx="80" ry="40" fill="#222" stroke="#C1DD2D" />
Line Segment
Renders a single 1D line segment connecting starting coordinates (
x1, y1) to termination coordinates (x2, y2). Requires a visible stroke to be painted.<line x1="0" y1="0" x2="100" y2="100" stroke="#C1DD2D" stroke-width="2" />
Open Multiline
Draws a sequence of connected straight line segments defined by a space- or comma-delimited list of
x,y coordinate pairs. Unlike <polygon>, the terminal point does not automatically close back to the starting point.<polyline points="0,0 20,40 40,20 60,80 80,40" fill="none" stroke="#C1DD2D" />
Closed Shape
Draws a closed vector shape composed of connected straight line segments. The browser implicitly adds an ending straight segment closing the last coordinate back to the first.
<polygon points="50,5 90,90 10,90" fill="#C1DD2D" />
3. Embedded & Hybrid Content
Elements bridging vector geometry with external raster images and native HTML DOM layouts.
HTML Bridge
Allows non-SVG XML namespaces—most notably XHTML and HTML5—to be embedded directly into the SVG scene graph. Supports full CSS Flexbox/Grid layouts, rich text wrapping, interactive inputs, and canvas animations within vector coordinates.
<foreignObject x="20" y="20" width="160" height="100">
<div xmlns="http://www.w3.org/1999/xhtml" class="card">
<h4>HTML in SVG</h4>
<p>Real text with automatic line-wrapping.</p>
</div>
</foreignObject>
Raster/Vector Embed
Renders an external raster image (PNG, JPEG, WebP) or nested vector SVG document within the host SVG coordinates via
href. Supports preserveAspectRatio scaling modes.<image href="/assets/avatar.png" x="10" y="10" width="64" height="64" />
4. Vector Typography Elements
Elements dedicated to rendering selectable, searchable, and stylable typography inside vector viewports.
Typography Container
Renders selectable text at designated
x and y coordinates. Supports font styling, alignment via text-anchor (start, middle, end), and vertical baseline alignment via dominant-baseline.<text x="50" y="20" text-anchor="middle" dominant-baseline="central" fill="#FFF">IconStash</text>
Inline Text Span
A sub-element nested inside
<text> that allows inline adjustments to color, font weight, or coordinate offsets (dx, dy) without breaking the overall typographic flow.<text x="10" y="30">
Icon<tspan fill="#C1DD2D" font-weight="bold">Stash</tspan>
</text>
Path Curved Typography
Binds typographic glyphs along the arbitrary trajectory of a referenced vector
<path>. Glyph baselines rotate tangentially to match the curvature of the trajectory curve.<path id="arcPath" d="M10,80 Q50,10 90,80" fill="none" />
<text>
<textPath href="#arcPath" startOffset="50%" text-anchor="middle">Curved Vector Text</textPath>
</text>
5. Clipping, Masking & Marker Attachments
Elements controlling rendering visibility bounds, transparency stencils, and path vertex adornments.
Hard Clip Silhouette
Defines a binary 1-bit boundary mask. Target elements referencing this clip path via
clip-path="url(#id)" are only rendered where child shapes inside the clipPath exist. Anti-aliased outer edges are calculated geometrically without raster buffers.<clipPath id="circleClip">
<circle cx="50" cy="50" r="40" />
</clipPath>
<image href="photo.jpg" clip-path="url(#circleClip)" width="100" height="100" />
Alpha/Luminance Mask
Defines an 8-bit transparency stencil. Target elements referencing the mask have their opacity computed based on the luminance or alpha values of the mask's child elements (white = 100% opaque, black = 0% invisible, gray = semi-transparent).
<mask id="fadeMask">
<rect width="100" height="100" fill="url(#fadeGradient)" />
</mask>
Vertex Adornment
Defines a vector symbol (such as an arrowhead, circle, or tick mark) attached automatically to the vertices of a
<path>, <line>, or <polyline> via marker-start, marker-mid, or marker-end.<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#C1DD2D" />
</marker>
6. Paint Servers & Gradients
Elements providing procedural color ramps and repeating geometric patterns across fill and stroke channels.
Linear Color Ramp
Calculates a linear transition of colors along a directional line specified by starting coordinates (
x1, y1) and ending coordinates (x2, y2). Referenced via fill="url(#gradId)".<linearGradient id="neonGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#C1DD2D" />
<stop offset="100%" stop-color="#141414" />
</linearGradient>
Radial Color Ramp
Calculates a circular or elliptical color transition radiating outward from a focal coordinate (
fx, fy) to an outer boundary edge defined by center (cx, cy) and radius r.<radialGradient id="glowGrad" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
<stop offset="0%" stop-color="#FFF" />
<stop offset="100%" stop-color="#C1DD2D" stop-opacity="0" />
</radialGradient>
Gradient Color Stop
Specifies a color waypoint along a gradient vector. Configured with
offset (0% to 100%), stop-color, and stop-opacity.<stop offset="50%" stop-color="#C1DD2D" stop-opacity="0.8" />
Repeating Tile
Defines a graphic tile that repeats horizontally and vertically to fill or stroke shapes. Operates with independent tile width, height, and coordinate mapping via
patternUnits.<pattern id="gridPattern" width="20" height="20" patternUnits="userSpaceOnUse">
<rect width="20" height="20" fill="none" stroke="#222" />
</pattern>
7. Filter Shaders & Document Metadata
Elements providing GPU-accelerated graphics pipelines and accessible document metadata.
Shader Pipeline
A container element enclosing filter primitives that execute multi-pass visual effects (blurs, lighting, color manipulation, displacement maps) on host graphics before display.
<filter id="glowEffect" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
Filter Primitive
Performs a 2D Gaussian blur convolution across an input image buffer defined by standard deviation
stdDeviation.<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
Filter Primitive
Applies an affine color transformation matrix to pixel channels. Used for duotone effects, desaturation, alpha extraction, and hue rotation.
<feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0" />
Filter Primitive
Hardware-optimized filter primitive that generates an integrated drop shadow effect combining offset, Gaussian blur, and color tinting in a single instruction.
<feDropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000" flood-opacity="0.4" />
Accessibility Name
Provides a plain-text title string for an SVG element. Serves as the accessible name for assistive technologies and displays as a native browser tooltip on hover.
<svg role="img" aria-labelledby="title-search">
<title id="title-search">Search Documentation</title>
<path d="..." />
</svg>
Accessibility Context
Supplies a detailed textual description of an SVG graphic for assistive technologies, linked to parent elements via
aria-describedby.<desc id="desc-chart">A bar chart illustrating monthly icon search volume from January to December.</desc>
Scoped CSS
Embeds scoped CSS rules directly inside an SVG document, enabling hover animations, keyframe transforms, and media queries.
<style>
.icon-path { fill: none; stroke: currentColor; transition: stroke-width 0.2s; }
.icon-path:hover { stroke-width: 2.5; }
</style>
DOM Scripting
Embeds or links executable JavaScript within the SVG document, allowing programmatic DOM manipulation and procedural event handling.
<script>
document.getElementById('star').addEventListener('click', () => alert('Starred!'));
</script>
8. Frequently Asked Questions
What is the difference between <defs> and <symbol> in SVG?
<defs> is a general container that prevents any child elements from rendering directly on screen until referenced. <symbol> is a specialized container that not only prevents direct rendering but also establishes its own independent viewBox and aspect ratio settings, allowing cloned instances via <use> to scale independently.
How does the <use> tag clone elements across the SVG DOM tree?
The <use> tag references a target element by its URI or ID (e.g. href='#icon-search'). The browser clones the referenced node into a closed SVG Shadow DOM boundary attached to the <use> element. Properties like fill, stroke, and transformations can cascade from the <use> element into the cloned subtree.
What capabilities does <foreignObject> introduce to vector documents?
<foreignObject> acts as an architectural bridge between SVG and HTML/CSS. It allows developers to embed arbitrary HTML elements—such as responsive <div> layouts, complex CSS flexboxes, interactive buttons, form inputs, and styled typography—directly within an SVG coordinate system.
Why is <clipPath> faster for simple shape clipping compared to <mask>?
<clipPath> performs a binary 1-bit geometric scissor test: an interior pixel is either drawn or not drawn. <mask>, by contrast, performs a full 8-bit luminance or alpha raster calculation for every pixel, which requires more GPU memory bandwidth and compositing passes.
How do <title> and <desc> enhance SVG web accessibility (WCAG)?
When an <svg> element includes <title id='icon-title'> and <desc id='icon-desc'> connected via aria-labelledby='icon-title icon-desc', assistive technologies read the plain-text title as the element's accessible name and the description as its accessible context, fulfilling WCAG 2.2 accessibility standards.
How do SVG paint servers like <linearGradient> and <pattern> interact with shape fills?
Paint servers defined in <defs> (such as <linearGradient id='brandGrad'> or <pattern id='mesh'>) are referenced by presentation attributes or CSS via url(#brandGrad). The browser paints the calculated gradient ramp or repeating geometric tile across the target element's fill or stroke surface.