Menu
I want to create a circle which contains an image, I already tried using pattern or filter but none of them give me the expected result. Below is the code:
<svg id="graph" width="100%" height="400px">
<!-- filter -->
<filter id = "born1" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"/>
</filter>
<circle id = "born" class = "medium" cx = "5%" cy = "20%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" filter = "url(#born1)"/>
<!-- pattern -->
<defs>
<pattern id="image" x="0" y="0" height="100%" width="100%">
<image x="0" y="0" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
</pattern>
</defs>
<circle id = "sd" class = "medium" cx = "5%" cy = "40%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" fill="url(#image)"/>
</svg>My goal is to preserve the circle and give background image inside it, something like CSS attr background-image.
558
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.
The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files. The only image formats SVG software must support are JPEG, PNG, and other SVG files.
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) The r attribute defines the radius of the circle.
<circle> The <circle> SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
A pattern will work. You just have to give the <image> a size. Unlike HTML, SVG images default to width and height of zero.
Also, if you want the image to scale with the circle, then you should specify a viewBox for the pattern.
<svg id="graph" width="100%" height="400px">
<!-- pattern -->
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
</pattern>
</defs>
<circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>This is an alternative to SVG, you don't actually need SVG for this. You can accomplish your goal with image tag itself.
.avatar {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 50%;
border: solid 5px red;
}
<img src="https://connectoricons-prod.azureedge.net/kusto/icon_1.0.1027.1210.png" alt="Avatar" class="avatar">
Refer here for live demo
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
