The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.
Example
<svg viewBox="0 0 100 100" width="100" height="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
fill
<svg viewBox="0 0 300 100" width="300" height="110" style="border:1px solid #cdcdcd" xmlns="http://www.w3.org/2000/svg">
<path fill="#ff0000"
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" />
<path transform="translate(90,0)" fill="#00ff00"
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" />
<path transform="translate(180,0)" fill="#0000ff"
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>
fill-opacity
<svg viewBox="0 0 300 100" width="300" height="110" style="border:1px solid #cdcdcd" xmlns="http://www.w3.org/2000/svg">
<path fill="#ff0000" fill-opacity="0.1"
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" />
<path transform="translate(90,0)" fill="#ff0000" fill-opacity="0.5"
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" />
<path transform="translate(180,0)" fill="#ff0000" fill-opacity="1"
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>
stroke
The stroke attribute is a presentation attribute defining the color used to paint the outline of the shape;
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 300 100" width="300" height="110" style="border:1px solid #cdcdcd" xmlns="http://www.w3.org/2000/svg">
<path fill="#ff0000" stroke="#000000"
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" />
<path transform="translate(90,0)" fill="#ff0000" stroke="#00ff00"
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" />
<path transform="translate(180,0)" fill="#ff0000" stroke="#0000ff"
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>
</svg>
stroke-width
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape.
<svg viewBox="0 0 300 100" width="300" height="110" style="border:1px solid #cdcdcd" xmlns="http://www.w3.org/2000/svg">
<path fill="#ff0000" stroke="#000000" stroke-width="2"
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" />
<path transform="translate(90,0)" fill="#ff0000" stroke="#000000" stroke-width="4"
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" />
<path transform="translate(180,0)" fill="#ff0000" stroke="#000000" stroke-width="6"
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>
stroke-opacity
The stroke-opacity attribute is a presentation attribute defining the opacity applied to the stroke of a shape.
<svg viewBox="0 0 300 100" width="300" height="110" style="border:1px solid #cdcdcd" xmlns="http://www.w3.org/2000/svg">
<path fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="0.1"
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" />
<path transform="translate(90,0)" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="0.5"
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" />
<path transform="translate(180,0)" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="1"
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>
stroke-dasharray
The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 300 100" width="300" height="110" style="border:1px solid #cdcdcd" xmlns="http://www.w3.org/2000/svg">
<path fill="#ff0000" stroke="#000000" stroke-width="6" stroke-dasharray="4"
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" />
<path transform="translate(90,0)" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-dasharray="8"
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" />
<path transform="translate(180,0)" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-dasharray="4 2 8"
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>
</svg>
stroke-linecap
The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
<svg viewBox="0 0 300 100" width="300" height="110" style="border:1px solid #cdcdcd" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#000000" stroke-width="6" stroke-linecap="butt"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30" />
<path transform="translate(90,0)" fill="none" stroke="#000000" stroke-width="6" stroke-linecap="round"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30" />
<path transform="translate(180,0)" fill="none" stroke="#000000" stroke-width="6" stroke-linecap="square"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30" />
</svg>