Firefox Tomorrow

svg element

<path>

View on MDN ↗

The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.

Usage context

Attributes

  • d
    • : This attribute defines the shape of the path. Value type: <string>; Default value: ''; Animatable: yes
  • pathLength
    • : This attribute lets authors specify the total length for the path, in user units. Value type: <number>; Default value: none; Animatable: yes

DOM Interface

This element implements the SVGPathElement interface.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" />
</svg>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also