Need help using border-radius on an SVG icon

HTML & CSS
1

I have an SVG icon on my web page, which is an uneven width and height. If I add a border-radius of 50% to make a circle around it, it cuts off part of the icon. If I add padding to give it space, it still cuts off part of the image.

How can I make a circular border around the SVG icon without cutting a part out?

I hope this makes sense! Thanks for your help.

2

It would be convenient to see your icon code and the css you have before deciding how to solve your issue.

2 Likes
3

You probably need to edit the viewbox attribute but as Erik said above it would help if you could post the svg and code you are testing on.:slight_smile:

1 Like
4

Here is the SVG: https://svgshare.com/i/Mpr.svg
Sorry, I can’t directly upload it here because SVGs aren’t supported.

<div>
    <img id="share-icon" src="images/icon-share.svg"/>
</div>

#share-icon {
   width: 25px;
   height: auto;
   border-radius: 50%;
   padding: 12px;
   background-color: lightgrey;
}

I’m also trying to make the circle an exact circle. I’m not sure if it’s doing that because the image is uneven.

Please let me know if you need more information. Thanks again!

5

Yes I can see the svg gets cropped when border-radius is active. I would suggest that as you already have a parent div then you use that for the border and you can make that perfectly round and do it like this.

<div id="share-icon">
  <img src="https://svgshare.com/i/Mpr.svg">
</div>

#share-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  padding: 12px;
  background-color: lightgrey;
  display:flex;
}
#share-icon img {
  width: 25px;
  height: auto;
  display: block;
  margin:auto;
}

Adding padding to an image is a bit of an odd thing to do anyway and the above is a simpler solution.

2 Likes
6

That worked perfectly. Thanks for your help! :slight_smile:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.