Prevent border-radius from clipping SVG icon-CodePudding

I'm trying to add an SVG icon with grey background in a round shape. But the problem is that applying border-radius to make it round is clipping the bottom left portion of the SVG logo. I've played around with padding but it doesn't allow me to set a perfect circle without compromising the border-radius.You can see a small clipping at bottom left corner in this image:

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    padding: 5px 7px;
    background: hsla(0, 0%, 20%, 1);
    border-radius: 20px;
}

It needs atleast 20px border-radius to get a circle shape. In this image I have removed the border-radius and the SVG doesn't get clipped.

I need to get a round background without the clipping occurring.

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    padding: 5px 7px;
    background: hsla(0, 0%, 20%, 1);
    border-radius: 40px;
   padding: 10px 13px;
}

.icon {
  height: 70px;
  width: 70px;

}

<html>
<body>
<div >
  <svg  xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok"  viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"></path></svg>
</div>

</body>
</html>

CodePudding user response：

It's the containing icon element that you want to be circular and with that background color, and possibly with some padding.

There are various ways of positioning the svg. This snippet uses flex to center it in the icon element. It uses 50% as the border radius of the icon element to ensure a circle (whatever size and padding you decide to have on the icon element).

.tik-tok-icon {
  fill: hsla(0, 0%, 50%, 1);
  width: 80%;
}

.icon {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsla(0, 0%, 20%, 1);
  padding: 10px;
}

<html>

<body>
  <div >
    <svg  xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok"  viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"></path></svg>
  </div>

</body>

</html>

CodePudding user response：

As @A Haworth already pointed out: better apply border-radius to your outer div.

As an alternative to flex you can also reposition your icon via transform:

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    transform: scale(0.6) translate(5%, -8%);
}

.icon {
  background: hsla(0, 0%, 20%, 1);
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

Another approach would be to prepend a <circle> element to your icon svg:

<svg  xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok"  viewBox="0 0 512 512">
  <circle  cx="50%" cy="50%" r="50%" fill="#ccc" />
  <path  transform-origin="center" transform="scale(0.7) translate(40, 0)" d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z" />
</svg>

Example snippet: css and svg

.tik-tok-icon {
  fill: hsla(0, 0%, 50%, 1);
  transform: scale(0.6) translate(5%, -8%);
}

.icon {
  background: hsla(0, 0%, 20%, 1);
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.tik-tok-icon2 {
  display: inline-block;
  width: 70px;
}

.icon-bg {
  fill: hsla(0, 0%, 20%, 1);
}

.icon-path {
  fill: hsla(0, 0%, 50%, 1);
}

<p>Border radius</p>
<div >
  <svg  xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok"  viewBox="0 0 448 512">
    <path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z" />
  </svg>
</div>

<p>Circle bg in svg</p>

<svg  xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok"  viewBox="0 0 512 512">
  <circle  cx="50%" cy="50%" r="50%" fill="#ccc" />
  <path  transform-origin="center" transform="scale(0.7) translate(40, 0)" d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z" />
</svg>

This way your icon could easily be resized by changing the icon width/height. Besides you could save your icon as a static asset retaining it's circle shape.