Teach with us

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 11:09:15

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements