एसवीजी सर्कल के अंदर एक छवि प्रदर्शित करने के लिए, <सर्कल> तत्व का उपयोग करें और क्लिपिंग पथ सेट करें। क्लिपिंग पथ को परिभाषित करने के लिए <क्लिपपाथ> तत्व का उपयोग किया जाता है। SVG में इमेज एलीमेंट का उपयोग करके सेट की जाती है।
उदाहरण
आप HTML5 में SVG सर्कल के अंदर एक छवि प्रदर्शित करने का तरीका जानने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं
<!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>