<svg xmlns="http://www.w3.org/2000/svg">
<g transform="translate(50, 30)">
<g transform="rotate(35, 50, 50)">
<rect fill="green" width="100" height="100"/>
<path d="M0 107 L100 107" stroke-width="1px" stroke="black"/>
<path d="M0 115 L100 115" stroke-width="2px" stroke="black"/>
<path d="M107 0 Q118 25 107 50 T107 100Z" fill="black" />
</g>
<text x="0" y="150" font-size="16px">auto</text>
</g>
<g transform="translate(200, 30)" shape-rendering="crispEdges">
<g transform="rotate(35, 50, 50)">
<rect fill="green" width="100" height="100"/>
<path d="M0 107 L100 107" stroke-width="1px" stroke="black"/>
<path d="M0 115 L100 115" stroke-width="2px" stroke="black"/>
<path d="M107 0 Q118 25 107 50 T107 100Z" fill="black" />
</g>
<text x="0" y="150" font-size="16px">crispEdges</text>
</g>
<g transform="translate(350, 30)" shape-rendering="optimizeSpeed">
<g transform="rotate(35, 50, 50)">
<rect fill="green" width="100" height="100"/>
<path d="M0 107 L100 107" stroke-width="1px" stroke="black"/>
<path d="M0 115 L100 115" stroke-width="2px" stroke="black"/>
<path d="M107 0 Q118 25 107 50 T107 100Z" fill="black" />
</g>
<text x="0" y="150" font-size="16px">optimizeSpeed</text>
</g>
<g transform="translate(500, 30)" shape-rendering="geometricPrecision">
<g transform="rotate(35, 50, 50)">
<rect fill="green" width="100" height="100"/>
<path d="M0 107 L100 107" stroke-width="1px" stroke="black"/>
<path d="M0 115 L100 115" stroke-width="2px" stroke="black"/>
<path d="M107 0 Q118 25 107 50 T107 100Z" fill="black" />
</g>
<text x="0" y="150" font-size="16px">geometricPrecision</text>
</g>
</svg>