How can I display an image inside SVG circle in HTML5?


To display an image inside SVG circle, use the <circle> element and set the clipping path. The <clipPath> element is used to define a clipping path. Image in SVG is set using the <image> element.

Example

You can try to run the following code to learn how to display an image inside SVG circle in HTML5

Live Demo

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

Updated on: 13-May-2020

8K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements