Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG image inside circle

Tags:

html

svg

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.

like image 558
Bla... Avatar asked Apr 04 '15 04:04

Bla...


People also ask

How do I add an image to a circle in SVG?

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.

Can you put an image in an SVG?

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.

What is cx and cy in SVG?

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.

Which tag of SVG is used to draw a circle?

<circle> The <circle> SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.


2 Answers

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>
like image 140
Paul LeBeau Avatar answered Sep 21 '22 03:09

Paul LeBeau


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

like image 26
SRIDHARAN Avatar answered Sep 17 '22 03:09

SRIDHARAN