svg_reference

SVG Element Reference (Updated)

Common SVG Elements

This reference provides an overview of common SVG elements and their key attributes. For complete details, always refer to the latest SVG specification on MDN Web Docs or W3C.

Element | Description | Common Attributes
------- | ----------- | -----------------

**Structure & Grouping**

`<svg>` | The root element for an SVG fragment. | `width`, `height`, `viewBox`, `preserveAspectRatio`, `x`, `y`, `xmlns` (http://www.w3.org/2000/svg)
`<g>` | Groups multiple elements. Transformations applied to `<g>` affect all its children. | `id`, `transform`, `fill`, `stroke`, `opacity` + presentation attributes.
`<defs>` | Container for reusable definitions (gradients, patterns, filters, symbols). Not rendered directly. |
`<use>` | Instances a defined element (e.g., from `<defs>` or another element with an `id`). | `href` (or `xlink:href` for older compatibility), `x`, `y`, `width`, `height`, `transform`.
`<symbol>` | Defines a graphical template object used by `<use>`. Has `viewBox` and `preserveAspectRatio`. | `id`, `viewBox`, `preserveAspectRatio`.
`<a>` | Creates a hyperlink around SVG elements. | `href`, `target`, `download`.

**Shapes**

`<rect>` | Defines a rectangle. | `x`, `y`, `width`, `height`, `rx`, `ry` + presentation attributes.
`<circle>` | Defines a circle. | `cx`, `cy`, `r` + presentation attributes.
`<ellipse>` | Defines an ellipse. | `cx`, `cy`, `rx`, `ry` + presentation attributes.
`<line>` | Defines a straight line. | `x1`, `y1`, `x2`, `y2` + presentation attributes.
`<polyline>` | Defines an open shape made of connected straight lines. | `points` + presentation attributes.
`<polygon>` | Defines a closed shape made of connected straight lines. | `points`, `fill-rule` + presentation attributes.
`<path>` | Defines a complex shape using path commands (lines, arcs, curves). | `d` (path data), `pathLength`, `transform` + presentation attributes.

**Text**

`<text>` | Renders text. | `x`, `y`, `dx`, `dy`, `rotate`, `textLength`, `lengthAdjust`, `text-anchor` + font/fill/stroke attributes.
`<tspan>` | A child of `<text>` or other `<tspan>`s, for styling or positioning parts of text. | Similar to `<text>`, plus `dx`, `dy` relative to current text position.
`<textPath>` | Arranges text along a `<path>`. | `href` (references a path), `startOffset`, `method`, `spacing`.

**Styling & Painting**

`<style>` | Embeds CSS style sheets directly within SVG content. | `type="text/css"`.
`Presentation Attributes` | Many elements accept attributes like `fill`, `stroke`, `stroke-width`, `opacity`, `font-size`, etc., as alternatives to CSS. | (Numerous, apply to specific elements)

**Gradients & Patterns**

`<linearGradient>` | Defines a linear color gradient. | `id`, `x1`, `y1`, `x2`, `y2`, `gradientUnits`, `gradientTransform`, `spreadMethod`.
`<radialGradient>` | Defines a radial color gradient. | `id`, `cx`, `cy`, `r`, `fx`, `fy`, `fr`, `gradientUnits`, `gradientTransform`, `spreadMethod`.
`<stop>` | A color stop within a gradient. | `offset`, `stop-color`, `stop-opacity`.
`<pattern>` | Defines a graphical pattern to fill or stroke an element. | `id`, `x`, `y`, `width`, `height`, `patternUnits`, `patternContentUnits`, `patternTransform`, `viewBox`, `preserveAspectRatio`.

**Clipping & Masking**

`<clipPath>` | Defines a clipping path used to restrict the visible area of an element. | `id`, `clipPathUnits`.
`<mask>` | Defines an alpha mask to control transparency. | `id`, `maskUnits`, `maskContentUnits`, `x`, `y`, `width`, `height`.

**Filters** (All defined within `<filter>`)

`<filter>` | Container for filter primitives. | `id`, `x`, `y`, `width`, `height`, `filterUnits`, `primitiveUnits`.
`<feGaussianBlur>` | Applies Gaussian blur. | `in`, `stdDeviation`, `result`.
`<feOffset>` | Shifts the input image. | `in`, `dx`, `dy`, `result`.
`<feMerge>` | Combines multiple inputs (often original graphic and its shadow/glow). | `result`. Contains `<feMergeNode>` children.
`<feMergeNode>` | Specifies an input for `<feMerge>`. | `in`.
`<feColorMatrix>` | Applies a matrix transformation to colors. | `in`, `type` (`matrix`, `saturate`, `hueRotate`, `luminanceToAlpha`), `values`, `result`.
`<feBlend>` | Blends two images. | `in`, `in2`, `mode` (`normal`, `multiply`, `screen`, etc.), `result`.
`<feComposite>` | Combines two images using Porter-Duff operations. | `in`, `in2`, `operator` (`over`, `in`, `atop`, `xor`, etc.), `k1`, `k2`, `k3`, `k4`, `result`.
`<feFlood>` | Fills filter subregion with a color/opacity. | `flood-color`, `flood-opacity`, `result`.
`<feImage>` | Uses an external image or another SVG graphic as input. | `href` (or `xlink:href`), `preserveAspectRatio`, `result`.
`<feTurbulence>` | Generates Perlin noise. | `type` (`fractalNoise`, `turbulence`), `baseFrequency`, `numOctaves`, `seed`, `stitchTiles`, `result`.
`<feDisplacementMap>` | Distorts an image using another image as a displacement map. | `in`, `in2`, `scale`, `xChannelSelector`, `yChannelSelector`, `result`.
`<feDiffuseLighting>` | Simulates diffuse light. | `in`, `surfaceScale`, `diffuseConstant`, `kernelUnitLength`, `result`. Light source child element required.
`<feSpecularLighting>` | Simulates specular light. | `in`, `surfaceScale`, `specularConstant`, `specularExponent`, `kernelUnitLength`, `result`. Light source child element required.
 (Light sources: `<feDistantLight>`, `<fePointLight>`, `<feSpotLight>`)

**Animation (SMIL - Synchronized Multimedia Integration Language)**
*Note: CSS Animations and Web Animations API are often preferred for new projects, but SMIL is still supported.*

`<animate>` | Animates a single attribute over time. | `attributeName`, `from`, `to`, `by`, `dur`, `repeatCount`, `fill`, etc.
`<animateMotion>` | Animates an element along a motion path. | `path`, `keyPoints`, `rotate`, `dur`, etc.
`<animateTransform>` | Animates a transformation attribute (`transform`). | `type` (`translate`, `scale`, `rotate`, `skewX`, `skewY`), `from`, `to`, `by`, `dur`, etc.
`<set>` | Sets an attribute value for a specified duration (a discrete animation). | `attributeName`, `to`, `begin`, `dur`.

**Other**

`<image>` | Embeds raster images (PNG, JPEG, GIF) or other SVG files. | `href` (or `xlink:href`), `x`, `y`, `width`, `height`, `preserveAspectRatio`.
`<title>` | Provides a human-readable title for an element (often shown as a tooltip, important for accessibility). | (Text content)
`<desc>` | Provides a longer, more detailed description for an element (important for accessibility). | (Text content)
`<!-- ... -->` | Comment, ignored by the parser. |

**Deprecated/Less Common Elements**

`<altGlyph>`, `<altGlyphDef>`, `<altGlyphItem>` | Deprecated. Related to font glyph substitution.
`<font>`, `<font-face>`, etc. | SVG fonts. CSS Web Fonts (@font-face) are generally preferred.
`<tref>` | Deprecated. Use `<use>` to reference text content.

This is not an exhaustive list. SVG is a rich language. Refer to MDN Web Docs for the most current and comprehensive SVG documentation.