15

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.

Bla...
  • 7,228
  • 7
  • 27
  • 46

3 Answers3

32

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>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
3

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

CodingYourLife
  • 7,172
  • 5
  • 55
  • 69
SRIDHARAN
  • 1,196
  • 1
  • 15
  • 35
  • I've mentioned clearly in answer itself. This is an alternative to SVG. Please see the live demo link. – SRIDHARAN Feb 23 '19 at 09:50
  • 1
    If someone asks you "how to fix the engine of a BMW", do you suggest to buy a Volkswagen? – xoned Jul 15 '19 at 14:10
  • LOL. That is not my intention. This is a better alternative. I was looking for the same desired output as the question requires. I found this answer useful. – SRIDHARAN Jul 16 '19 at 15:20
  • 1
    The questions doesn't say anything about SVG; it asks it "create a circle which contains an image". This is a better way than SVG – Dan Jul 29 '19 at 20:28
2

Try this,

use patternUnits="userSpaceOnUse" and to set height="100%" width="100%" of <image>

 <defs>
    <pattern id="image" x="0" patternUnits="userSpaceOnUse" y="0" height="100%" width="100%">
      <image x="0" y="0" width="500" height="500" xlink:href="http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"></image>
    </pattern>
  </defs>

Demo

USER10
  • 939
  • 11
  • 28