<line> joins x1,y1 to x2,y2; <polyline> joins points without closing. With the default stroke of none, a line without stroke is invisible, the classic "my SVG is blank" bug. <path> draws anything from its d attribute: M x y moves the pen, L x y, H x and V y draw straight lines, C, S, Q and T draw Bezier curves and A an arc (Curves and Arcs in Path Data), and Z closes the subpath. Uppercase commands take absolute coordinates, lowercase ones are relative to the current point.
<svg width="600" height="110" fill="none" stroke-width="4" stroke-linejoin="round">
<line x1="10" y1="100" x2="170" y2="10" stroke="#b5452f"/>
<!-- ratings 4.6 4.3 4.8 4.1 4.5 4.4 mapped to y = 100 - (rating - 4) * 100 -->
<polyline points="200,40 250,70 300,20 350,90 400,50 450,60" stroke="#1f5f8b"/>
<path d="M530 95 L480 80 L480 20 L530 35 Z" fill="#fff3e0" stroke="#3f7d3a"/>
<path d="M530 35 l50 -15 v60 l-50 15 z" fill="#fff3e0" stroke="#3f7d3a"/>
</svg>
The book's left page uses absolute L commands, the right page relative l and v. A relative path moves by editing its first M alone, and optimizers such as SVGO 22,703 (Optimizing SVG with SVGO) prefer it because it is shorter.