Elements: Structural

Defines the structure of the document, such as the root element, groups, and containers.

• SVG2 spec: https://www.w3.org/TR/SVG2/struct.html

"<clipPath>"

Defines a clipping path, which is used to clip the rendering of other elements using paths and shapes. The clipping path is defined by the child elements of this element. Compared to "<mask>", which uses image-based rendering and their white and black values to determine visibility, "<clipPath>" uses paths and shapes to define the clipping area.This element is not rendered directly, but is referenced by other elements using the clip-path CSS property.

• DOM object: SVGClipPathElement
• SVG2 spec: https://drafts.fxtf.org/css-masking-1/#ClipPathElement

<defs>
 <clipPath id="myClipPath">
   <circle cx="100" cy="100" r="80"/>
   <rect x="100" y="100" width="80" height="80"/>
 </clipPath>
</defs>
 
<rect x="0" y="0" width="200" height="200" fill="purple" clip-path="url(#myClipPath)"/>

"<defs>"

Container for definitions of reusable graphics elements. It is not rendered directly, but its child elements can be referenced by a "<use>" or within a fill or stroke.

• DOM object: SVGDefsElement
• SVG2 spec: https://www.w3.org/TR/SVG2/struct.html#DefsElement

<defs>
 <linearGradient id="MyGradient"><!-- ... --></linearGradient>
</defs>

"<g>"

Creates a group of elements which can be transformed as a single object.

• DOM object: SVGGElement
• SVG2 spec: https://www.w3.org/TR/SVG2/struct.html#GElement

<g transform="translate(50 100)">
  <rect width="100" height="100" fill="black" />
  <rect x="50" y="50" width="100" height="100" fill="lime" />
</g>

"<svg>"

The root element of an SVG document.

• DOM object: SVGSVGElement
• SVG2 spec: https://www.w3.org/TR/SVG2/struct.html#SVGElement

The <svg> element is the root element of an SVG document. It can contain any number of child elements, such as Elements: Basic shapes, Elements: Paint servers, and Elements: Structural.

<svg width="300" height="300" style="background-color: white">
  <!-- ... -->
</svg>

Attribute	Default	Description
x	0	Top-left X coordinate of the SVG viewport.
y	0	Top-left Y coordinate of the SVG viewport.
width	0	Width of the SVG viewport.
height	0	Height of the SVG viewport.
viewBox	(none)	Rectangle in userspace that the SVG viewport is mapped to.
preserveAspectRatio	xMidYMid meet	How to scale the SVG viewport to fit the SVG content.
transform	(none)	Transformation matrix to apply to SVG content.

"<use>"

Reuses an existing element by referencing it with a URI. This is useful for creating repeating patterns or reusing complex shapes.

• DOM object: SVGUseElement
• SVG spec: https://www.w3.org/TR/SVG2/struct.html#UseElement

The <use> element references another element, a copy of which is rendered in place of the <use> in the document. The referenced element may be a container element, in which case a copy of the complete SVG document subtree rooted at that element is used.The cloned content inherits styles from the <use> element. However, these cloned element instances remain linked to the referenced source and reflect DOM mutations in the original.

<svg width="200" height="100">
  <circle id="a" cx="50" cy="50" r="40" stroke="blue" />
  <use href="#a" x="100" fill="blue" />
</svg>

Attribute	Default	Description
x	0	X coordinate to position the referenced element.
y	0	Y coordinate to position the referenced element.
width	auto	Width of the referenced element.
height	auto	Height of the referenced element.
href	(none)	URI to the element to reuse.