SVG Elements and Attributes Reference

A comprehensive reference of all SVG elements and their key attributes. Organised by category.

Container Elements

`<svg>` Container

The root container. Establishes a new viewport and coordinate system. Can be nested.

Attribute	Description
`width`, `height`	Viewport dimensions. CSS units or unitless (px).
`viewBox`	`"min-x min-y width height"` - defines the user coordinate system.
`preserveAspectRatio`	How viewBox maps to viewport when aspect ratios differ. Default: `xMidYMid meet`.
`xmlns`	Namespace: `http://www.w3.org/2000/svg`. Required for standalone SVG files; optional when inline in HTML5.
`x`, `y`	Position when nested inside another SVG.

Example:

<svg width="200" height="150" viewBox="0 0 200 150">
  <circle cx="100" cy="75" r="50" fill="gold"/>
</svg>

`<g>` Container

Groups child elements. Applies shared transforms, styles, or event handlers. Does NOT create a new viewport.

Attribute	Description
`transform`	Transformation applied to all children.
`opacity`	Group-level opacity (composites children as a unit before applying).

Example:

<g transform="translate(50, 30)" fill="#61afef">
  <rect x="0" y="0" width="40" height="30"/>
  <rect x="50" y="0" width="40" height="30"/>
</g>

`<defs>` Container

Defines reusable elements that are not rendered directly. Children are referenced via url(#id) or xlink:href/href.

Example:

<defs>
  <linearGradient id="sky">
    <stop offset="0%" stop-color="#87ceeb"/>
    <stop offset="100%" stop-color="#1e90ff"/>
  </linearGradient>
</defs>
<rect fill="url(#sky)" width="200" height="100"/>

`<symbol>` Container

Like <defs> content but with its own viewBox and preserveAspectRatio. Instantiated via <use>. Ideal for icon systems.

Attribute	Description
`viewBox`	Internal coordinate system for the symbol.
`preserveAspectRatio`	Aspect ratio handling when used at different sizes.

Example:

<symbol id="icon-star" viewBox="0 0 24 24">
  <polygon points="12,2 15,9 22,9 16,14 18,21 12,17 6,21 8,14 2,9 9,9"/>
</symbol>
<use href="#icon-star" width="48" height="48"/>

`<use>` Container

Instantiates a copy of another element (referenced by href). Creates a shadow DOM-like boundary that limits CSS styling from outside.

Attribute	Description
`href`	Reference to the element to clone: `#id` or `file.svg#id`.
`x`, `y`	Position offset for the cloned content.
`width`, `height`	Override dimensions (only effective on `<symbol>` or `<svg>` targets).

Example:

<defs><circle id="dot" r="5"/></defs>
<use href="#dot" x="30" y="30" fill="red"/>
<use href="#dot" x="70" y="30" fill="blue"/>

`<switch>` Container

Renders the first child whose requiredFeatures, requiredExtensions, or systemLanguage evaluates to true. Used for internationalisation or feature detection.

Example:

<switch>
  <text systemLanguage="fr">Bonjour</text>
  <text systemLanguage="en">Hello</text>
  <text>Hi</text>
</switch>

Basic Shapes

`<rect>` Shape

Rectangle. Supports rounded corners.

Attribute	Description
`x`, `y`	Top-left corner position. Default: 0.
`width`, `height`	Dimensions. Required.
`rx`, `ry`	Corner radii. If only one is specified, the other mirrors it. Max clamped to half the dimension.

Example:

<rect x="10" y="10" width="120" height="80" rx="8"
      fill="#e5c07b" stroke="#b8993f" stroke-width="2"/>

`<circle>` Shape

Circle defined by centre point and radius.

Attribute	Description
`cx`, `cy`	Centre coordinates. Default: 0.
`r`	Radius. Required. Negative values are invalid.

Example:

<circle cx="80" cy="80" r="50"
        fill="#e06c75" stroke="#b04950" stroke-width="2"/>

`<ellipse>` Shape

Ellipse - a circle with independent x and y radii.

Attribute	Description
`cx`, `cy`	Centre coordinates.
`rx`, `ry`	Horizontal and vertical radii.

Example:

<ellipse cx="100" cy="60" rx="80" ry="40"
         fill="#98c379" opacity="0.8"/>

`<line>` Shape

Straight line between two points. Must have a stroke to be visible (no fill).

Attribute	Description
`x1`, `y1`	Start point.
`x2`, `y2`	End point.

Example:

<line x1="10" y1="10" x2="190" y2="90"
      stroke="#c678dd" stroke-width="3" stroke-linecap="round"/>

`<polyline>` Shape

Connected series of straight line segments. Open shape (not automatically closed).

Attribute	Description
`points`	Space or comma-separated list of x,y pairs: `"0,0 50,25 100,0"`.

Example:

<polyline points="20,80 60,20 100,60 140,10 180,50"
          fill="none" stroke="#61afef" stroke-width="2"/>

`<polygon>` Shape

Like <polyline> but automatically closes the shape (last point connects to first).

Attribute	Description
`points`	Same format as polyline.

Example:

<polygon points="100,10 150,80 50,80"
         fill="#56b6c2" stroke="#3d8f99" stroke-width="2"/>

Paths

`<path>` Shape

The most powerful shape element. Can describe any 2D shape using a mini-language of commands in the d attribute.

Attribute	Description
`d`	Path data string - a sequence of commands (see below).
`pathLength`	Declares the "author's expected" total length. Affects `stroke-dasharray` and `stroke-dashoffset` calculations.

Path Commands

Command	Name	Parameters
`M` / `m`	Move To	`x y`
`L` / `l`	Line To	`x y`
`H` / `h`	Horizontal Line	`x`
`V` / `v`	Vertical Line	`y`
`C` / `c`	Cubic Bézier	`x1 y1 x2 y2 x y` (two control points + endpoint)
`S` / `s`	Smooth Cubic	`x2 y2 x y` (first control point reflected from previous)
`Q` / `q`	Quadratic Bézier	`x1 y1 x y` (one control point + endpoint)
`T` / `t`	Smooth Quadratic	`x y` (control point reflected from previous)
`A` / `a`	Arc	`rx ry x-rotation large-arc-flag sweep-flag x y`
`Z` / `z`	Close Path	(none)

Uppercase = absolute coordinates. Lowercase = relative to current point.

Example:

<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
      fill="none" stroke="#c678dd" stroke-width="3"/>

Text

`<text>` Text

Renders text. Supports all font-related presentation attributes.

Attribute	Description
`x`, `y`	Position of the text anchor point (baseline-left by default). Can be a list for per-glyph positioning.
`dx`, `dy`	Relative offsets. Can also be a list for per-glyph adjustment.
`rotate`	Rotation per glyph (list of degrees).
`textLength`	Desired total text length - browser adjusts spacing/glyphs to fit.
`lengthAdjust`	`spacing` or `spacingAndGlyphs`.

Example:

<text x="20" y="40" font-size="18" fill="#333">Hello SVG</text>

`<tspan>` Text

Inline text span within <text>. Allows position/style changes mid-text (like <span> in HTML).

Accepts the same positioning attributes as <text>: x, y, dx, dy, rotate.

Example:

<text x="10" y="30">
  Normal <tspan fill="red" font-weight="bold">Bold Red</tspan> text
</text>

`<textPath>` Text

Renders text along the outline of a <path> element.

Attribute	Description
`href`	Reference to the path: `#pathId`.
`startOffset`	Distance along the path where text begins (length or %).
`method`	`align` (default) or `stretch`.
`spacing`	`auto` or `exact`.

Example:

<defs><path id="curve" d="M 10 80 Q 95 10 180 80"/></defs>
<text><textPath href="#curve">Text on a curve</textPath></text>

Paint Servers (Gradients & Patterns)

`<linearGradient>` Paint

Defines a linear colour gradient. Referenced as fill="url(#id)" or stroke="url(#id)".

Attribute	Description
`x1`, `y1`, `x2`, `y2`	Start and end points of the gradient vector. Default: horizontal (0,0)→(1,0).
`gradientUnits`	`objectBoundingBox` (default, 0–1 range) or `userSpaceOnUse` (absolute coords).
`gradientTransform`	Transform applied to the gradient coordinate system.
`spreadMethod`	`pad` (default), `reflect`, or `repeat`.
`href`	Inherit stops from another gradient.

Example:

<linearGradient id="sunset" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="#ff6b6b"/>
  <stop offset="100%" stop-color="#feca57"/>
</linearGradient>
<rect fill="url(#sunset)" width="200" height="100"/>

`<radialGradient>` Paint

Defines a radial (circular/elliptical) colour gradient.

Attribute	Description
`cx`, `cy`	Centre of the end circle.
`r`	Radius of the end circle.
`fx`, `fy`	Focal point (centre of the start circle). Defaults to cx, cy.
`fr`	Radius of the focal (start) circle. Default: 0. (SVG 2)
`gradientUnits`	Same as linearGradient.
`spreadMethod`	Same as linearGradient.

Example:

<radialGradient id="sphere" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
  <stop offset="0%" stop-color="white"/>
  <stop offset="100%" stop-color="#333"/>
</radialGradient>
<circle cx="80" cy="80" r="60" fill="url(#sphere)"/>

`<stop>` Paint

Defines a colour stop within a gradient.

Attribute	Description
`offset`	Position along the gradient: 0–1 or 0%–100%.
`stop-color`	The colour at this stop.
`stop-opacity`	Opacity at this stop (0–1).

Example:

<stop offset="50%" stop-color="#e06c75" stop-opacity="0.8"/>

`<pattern>` Paint

Defines a repeating tile pattern used as a fill or stroke paint.

Attribute	Description
`x`, `y`	Position of the pattern tile origin.
`width`, `height`	Size of one tile.
`patternUnits`	`objectBoundingBox` (default) or `userSpaceOnUse`.
`patternContentUnits`	Coordinate system for pattern contents.
`patternTransform`	Transform on the pattern tile.
`viewBox`	Internal coordinate system for pattern contents.

Example:

<pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
  <circle cx="10" cy="10" r="3" fill="#61afef"/>
</pattern>
<rect fill="url(#dots)" width="200" height="100"/>

Clipping & Masking

`<clipPath>` Clipping

Defines a clipping region. Anything outside the clip path geometry is invisible. Binary: fully visible or fully hidden.

Attribute	Description
`clipPathUnits`	`userSpaceOnUse` (default) or `objectBoundingBox`.

Applied via: clip-path="url(#id)"

Example:

<clipPath id="circle-clip">
  <circle cx="100" cy="75" r="60"/>
</clipPath>
<image href="photo.jpg" width="200" height="150" clip-path="url(#circle-clip)"/>

`<mask>` Masking

Defines a luminance or alpha mask. Unlike clipPath, supports soft edges and gradual transparency.

Attribute	Description
`x`, `y`, `width`, `height`	The mask application area. Default: -10% to 120% of the target bounding box.
`maskUnits`	Units for x/y/width/height: `objectBoundingBox` (default) or `userSpaceOnUse`.
`maskContentUnits`	Units for mask content: `userSpaceOnUse` (default) or `objectBoundingBox`.

Applied via: mask="url(#id)"

Example:

<mask id="fade">
  <rect width="200" height="100" fill="url(#leftToRight)"/>
</mask>
<rect fill="teal" width="200" height="100" mask="url(#fade)"/>

Filter Effects

`<filter>` Filter

Container for filter primitives. Applied via filter="url(#id)".

Attribute	Description
`x`, `y`, `width`, `height`	Filter region. Default: -10% to 120%.
`filterUnits`	Units for the filter region.
`primitiveUnits`	Units for primitive coordinates within the filter.

Example:

<filter id="blur">
  <feGaussianBlur stdDeviation="3"/>
</filter>
<circle cx="80" cy="80" r="40" fill="tomato" filter="url(#blur)"/>

Filter Primitives

Each primitive takes in, in2 (input buffers) and produces a result (named output buffer). Common inputs: SourceGraphic, SourceAlpha, BackgroundImage, or a named result.

Element	Purpose	Key Attributes
`<feBlend>`	Blend two inputs	`mode`: normal, multiply, screen, darken, lighten, overlay, etc.
`<feColorMatrix>`	Colour space transforms	`type`: matrix, saturate, hueRotate, luminanceToAlpha. `values`.
`<feComponentTransfer>`	Per-channel transfer functions	Contains `<feFuncR>`, `<feFuncG>`, `<feFuncB>`, `<feFuncA>`.
`<feComposite>`	Porter-Duff compositing	`operator`: over, in, out, atop, xor, arithmetic. `k1`–`k4` for arithmetic.
`<feConvolveMatrix>`	Convolution (sharpen, emboss, edge detect)	`kernelMatrix`, `order`, `divisor`, `bias`, `edgeMode`.
`<feDiffuseLighting>`	Diffuse lighting simulation	`surfaceScale`, `diffuseConstant`. Contains a light source element.
`<feDisplacementMap>`	Pixel displacement using another image	`scale`, `xChannelSelector`, `yChannelSelector`.
`<feDropShadow>`	Drop shadow (shorthand)	`dx`, `dy`, `stdDeviation`, `flood-color`, `flood-opacity`.
`<feFlood>`	Fill the filter region with a solid colour	`flood-color`, `flood-opacity`.
`<feGaussianBlur>`	Gaussian blur	`stdDeviation` (one value = uniform, two = x/y). `edgeMode`.
`<feImage>`	Fetch an external image or SVG fragment as filter input	`href`, `preserveAspectRatio`.
`<feMerge>`	Layer multiple inputs on top of each other	Contains `<feMergeNode>` children with `in` attributes.
`<feMorphology>`	Erode or dilate shapes	`operator`: erode, dilate. `radius`.
`<feOffset>`	Offset the input image	`dx`, `dy`.
`<feSpecularLighting>`	Specular (glossy) lighting	`surfaceScale`, `specularConstant`, `specularExponent`.
`<feTile>`	Tile the input to fill the filter region	(uses standard in/result)
`<feTurbulence>`	Generate Perlin noise or fractal turbulence	`type`: turbulence, fractalNoise. `baseFrequency`, `numOctaves`, `seed`, `stitchTiles`.

Light Source Elements (inside feDiffuseLighting / feSpecularLighting)

Element	Description
`<feDistantLight>`	Directional light. Attrs: `azimuth`, `elevation`.
`<fePointLight>`	Point light source. Attrs: `x`, `y`, `z`.
`<feSpotLight>`	Spotlight. Attrs: `x`, `y`, `z`, `pointsAtX/Y/Z`, `specularExponent`, `limitingConeAngle`.

Example:

<filter id="shadow">
  <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.4"/>
</filter>
<rect x="20" y="20" width="100" height="60" fill="#61afef" filter="url(#shadow)"/>

Animation (SMIL)

SMIL stands for Synchronized Multimedia Integration Language. It's a W3C specification for describing multimedia presentations. SVG adopted a subset of SMIL for declarative, self-contained animation - no CSS or JavaScript required.

`<animate>` Animation

Animates a single attribute over time. The workhorse of SMIL animation.

Attribute	Description
`attributeName`	The attribute to animate (e.g., `cx`, `fill`, `opacity`).
`from`	Start value.
`to`	End value.
`by`	Relative change (alternative to `to`).
`values`	Semicolon-separated keyframe values (overrides from/to).
`dur`	Duration: `2s`, `500ms`, or `indefinite`.
`begin`	When to start: time offset, event (`click`), syncbase (`anim1.end`), or `indefinite`.
`end`	When to stop (same syntax as begin).
`repeatCount`	Number of repetitions or `indefinite`.
`repeatDur`	Total repeat duration.
`fill`	`freeze` (hold last value) or `remove` (revert to original). NOT the paint fill.
`calcMode`	Interpolation: `linear` (default), `discrete`, `paced`, `spline`.
`keyTimes`	Semicolon-separated time positions (0–1) for each `values` entry.
`keySplines`	Cubic bezier control points for `spline` calcMode.
`additive`	`replace` (default) or `sum` (add to base value).
`accumulate`	`none` (default) or `sum` (each repeat builds on previous).

Example:

<circle cx="50" cy="50" r="20" fill="tomato">
  <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite"/>
</circle>

`<animateTransform>` Animation

Animates the transform attribute specifically. Required because transform values aren't simple scalars.

Attribute	Description
`type`	Transform type: `translate`, `rotate`, `scale`, `skewX`, `skewY`.
`from`, `to`, `by`, `values`	Values appropriate to the type (e.g., `"0 50 50"` for rotate = angle cx cy).
`additive`	`sum` allows composing multiple transform animations.

All timing attributes from <animate> apply.

Example:

<rect x="40" y="40" width="20" height="20" fill="#e5c07b">
  <animateTransform attributeName="transform" type="rotate"
    from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite"/>
</rect>

`<animateMotion>` Animation

Moves an element along a path.

Attribute	Description
`path`	The motion path (same syntax as `<path d="...">`).
`rotate`	`auto` (orient to path tangent), `auto-reverse`, or a fixed angle.
`keyPoints`	Fine-grained control over position along path at each keyTime.

Can also contain an <mpath> child to reference an external path element.

Example:

<circle r="6" fill="#c678dd">
  <animateMotion path="M 20 50 Q 100 0 180 50" dur="2s" repeatCount="indefinite" rotate="auto"/>
</circle>

`<mpath>` Animation

Child of <animateMotion>. References a <path> element to use as the motion path.

Attribute	Description
`href`	Reference to the path element: `#pathId`.

Example:

<path id="track" d="M 10 80 Q 95 10 180 80" fill="none"/>
<circle r="5" fill="orange">
  <animateMotion dur="3s" repeatCount="indefinite"><mpath href="#track"/></animateMotion>
</circle>

`<set>` Animation

Sets an attribute to a fixed value for a duration. No interpolation - instant state change. Useful for visibility toggles, colour swaps on events, etc.

Attribute	Description
`attributeName`	Attribute to set.
`to`	The value to set.
`begin`, `dur`, `end`, `fill`	Standard timing attributes.

Example:

<rect x="30" y="30" width="60" height="60" fill="blue">
  <set attributeName="fill" to="red" begin="click" dur="1s"/>
</rect>

Descriptive & Metadata

`<title>` Descriptive

Accessible name for the parent element. Shown as tooltip on hover in most browsers. Important for accessibility.

Example:

<circle cx="50" cy="50" r="30" fill="gold">
  <title>Golden coin</title>
</circle>

`<desc>` Descriptive

Longer accessible description. Not displayed visually but available to assistive technologies.

Example:

<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">Sales chart</title>
  <desc id="chart-desc">Bar chart showing monthly sales from Jan to Jun.</desc>
</svg>

`<metadata>` Descriptive

Container for metadata (e.g., RDF, Dublin Core). Not rendered.

Example:

<metadata>
  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <rdf:Description rdf:about="" dc:title="My Graphic"/>
  </rdf:RDF>
</metadata>

Linking & References

`<a>` Linking

Hyperlink wrapper for SVG content. Works like HTML <a>.

Attribute	Description
`href`	Link target URL.
`target`	Where to open: `_self`, `_blank`, etc.

Example:

<a href="https://example.com" target="_blank">
  <text x="10" y="30" fill="blue">Click me</text>
</a>

Markers

`<marker>` Marker

Defines a graphic drawn at vertices of <path>, <line>, <polyline>, or <polygon>. Think arrowheads, dots, or custom vertex decorations.

Attribute	Description
`markerWidth`, `markerHeight`	Size of the marker viewport.
`refX`, `refY`	The point in the marker that aligns with the vertex.
`orient`	`auto` (follow path tangent), `auto-start-reverse`, or a fixed angle.
`markerUnits`	`strokeWidth` (default, scales with stroke) or `userSpaceOnUse`.
`viewBox`	Internal coordinate system.
`preserveAspectRatio`	Aspect ratio handling.

Applied via: marker-start, marker-mid, marker-end properties.

Example:

<marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>
</marker>
<line x1="20" y1="50" x2="160" y2="50" stroke="#333" stroke-width="2" marker-end="url(#arrow)"/>

Images & Foreign Content

`<image>` Image

Embeds a raster image (PNG, JPEG, etc.) or another SVG file.

Attribute	Description
`href`	Image URL.
`x`, `y`	Position.
`width`, `height`	Rendered dimensions.
`preserveAspectRatio`	How to fit the image within the given dimensions.

Example:

<image href="photo.png" x="10" y="10" width="180" height="120"
       preserveAspectRatio="xMidYMid meet"/>

`<foreignObject>` Container

Embeds non-SVG content (typically HTML/XHTML) within an SVG. Extremely useful for rich text, form elements, or complex layouts inside SVG.

Attribute	Description
`x`, `y`	Position.
`width`, `height`	Dimensions of the foreign content area.

Example:

<foreignObject x="20" y="20" width="160" height="80">
  <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px;">
    <p>HTML content inside SVG</p>
  </div>
</foreignObject>

Presentation Attributes (CSS / SVG Overlap)

These are attributes that can also be set via CSS. They act as the lowest-priority style declaration (below user-agent stylesheet). CSS properties with the same name override them.

Priority order: Inline style="" > CSS rules (by specificity) > Presentation attributes

Attribute / CSS Property	Applies To	Description
`fill`	Shapes, text	Interior paint: colour, gradient url(), pattern url(), `none`.
`fill-opacity`	Shapes, text	Opacity of the fill paint (0–1).
`fill-rule`	Shapes	`nonzero` (default) or `evenodd`. Determines inside/outside for complex paths.
`stroke`	Shapes, text	Outline paint.
`stroke-width`	Shapes, text	Stroke thickness.
`stroke-linecap`	Shapes	`butt` (default), `round`, `square`.
`stroke-linejoin`	Shapes	`miter` (default), `round`, `bevel`.
`stroke-dasharray`	Shapes	Dash pattern: `"5 3"`, `"10 5 2 5"`, etc.
`stroke-dashoffset`	Shapes	Offset into the dash pattern. Animating this creates "drawing" effects.
`stroke-opacity`	Shapes, text	Stroke paint opacity.
`stroke-miterlimit`	Shapes	Limit on miter join extension. Default: 4.
`opacity`	All	Element-level opacity (composites element then applies).
`transform`	All	2D/3D transform. SVG values: `translate()`, `rotate()`, `scale()`, `skewX()`, `skewY()`, `matrix()`.
`transform-origin`	All	Origin for transforms. In SVG, defaults to `0 0` (not `50% 50%` like CSS on HTML elements!).
`visibility`	All	`visible`, `hidden`, `collapse`. Hidden elements still occupy space and receive events.
`display`	All	`inline` (default), `none`. `none` removes from rendering tree entirely.
`clip-path`	All	Reference to a `<clipPath>`.
`mask`	All	Reference to a `<mask>`.
`filter`	All	Reference to a `<filter>`.
`color`	All	Inherited current colour. Used via `fill="currentColor"`.
`font-family`	Text	Font family (same as CSS).
`font-size`	Text	Font size.
`font-weight`	Text	Font weight.
`font-style`	Text	Font style (italic, oblique).
`text-anchor`	Text	`start` (default), `middle`, `end`. SVG equivalent of text-align.
`dominant-baseline`	Text	Vertical text alignment baseline.
`text-decoration`	Text	Underline, overline, line-through.
`letter-spacing`	Text	Space between characters.
`word-spacing`	Text	Space between words.
`pointer-events`	All	Controls hit-testing: `visiblePainted`, `visible`, `painted`, `fill`, `stroke`, `all`, `none`.
`cursor`	All	Cursor style on hover.
`overflow`	`<svg>`, `<symbol>`, `<pattern>`, `<marker>`	`visible` (SVG default for outermost), `hidden` (default for inner SVG). Controls whether content outside viewport is clipped.

Behaviour	HTML + CSS	SVG
Default transform-origin	`50% 50%` (centre of element)	`0 0` (top-left of SVG viewport)
Box model	Yes (margin, padding, border)	No. SVG elements have no margin/padding/border.
`fill` / `stroke`	Not applicable to HTML	Primary paint mechanism for shapes.
`background`	Yes	Not applicable to SVG elements (use `fill` or underlying `<rect>`).
`width`/`height` via CSS	Sizes the element	On `<svg>`: sizes viewport. On shapes: depends - `<rect>` respects CSS width/height in SVG 2; most shapes use geometry attributes.
Percentage values	Relative to parent/container	Relative to viewBox dimensions (not parent element).

Attribute	Description
`id`	Unique identifier. Used for referencing (`url(#id)`, `href="#id"`).
`class`	CSS class(es). Space-separated.
`style`	Inline CSS declarations.
`tabindex`	Tab order for keyboard navigation.
`lang`	Language of text content.
`data-*`	Custom data attributes (same as HTML).
`aria-*`	ARIA accessibility attributes.
`role`	ARIA role.

Category	Attributes
Mouse	`onclick`, `onmousedown`, `onmouseup`, `onmouseover`, `onmouseout`, `onmousemove`
Focus	`onfocusin`, `onfocusout`
Keyboard	`onkeydown`, `onkeyup`
SVG-specific	`onload`, `onunload`, `onabort`, `onerror`, `onresize`, `onscroll`
Animation	`onbegin`, `onend`, `onrepeat`

SVG Elements & Attributes Reference

Container Elements

<svg> Container

<g> Container

<defs> Container

<symbol> Container

<use> Container

<switch> Container

Basic Shapes

<rect> Shape

<circle> Shape

<ellipse> Shape

<line> Shape

<polyline> Shape

<polygon> Shape

Paths

<path> Shape

Path Commands

Text

<text> Text

<tspan> Text

<textPath> Text

Paint Servers (Gradients & Patterns)

<linearGradient> Paint

<radialGradient> Paint

<stop> Paint

<pattern> Paint

Clipping & Masking

<clipPath> Clipping

<mask> Masking

Filter Effects

<filter> Filter

Filter Primitives

Light Source Elements (inside feDiffuseLighting / feSpecularLighting)

Animation (SMIL)

<animate> Animation

<animateTransform> Animation

<animateMotion> Animation

<mpath> Animation

<set> Animation

Descriptive & Metadata

<title> Descriptive

<desc> Descriptive

<metadata> Descriptive

Linking & References

<a> Linking

Markers

<marker> Marker

Images & Foreign Content

<image> Image

<foreignObject> Container

Presentation Attributes (CSS / SVG Overlap)

Key Differences: SVG Presentation Attributes vs CSS

Global Attributes

Event Attributes

Notes

`<svg>` Container

`<g>` Container

`<defs>` Container

`<symbol>` Container

`<use>` Container

`<switch>` Container

`<rect>` Shape

`<circle>` Shape

`<ellipse>` Shape

`<line>` Shape

`<polyline>` Shape

`<polygon>` Shape

`<path>` Shape

`<text>` Text

`<tspan>` Text

`<textPath>` Text

`<linearGradient>` Paint

`<radialGradient>` Paint

`<stop>` Paint

`<pattern>` Paint

`<clipPath>` Clipping

`<mask>` Masking

`<filter>` Filter

`<animate>` Animation

`<animateTransform>` Animation

`<animateMotion>` Animation

`<mpath>` Animation

`<set>` Animation

`<title>` Descriptive

`<desc>` Descriptive

`<metadata>` Descriptive

`<a>` Linking

`<marker>` Marker

`<image>` Image

`<foreignObject>` Container