0

I have two SVG icons, and all I want to do is apply a background, add some padding, and make the padding appear round (border-radius). When adding the padding all is fine and appears as expected, it's only when trying to make it round.

No matter what the amount of padding is, the SVG's are cut off.

SVG with 10px padding and 50% border-radius:

enter image description here

For reference, this is what the SVG normally looks like:

enter image description here

As I explained above, I tried many different padding sizes, but all result in a part of the SVG being cutoff. I've searched on the topic, but the only things I could find were:

Link 1 - It was about another topic not related to mine.

Link 2 - I tried border-block-start, but unfortunately nothing happened.

Can anyone help me?

Refluent
  • 93
  • 8
  • Maybe I don't understand correctly, but in your second image there is no padding or roundness / border-radius visible at all? Can you include a clearer image of what you want to achieve? – Kokodoko Dec 03 '22 at 14:25
  • It is unclear as to what exactly you're trying to achieve. Maybe if you clarify a little further we could possibly come up with the answer. However, if I am getting some type of idea of what you're trying to achieve it could possibly be that you need to wrap your SVG in a div within a div, and style each div individually to get your desired style. If div #1 is your main container, and div #2 is the parent of your SVG, then you could style div#1 with whatever you need as far as background and border radius, then style div#2 with different styling for containing the SVG. Maybe this helps? – KnightTheLion Dec 03 '22 at 14:36
  • Can you upload your pic somewhere so I can check on it? – ColdDarkness Dec 03 '22 at 14:43
  • Use margin 10px instead of padding – Đào Minh Hạt Dec 03 '22 at 14:55
  • In the second picture it's just how the SVG is usually looking like (without any css). I'm not saying this is what I want to achieve. Hope my bad explanation clears things up – Refluent Dec 03 '22 at 15:18
  • What I'm trying to achieve is an SVG (show above) to have a white background and a padding, which I have managed to achieve. The part I need help with is the padding, since, as shown above, the border-radius cuts part of the SVG. – Refluent Dec 03 '22 at 15:21
  • I'm so sorry for wasting your time, someone has closed this question and placed a link to another with a correct solution. Again, I'm so sorry – Refluent Dec 03 '22 at 15:26

2 Answers2

1

This is what I was referring to. Idk if this is what you are asking or not.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, blue, green);
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.img-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    width: 65%;
    border-radius: 23px;
    object-fit: contain;
    overflow: hidden;
    
}

.img-container > img {
    height: 138%;
    width: 149%;
 }
<div class="container">
  <div class="img-container">
    <img src="https://i.stack.imgur.com/831mz.png">
  </div>
</div>
KnightTheLion
  • 179
  • 7
0

Well there is somewhat of a easy solution for this. Some time ago I needed a svg camera icon with number in it, so I found this website for creating custom svg it is easy to use and you can copy paste any existing svg into the program and edit or add styling/drawings to it.

Website: https://pixelied.com/ Top right click 'Explore editor'

You could just create your svg with the desired spacing with the round edge/border.

Iets Iets
  • 47
  • 6