How to Display an Image Inside Svg Circle in HTML5

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

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

<svg width="500" height="250">
    <defs>
        <clipPath id="circleView">
            <circle cx="250" cy="125" r="125" fill="#FFFFFF" />
        </clipPath>
    </defs>
    <image 
      width="500" 
      height="250" 
      xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg" 
      clip-path="url(#circleView)"
    />
 </svg>

How to add image into center of svg circle?

Ok I found the answer. What I did is adding a filter to my svg:

<filter id = "i1" x = "0%" y = "0%" width = "100%" height = "100%">
    <feImage xlink:href = "birds.png"/>
</filter>

and in the circle add attribute:

circle.setAttribute('filter','url(#i1)');

Add a background image (.png) to a SVG circle shape

An image fill for an svg element is achieved through SVG Patterns...

<svg width="700" height="660">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>

how can I set my Image inside SVG using css?

The simplest solution is to move the image into the SVG. Then use an SVG <clipPath> to clip it to your frame shape.

To simplify the SVG, here's what I have done:

  • Since the frame and the clipping path are the same shape, I have put the <path> into a <defs> (definitions) block, so that the two places that use it can share the path definition. We use SVG <use> elements to reference the path.
  • I've updated the viewBox so that it fits the frame shape. And adjusted coordinates and transforms to suit. Now the SVG can be placed anywhere you want on the page without worrying about unexpected padding etc.

.home__data{
  background-color: red;
}
.home__data  svg{
  height: 509px;
  width: 534px;
  position: absolute;
  top: 150px;
  right: -44px;
  z-index: 1000;
  
}
.home__data svg .frame{
  fill: none;
  fill-opacity:1;
  stroke:#1a1a1a;
  stroke-width:2px;
  stroke-opacity:1;
}

svg{
  display: block;
  position: absolute;
  right: 65px;
  top: 201px;
  width: 374px;
}
<div class="home__data">
  <svg viewBox="0 0 148 131">
    <defs>
      <!-- Shared path definition for both the clip path and the rendered frame -->
      <path id="frame-path"
            d="M48.9,-42.4C60.8,-24.1,66.1,-3.9,60.7,11.5C55.3,26.8,39.2,37.4,22.9,43.8C6.6,50.2,-9.9,52.5,-29.8,48.2C-49.8,43.8,-73.2,32.9,-81.3,13.8C-89.5,-5.3,-82.4,-32.7,-66.3,-51.9C-50.2,-71.1,-25.1,-82.2,-3.3,-79.6C18.5,-76.9,37,-60.6,48.9,-42.4Z"
            transform="translate(85 80)" /> 
      
      <!-- Clipping path used to trim unwanted parts of the image -->
      <clipPath id="frame-clip">
        <use xlink:href="#frame-path"/>
      </clipPath>
    </defs>

    <!-- Draw the image clipped to the frame shape -->
    <image xlink:href="https://img.freepik.com/free-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg?size=626&ext=jpg"
           x="0" y="0" width="148" height="131"
           preserveAspectRatio="xMidYMid slice"
           clip-path="url(#frame-clip)"/>

    <!-- Draw the frame on top of the image -->
    <use xlink:href="#frame-path" class="frame"/>
  </svg>
            
</div>

Display an SVG circle with both color and background

You can use a filter for this. feImage will import an image, feBlend/screen will blend the image and the original. feComposite/in will clip the image to the source graphic.

<svg xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink" width="700px" height="660px"><defs>    <filter id="imageblend" primitiveUnits="objectBoundingBox"><feImage height="120%" width="120%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/8/81/Picea_abies.jpg" preserveAspectRatio="none"/>    <feBlend mode="screen" in2="SourceGraphic"/>    <feComposite operator="in" in2="SourceGraphic"/>    </filter></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="Oval-1" filter="url(#imageblend)" cx="50%" cy="50%" r="30%" fill="#0044ff"/><text x="50%" y="50%" fill="blue" stroke="red" stroke-width="1" text- anchor="middle" dy=".3em">Hello</text></g> </svg>

Text on a Circle Path around an SVG Image

You could achieve this with the image tag:

<image
  x="165" 
  y="150"
  width="88" 
  height="100"
  xlink:href="PATH_TO_YOUR_IMAGE.EXTENSION"
/>

or (like in your linked svg)

<image
  ...
  xlink:href="data:img/png;base64,YOUR_LOOOOONG_IMAGE_DATA"
/>

To move only the text and not the whole image (inkl. the inner bird image) you should define the rotation only for the text:

#circle svg text {
  transform-origin: 50% 50%;
  animation-name: rotate;
  ...
}

Working example: (i removed the circle because it wasn't used)

Unfortunately your linked svg doesn't work here because it's on another domain (but worked locally in my test file). And the inline image data from that svg doesn't fit in the stack snippet (also worked locally in my test file). Therefor i used a simple rect for demonstration.

#container {
  margin: 0%;
  margin-top: 0px;
  margin-bottom: 0px;
}

#circle {
  position: relative;
  width: 500px;
  padding-bottom: 0%;
  overflow: visible;
  z-index: 2;
}

#circle text {
  margin: 0 calc(.14em * -1) 0 0;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: .83em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: black;
  background: linear-gradient(-67deg, #000000 0%, #988d87 28%, #797371 52%, #5e5855 82%, #000000 100%);
  background-size: 100% auto;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  letter-spacing: .32em;
}

#circle svg {
  position: absolute;
  left: 140px;
  top: -110px;
  width: 100%;
  height: 430px;
}

#circle svg text {
  transform-origin: 50% 50%;
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -ms-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes rotate {
  from {
    -o-transform: rotate(0);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and ( max-width: 979px) {
  #circle svg {
    left: 0px !important;
    top: -70px !important;
    height: 360px;
  }
}

@media screen and ( max-width: 480px) {
  #circle svg {
    left: -140px !important;
    top: 140px !important;
  }
}
<div id="container">
  <div id="circle">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve">
      <defs>
        <path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
      </defs>
      <g>
        <use xlink:href="#circlePath" fill="none"/>
        <rect
          x="160" 
          y="160"
          width="80" 
          height="80"
          fill="#FCDB8D"
        />
        <text fill="#ffb605">
          <textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
        </text>
      </g>
    </svg>
  </div>
</div>

Use svg icon inside a css circle

There are 2 problems:

  1. You are not setting a border radius on the red rectangle, that's why you keep seeing rectangles instead of circles.

  2. Also, to be a circle the rectangle needs to be square before adding the border radius, which it won't be when you are using flex and setting a fixed height. If it is not square, you will get ovals instead of circles.

Therefore you will need to add another container for the red circle and place it inside the flex container. As your image has a fixed height & width, you can set a fixed height and width on this container too to make it square.

You need to remove the border-radius: 50%; from your flex container (i.e. treatment-method__icon__container) and use something like this for the new outer class:

.treatment-method__icon__outer_circle {
  background-color: red;
  /* Set the height & width to be the same, so the container is square */
  width: 80px;
  height: 80px;
  /* Add the border radius to round the corners */
  border-radius: 50%;
  /* Add padding around the image if required */
  padding: 10px;
}

The new container is 100 x 100px square as I assume you wanted an outer "border" of space around the image, but you can remove the padding if you want it exactly the same size as the image.

I have added a working example below:

.treatment-methods__icons {
  display: flex;
  flex-wrap: wrap;
}

.treatment-method__icon__container {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
}

.treatment-method__icon__outer_circle {
  background-color: red;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  padding: 10px;
}

.treatment-methods_icon {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #ffffff;
}
<section class="treatment-methods">
  <div class="treatment-methods__icons">
    <div class="treatment-method__icon__container">
      <div class="treatment-method__icon__outer_circle">
        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
      </div>
    </div>
    <div class="treatment-method__icon__container">
      <div class="treatment-method__icon__outer_circle">
        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
      </div>
    </div>
    <div class="treatment-method__icon__container">
      <div class="treatment-method__icon__outer_circle">
        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
      </div>
    </div>
    <div class="treatment-method__icon__container">
      <div class="treatment-method__icon__outer_circle">
        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
      </div>
    </div>

  </div>
</section>

Place svg brand icons into svg circle

I'm using the codepen logo as a symbol and scale it down. I'm putting the symbol together with the circle inside a group and translate the group. 

view{    width: 60%;    margin: 0 auto;    display: block;  }    html{     background-color:black;  }    .orbit{    stroke-dasharray:2;  }
<link rel="stylesheet" href="temp.css">
<svg id="view" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve"><defs>  <symbol id="CP" viewBox="0 0 512 512"><path  d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z"></path></symbol></defs>    <circle class="orbit" r="300" fill="none" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" />    <circle class="orbit" r="120" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" /><g transform="translate(500 380)">       <circle r="30" fill="#777777" />    <use xlink:href="#CP" width="30" height="30" x="-15" y="-15" fill="white" /> </g>     <circle r="70" transform="translate(500 500)" fill="#FDB813" />    <circle r="60" transform="translate(500 500)" fill="#ff8800" />    </svg>

Related Topics

Default Width/Height of an Iframe

Sticky Header and Footer Scrollable Content

Bootstrap 4: Navbar with Logo and 2 Rows

Height Is Not Correct in Flexbox Items in Chrome

How to Use Custom Fonts in an HTML5 Canvas Element

New Facebook Like Button HTML Validation

Markdown and Image Alignment

Random Querystring to Avoid Ie Caching

Making a <Button> That's a Link in HTML

R Shiny Selectedinput Inside Renderdatatable Cells

How to Create More Than One Repository for Github Pages

Difference Between HTML Link Media and CSS Media Queries

Is It Ok to Have Multiple HTML Forms with The Same Name

What Are The Default Values for Justify-Content & Align Content

What Is HTML5 Aria

Integrating CSS Star Rating into an HTML Form

Assigning Multiple Styles on an HTML Element

How to Create Chat Bubbles Like Facebook Messenger


Leave a reply



Submit