The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.
<path>
Example
<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>
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
Global attributes
- Core Attributes
- Styling Attributes
class,style- Conditional Processing Attributes
-
Most notably:
requiredExtensions,systemLanguage - Event Attributes
- Presentation Attributes
-
Most notably:
clip-path,clip-rule,color,color-interpolation,color-rendering,cursor,display,fill,fill-opacity,fill-rule,filter,mask,opacity,pointer-events,shape-rendering,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,transform,vector-effect,visibility - ARIA Attributes
-
aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,aria-colspan,aria-controls,aria-current,aria-describedby,aria-details,aria-disabled,aria-dropeffect,aria-errormessage,aria-expanded,aria-flowto,aria-grabbed,aria-haspopup,aria-hidden,aria-invalid,aria-keyshortcuts,aria-label,aria-labelledby,aria-level,aria-live,aria-modal,aria-multiline,aria-multiselectable,aria-orientation,aria-owns,aria-placeholder,aria-posinset,aria-pressed,aria-readonly,aria-relevant,aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-selected,aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext,role
Usage notes
| Categories | Graphics element, Shape element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PathElement |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
path |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
d |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
See also
- SVG basic shapes:
<circle>,<ellipse>,<line>,<polygon>,<polyline>,<rect> - The MDN SVG "Getting Started" tutorial: Path
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path