chromium/src/third_party/blink/web_tests/svg/custom/shape-rendering.svg

<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>