svg

After increasing the stroke-width attribute, the icon is cropped


I made a small simple icon in Figma, uploaded it as an svg and I needed to increase the stroke-width attribute. However, this caused the icon to become cropped. I've tried juggling the viewBox, width and height attributes - I can't get the right ratio. Maybe it's something else? Here is the code of the svg-icon:

<svg width="152" height="132" viewBox="0 0 152 132" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M150 130C150 120.05 148.086 110.198 144.367 101.005C140.648 91.8125 135.197 83.46 128.326 76.4243C121.454 69.3887 114.978 63.8077 106 60C96.5 70.5 87 74 77 74C67.9861 74 58.5 71.5 47.6814 60C38.7033 63.8077 30.5456 69.3887 23.6741 76.4243C16.8026 83.46 11.3518 91.8125 7.63291 101.005C3.91407 110.198 2 120.05 2 130H76L150 130Z" stroke="#0053A4" stroke-width="16"/>
<circle cx="77" cy="38" r="36" stroke="#0053A4" stroke-width="16"/>
</svg>

Solution

  • You simply need to adjust the viewBox, the place where the svg is drawn. If you increase the stroke-width you increase the drawing area, thus the curves are clipped.

    It is worth understanding the essence of viewBox correctly.

    https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

    <svg width="152" height="132" viewBox="-8 -8 168 148" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M150 130C150 120.05 148.086 110.198 144.367 101.005C140.648 91.8125 135.197 83.46 128.326 76.4243C121.454 69.3887 114.978 63.8077 106 60C96.5 70.5 87 74 77 74C67.9861 74 58.5 71.5 47.6814 60C38.7033 63.8077 30.5456 69.3887 23.6741 76.4243C16.8026 83.46 11.3518 91.8125 7.63291 101.005C3.91407 110.198 2 120.05 2 130H76L150 130Z" stroke="#0053A4" stroke-width="16"/>
      <circle cx="77" cy="38" r="36" stroke="#0053A4" stroke-width="16"/>
    </svg>