Cách hiển thị hình ảnh bên trong hình tròn SVG trong HTML5

Để cắt hình ảnh theo hình tròn trong SVG, dùng <clipPath> chứa <circle>, sau đó áp dụng clip-path="url(#id)" cho thẻ <image>.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG Image</title>
  </head>
  <body>
    <svg width="500" height="350">
      <defs>
        <clipPath id="myCircle">
          <circle cx="250" cy="145" r="125" fill="#FFFFFF" />
        </clipPath>
      </defs>
      <image width="500" height="350" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
    </svg>
  </body>
</html>

Lưu ý: Thuộc tính xlink:href đã lỗi thời, nên dùng href (hỗ trợ tốt trên trình duyệt hiện đại).