Search code examples
htmlimagesvg

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

Is there a way to display an image inside SVG Circle ?

I tried adding the image inside Svg element but the image does not appear in the circle.

<svg width="100" height="100">
<circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" />
<img src="starkeen_ane.jpg"/>
 </svg>

Can you help me?

Solution

  • Here is an example elaborating on Havenard's comment above:

    <svg width="240" height="240">
    <defs>
        <clipPath id="circleView">
            <circle cx="120" cy="120" r="100" />
        </clipPath>
    </defs>
    <image 
      width="240" 
      height="240" 
      xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/SVG_Logo.svg/240px-SVG_Logo.svg.png" 
      clip-path="url(#circleView)"
    />
 </svg>

    You don't actually draw a <circle> element with an image inside - instead, define a circular clip path, and set it as the 'clip-path' attribute on the <image> tag.