title: SVG image inside circle
body: <p>I want to create a circle which contains an image, I already tried using <code>pattern</code> or <code>filter</code> but none of them give me the expected result. Below is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="graph" width="100%" height="400px"&gt;
  
    &lt;!-- filter --&gt;
    &lt;filter id = "born1" x = "0%" y = "0%" width = "100%" height = "100%"&gt;
        &lt;feImage xlink:href = "https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"/&gt;
    &lt;/filter&gt;
    &lt;circle id = "born" class = "medium" cx = "5%" cy = "20%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" filter = "url(#born1)"/&gt;
    
    &lt;!-- pattern --&gt;
    &lt;defs&gt;
      &lt;pattern id="image" x="0" y="0"  height="100%" width="100%"&gt;
        &lt;image x="0" y="0" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"&gt;&lt;/image&gt;
      &lt;/pattern&gt;
    &lt;/defs&gt;
    &lt;circle id = "sd" class = "medium" cx = "5%" cy = "40%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" fill="url(#image)"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My goal is to preserve the circle and give background image inside it, something like CSS attr <code>background-image</code>. </p>