Cropping images with SVG

The current favicon for this site is a picture cropped in the shape of a circle. Rather than use an image editor to do this, it's possible to do it declaratively using SVG. This image can then be used anywhere an SVG graphic can (favicon, theme icons, etc.).

The image can either be linked to or embedded directly with base64 encoding (replace the BASE64_ENCODED_IMAGE_DATA in the example below)

<svg viewBox="0 0 100 100" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <clipPath id="circle">
        <circle cx="50" cy="50" r="50" />
      </clipPath>
    </g>

  <image 
    clip-path="url(#circle)" 
    width="100%" height="100%" 
    xlink:href="data:image/jpeg;base64,BASE64_ENCODED_IMAGE_DATA">
  </image>
</svg>