Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I display an image inside SVG circle in HTML5?
To display an image inside an SVG circle in HTML5, you use the <circle> element combined with a clipping path. The <clipPath> element defines the circular boundary, while the <image> element displays the actual image content that gets clipped to the circle shape.
Syntax
Following is the basic syntax for creating a clipped circular image in SVG −
<svg width="width" height="height">
<defs>
<clipPath id="clipId">
<circle cx="x" cy="y" r="radius" />
</clipPath>
</defs>
<image width="width" height="height" href="image-url" clip-path="url(#clipId)" />
</svg>
Here, cx and cy define the circle center coordinates, r sets the radius, and clip-path references the clipping path by its ID.
How Clipping Path Works
The <clipPath> element creates an invisible mask that determines which parts of the image are visible. Only the portions of the image that fall within the circular path defined by the <circle> element will be displayed, creating a perfectly circular cropped image.
Basic Example
Following example demonstrates how to display an image inside a circular SVG shape −
<!DOCTYPE html>
<html>
<head>
<title>Image Inside SVG Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Image Clipped to Circle</h2>
<svg width="300" height="300">
<defs>
<clipPath id="circleClip">
<circle cx="150" cy="150" r="100" />
</clipPath>
</defs>
<image width="300" height="300"
href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
clip-path="url(#circleClip)" />
</svg>
</body>
</html>
The output displays the image cropped to a perfect circle shape −
Image Clipped to Circle [A circular image showing the cropped content within a 200px diameter circle]
Multiple Circular Images
You can create multiple circular images using different clipping paths within the same SVG element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Circular Images</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Circular Images</h2>
<svg width="400" height="200">
<defs>
<clipPath id="circle1">
<circle cx="100" cy="100" r="80" />
</clipPath>
<clipPath id="circle2">
<circle cx="300" cy="100" r="60" />
</clipPath>
</defs>
<image x="20" y="20" width="160" height="160"
href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
clip-path="url(#circle1)" />
<image x="240" y="40" width="120" height="120"
href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
clip-path="url(#circle2)" />
</svg>
</body>
</html>
This creates two circular images of different sizes positioned side by side within the same SVG container.
Adding Border to Circular Image
You can add a circular border around the clipped image by drawing a circle with stroke properties.
Example
<!DOCTYPE html>
<html>
<head>
<title>Circular Image with Border</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Circular Image with Border</h2>
<svg width="300" height="300">
<defs>
<clipPath id="imageClip">
<circle cx="150" cy="150" r="100" />
</clipPath>
</defs>
<image width="300" height="300"
href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
clip-path="url(#imageClip)" />
<circle cx="150" cy="150" r="100"
fill="none" stroke="#007acc" stroke-width="4" />
</svg>
</body>
</html>
The second <circle> element creates a visible border around the clipped image with a blue stroke.
Circular Image with Border [A circular image with a 4px blue border around the circular crop]
Using Pattern Fill with Circular Clipping
You can also use the image as a pattern fill within a circular shape for more advanced effects.
Example
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Image as Pattern Fill</h2>
<svg width="300" height="300">
<defs>
<pattern id="imagePattern" x="0" y="0" width="100%" height="100%">
<image width="300" height="300"
href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" />
</pattern>
</defs>
<circle cx="150" cy="150" r="120" fill="url(#imagePattern)"
stroke="#333" stroke-width="2" />
</svg>
</body>
</html>
This approach uses a pattern definition to fill the circle with the image, providing another method to achieve circular image display.
Key Points
-
The
<clipPath>element must be defined inside a<defs>section for proper organization. -
Each clipping path needs a unique
idattribute to be referenced by theclip-pathproperty. -
The
cx,cy, andrattributes of the circle define the position and size of the clipping area. -
The image dimensions should be large enough to fill the circular area to avoid empty spaces.
-
You can combine clipping paths with other SVG effects like borders, shadows, or transformations.
Conclusion
SVG clipping paths provide a clean and scalable way to display images inside circular shapes in HTML5. By combining <clipPath>, <circle>, and <image> elements, you can create professional circular image displays that maintain quality at any size and work across all modern browsers.
10K+ Views
