<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .ring {
      outline: -webkit-focus-ring-color 5px auto;
    }
    text {
      writing-mode: vertical-rl;
    }
  </style>

  <circle cx="65" cy="60" r="50" fill="orange" class="ring" />
  <path d="M 140 10 l 50 100 l 50 -50 l -20 0 l -20 -30 Z" fill="orange" class="ring" />
  <g class="ring">
    <rect x="270" y="10" width="100" height="100" fill="orange" />
  </g>

  <g transform="translate(60, 140) rotate(30)">
    <rect width="100" height="100" fill="orange" class="ring" />
  </g>
  <rect width="100" height="100" fill="orange" transform="translate(200, 140) rotate(30)" class="ring" />
  <g class="ring">
    <rect width="100" height="100" fill="orange" transform="translate(360, 140) rotate(30)" />
  </g>

  <text x="10" y="320" class="ring">focused text</text>
  <text transform="translate(100, 320) rotate(30)" class="ring">focused text</text>
  <g class="ring">
    <text transform="translate(200, 320) rotate(30)" class="ring">focused text</text>
  </g>

  <clipPath id="clip">
    <rect width="100" height="100" />
  </clipPath>
  <image xlink:href="resources/green-checker.png" x="10" y="400" width="530" height="410" clip-path="url(#clip)" class="ring" />
  <image xlink:href="resources/green-checker.png" transform="translate(200, 400) rotate(30)" width="530" height="410" class="ring" clip-path="url(#clip)"/>
  <g class="ring" transform="translate(360, 400) rotate(30)">
    <image xlink:href="resources/green-checker.png" width="530" height="410" clip-path="url(#clip)"/>
  </g>

</svg>