In SVG any shape may be drawn with the path
element. There are, however, a series of shapes with
predefined paths, easier to use.
<svg viewbox='0 0 110 250' width='110' height='250'
xmlns='http://www.w3.org/2000/svg'>
<!-- rectangle -->
<rect x='10' y='10' width='30' height='30'
stroke='red' fill='transparent' stroke-width='2'/>
<!-- rectangle with round corners rx annd ry are corner radii -->
<rect x='60' y='10' rx='10' ry='10' width='30' height='30'
stroke='red' fill='transparent' stroke-width='2'/>
<!-- circle -->
<circle cx='25' cy='75' r='20'
stroke='green' fill='transparent' stroke-width='2'/>
<!-- ellipsis, circle with two radii -->
<ellipse cx='75' cy='75' rx='20' ry='5'
stroke='green' fill='transparent' stroke-width='2'/>
<!-- line, from - to -->
<line x1='10' x2='50' y1='110' y2='150'
stroke='blue' stroke-width='2'/>
<!-- polyline, a series of x y - coordinates -->
<polyline points='60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145'
stroke='blue' fill='transparent' stroke-width='2'/>
<!-- polygon is polyline that close from last x y to start point -->
<polygon points='50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180'
stroke='teal' fill='transparent' stroke-width='2'/>
<!-- path ie bezier -->
<path d='M20,230 Q40,205 50,230 T90,230'
fill='none' stroke='fuchsia' stroke-width='2'/>
</svg>
svg6.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>svg</title>
<style>
.svg0 {
border: 1px solid blue;
margin: 0;
padding: 0;
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<svg xmlns='http://www.w3.org/2000/svg'
viewbox='0 0 300 200'
class='svg0'>
<!-- M move to, in casu start drawing coord
Q quadratic bezier, first coord is control point
second is end drwaing coord -->
<path d='M0,0 Q150,180 300,0'
fill='none' stroke='fuchsia' stroke-width='2'/>
<circle cx='150' cy='180' r='2'
fill='black'/>
</svg>
</body>
</html>
svg7.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>svg</title>
<style>
.svg0 {
border: 1px solid blue;
margin: 0;
padding: 0;
width: 450px;
height: 300px;
}
</style>
</head>
<body>
<div>
<svg class='svg0'><use href='#svgs'/></svg>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id='svgs' viewbox='0 0 300 200'>
<!-- M move to, in casu start drawing coord
Q quadratic bezier, first coord is control point
second is end drwaing coord -->
<path d='M0,0 Q150,180 300,0'
fill='none' stroke='fuchsia' stroke-width='2'/>
<circle cx='150' cy='180' r='2'
fill='black'/>
</symbol>
</svg>
</body>
</html>
svg8.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>svg</title>
<style>
.svg0 {
border: 1px solid blue;
margin: 0;
padding: 0;
}
</style>
<script>
'use strict';
let $ = function(foo) { return document.getElementById(foo); }
let init = function() {
let xmlns = 'http://www.w3.org/2000/svg';
let svg = document.createElementNS(xmlns, 'svg');
svg.setAttributeNS(null, 'viewbox', '0 0 300 200');
svg.setAttributeNS(null, 'class', 'svg0');
let p = document.createElementNS(xmlns, 'path');
p.setAttributeNS(null, 'd', 'M0,0 Q150,180 300,0');
p.setAttributeNS(null, 'stroke', 'fuchsia');
p.setAttributeNS(null, 'stroke-width', 2);
p.setAttributeNS(null, 'fill', 'none');
svg.appendChild(p);
let c = document.createElementNS(xmlns, 'circle');
c.setAttributeNS(null, 'cx', 150);
c.setAttributeNS(null, 'cy', 180);
c.setAttributeNS(null, 'r', 2);
c.setAttributeNS(null, 'fill', 'black');
svg.appendChild(c);
$('svg0').appendChild(svg);
}
window.addEventListener('load', init);
</script>
</head>
<body>
<div id='svg0'></div>
</body>
</html>