Add a Background Image (.Png) to a Svg Circle Shape

<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>

How to add a border to an image inside an SVG circle

You could change the radius on your clipPath circle to be a little bit less than the other circle and use a square image so it fits perfectly.

render() {
  return (
    <svg id='svg1'  viewBox='0 0 48 48'>
      <defs>
        <clipPath id='circleView'>
          <circle cx='24' cy='24' r='18' fill='none' stroke='#FF62E1' strokeWidth='2' />
        </clipPath>
      </defs>
      <image
        x="0"
        y="0"
        width='48'
        height='48'
        xlinkHref={'https://source.unsplash.com/random/1500x1500/'}
        clipPath='url(#circleView)'
      />
      <circle
        cx='24'
        cy='24'
        r='22'
        fill='none'
        stroke='#FF62E1'
        strokeWidth='2'
        // @ts-ignore
        ref={(circle) => { this.circle = circle }} >
      </circle>
    </svg>
    )
  }
}

Codepen

This option leaves a transparent gap where the background can be seen, so may or may not be exactly what you want. The alternative is to create another circle with a stroke but no fill on top with a different radius again.

Alternative Codepen

Centered background image within SVG

Using a pattern fill is the way to go - if your image aspect ratio is square it will work nicely. Notice the patterns width and height are the same as your rectangle. It's important in this case to set the patternUnits to userSpaceOnUse which for simplicity keeps the pattern fill from scaling to the objects bounding box.

.body {  width: 100%;  height: 100%;  background: #1f1b33;  padding: 2rem;}
svg {  width: 120px;}

<div class="body">    <svg viewBox="0 0 121.375 125.397">      <defs>        <pattern id="patt" patternUnits="userSpaceOnUse" width="97" height="97">          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/17496/flace.jpg" width="97" height="97"></image>        </pattern>      </defs>      <g        id="blank"        transform="translate(-1460.94 -927.887)"      >        <path          id="wrapper"          data-name="Caminho 2257"          d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"          transform="translate(1484.938 966.119)"          fill="#fff"          opacity="0.2"        />        <rect          id="within"          data-name="Retângulo 365"          width="97"          height="97"          rx="37"          transform="translate(1475 945)"          fill="url(#patt)"        />      </g>    </svg></div>

<svg width="260" height="120">  <defs>    <pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">      <polygon points="5,0 10,10 0,10" />    </pattern>    <pattern id="Img" width="100" height="100" patternUnits="userSpaceOnUse">      <image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/46/A_Meat_Stall_with_the_Holy_Family_Giving_Alms_-_Pieter_Aertsen_-_Google_Cultural_Institute.jpg"></image>    </pattern>  </defs>
  <circle cx="60" cy="60" r="60" fill="url(#Img)" stroke="red" />  <circle cx="200" cy="60" r="60" fill="url(#Triangle)" stroke="red" /></svg>

<svg width="600" height="600">    <defs>      <pattern id="imgpattern" x="0" y="0" width="1" height="1">        <image width="120" height="250"               xlink:href="http://lorempixel.com/animals/120/250/"/>      </pattern>  </defs>        <path fill="url(#imgpattern)" stroke="black" stroke-width="4"        d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />
</svg>

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />