docs/svg_examples/C1_e1_G1_C2_b2_E3.svg

<svg xmlns="http://www.w3.org/2000/svg" width="318" height="125" class="card"><rect class="shadow_rect" x="5" y="5" width="310" height="117" rx="3" ry="3" fill="#000000"/><rect stroke="#505050" stroke-width="1" class="card_rect" x="3" y="3" width="310" height="117" rx="3" ry="3" fill="#FFFFFF"/><rect stroke="#505050" stroke-width="1" class="note C1" x="5" y="33" width="18" height="85" fill="#FF0000"/><g class="square C1"><rect stroke="#000000" stroke-width="1" class="square C1" x="8" y="101" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square C1" fill="#000000" x="14" y="107">C1</text></g><rect stroke="#505050" stroke-width="1" class="note D1" x="23" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note E1" x="41" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note F1" x="59" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note G1" x="77" y="33" width="18" height="85" fill="#FF0000"/><g class="square G1"><rect stroke="#000000" stroke-width="1" class="square G1" x="80" y="101" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square G1" fill="#000000" x="86" y="107">G1</text></g><rect stroke="#505050" stroke-width="1" class="note A1" x="95" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note B1" x="113" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note C2" x="131" y="33" width="18" height="85" fill="#FF0000"/><g class="square C2"><rect stroke="#000000" stroke-width="1" class="square C2" x="134" y="101" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square C2" fill="#000000" x="140" y="107">C2</text></g><rect stroke="#505050" stroke-width="1" class="note D2" x="149" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note E2" x="167" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note F2" x="185" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note G2" x="203" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note A2" x="221" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note B2" x="239" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note C3" x="257" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note D3" x="275" y="33" width="18" height="85" fill="#AAAAAA"/><rect stroke="#505050" stroke-width="1" class="note E3" x="293" y="33" width="18" height="85" fill="#FF0000"/><g class="square E3"><rect stroke="#000000" stroke-width="1" class="square E3" x="296" y="101" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square E3" fill="#000000" x="302" y="107">E3</text></g><rect stroke="#505050" stroke-width="1" class="note d1" x="18" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note e1" x="36" y="33" width="10" height="51" fill="#FF0000"/><g class="square e1"><rect stroke="#000000" stroke-width="1" class="square e1" x="35" y="69" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square e1" fill="#000000" x="41" y="75">e1</text></g><rect stroke="#505050" stroke-width="1" class="note f1" x="72" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note a1" x="90" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note b1" x="108" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note d2" x="144" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note e2" x="162" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note f2" x="198" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note a2" x="216" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note b2" x="234" y="33" width="10" height="51" fill="#FF0000"/><g class="square b2"><rect stroke="#000000" stroke-width="1" class="square b2" x="233" y="69" width="12" height="12" fill="#FFFFFF"/><text dominant-baseline="central" text-anchor="middle" font-family="monospace" font-size="8" class="square b2" fill="#000000" x="239" y="75">b2</text></g><rect stroke="#505050" stroke-width="1" class="note d3" x="270" y="33" width="10" height="51" fill="#505050"/><rect stroke="#505050" stroke-width="1" class="note e3" x="288" y="33" width="10" height="51" fill="#505050"/><text dominant-baseline="central" font-family="sans-serif" font-size="15" font-weight="bold" fill="#000000" x="5" y="16">C1_e1_G1_C2_b2_E3</text></svg>