<svg viewBox="0 0 900 320" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.lab{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.1em}
.url{font-family:'DM Sans',monospace;font-size:16px}
.note{font-family:'DM Sans',sans-serif;font-size:13px;fill:#475569}
</style>
</defs>
<rect width="900" height="320" fill="#F8F6F2"/>
<rect x="40" y="40" width="820" height="90" rx="10" fill="#fef2f2" stroke="#fca5a5" stroke-width="1.5"/>
<text x="64" y="68" class="lab" fill="#dc2626">AVOID</text>
<rect x="64" y="78" width="30" height="30" rx="15" fill="#dc2626"/>
<text x="79" y="98" text-anchor="middle" fill="#fff" font-family="DM Sans" font-size="16" font-weight="700">✕</text>
<text x="110" y="98" class="url" fill="#7f1d1d">example.com/?p=4821&amp;cat=12&amp;ref=old-cms</text>
<text x="110" y="118" class="note">Encodes a database ID — tells users and search engines nothing about the page</text>
<rect x="40" y="150" width="820" height="90" rx="10" fill="#f0fdf4" stroke="#86efac" stroke-width="1.5"/>
<text x="64" y="178" class="lab" fill="#15803d">USE</text>
<rect x="64" y="188" width="30" height="30" rx="15" fill="#15803d"/>
<text x="79" y="209" text-anchor="middle" fill="#fff" font-family="DM Sans" font-size="16" font-weight="700">✓</text>
<text x="110" y="208" class="url" fill="#14532d">example.com/blue-widgets/</text>
<text x="110" y="228" class="note">Short, descriptive, hyphenated — readable and self-explanatory at a glance</text>
<text x="450" y="280" text-anchor="middle" class="note" font-weight="600" fill="#0b0b0c">Short, flat, keyword-rich URLs compound in value across an entire site</text>
</svg>
