<text x y> places the baseline's start; text-anchor (start, middle, end) aligns to it. <tspan> restyles a run, or starts a new line with its own x and a dy. Both take lists: x, y, dx, dy and rotate apply character by character. textLength forces a width by stretching the gaps or, with lengthAdjust="spacingAndGlyphs", the glyphs too. writing-mode takes CSS values such as vertical-rl; SVG 1.1's lr and tb are deprecated.
<svg width="600" height="96" font-family="Georgia" font-size="15" fill="#263238">
<text x="10" y="30" font-size="24" fill="#1f5f8b">The Quiet Harbor
<tspan x="10" dy="22" font-size="15" fill="#263238">Mara Ellison, <tspan
font-weight="bold">$14.99</tspan></tspan></text>
<text x="10" y="86" font-size="20" fill="#b5452f"
rotate="-12 8 -6 10 -8 6 -10 0">Paradox!</text>
<text x="230" y="40" textLength="180" lengthAdjust="spacingAndGlyphs">Salt and Saffron</text>
<rect x="440" y="5" width="30" height="88" fill="#3f7d3a"/>
<text x="455" y="11" writing-mode="vertical-rl" font-size="13" fill="#fff">Big Summits</text>
<rect x="490" y="24" width="100" height="50" fill="#e09a10"/>
<text x="540" y="56" text-anchor="middle" font-size="22" font-weight="bold" fill="#263238"
stroke="#fff" stroke-width="5" paint-order="stroke">4.8 ★</text>
</svg>
The rating's halo is a stroke painted under the fill (paint-order="stroke"). To wrap text, use a <foreignObject> or measure lines with getComputedTextLength().