Why does path not fit inside SVG viewbox?-CodePudding

Expected Behavior: Icon to fit only the area of the 24 x 24 viewbox.

Actual Behavior: The svg tag takes up the correct area of 24 x 24 but the path element is not contained inside of the 24 x 24 area.

How would I be able to have the path be constrained to the 24 x 24 area and not go over? Currently this is what my svg tag looks like.

<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
       <path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
       </path>
    </svg>
</a>

CodePudding user response：

The problem is with your SVG path. It is bleeding outside the view box. This is what it looks like in Illustrator:

This is after editing the path in illustrator to contain it to the view box:

a {
  display: inline-block;
}

<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path d="M12 0C5.4 0 0 5.3 0 11.9c0 5 3 9.4 7.6 11.2-.1-1-.2-2.4 0-3.4l1.4-6s-.4-.7-.4-1.8c0-1.7 1-2.9 2.2-2.9 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.1 0 3.8-2.3 3.8-5.5 0-2.9-2.1-4.9-5-4.9-2.9-.1-5.3 2.1-5.4 4.9v.3c0 1 .4 2.1.9 2.7.1.1.1.2.1.3l-.3 1.4c-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.7 0-3.8 2.7-7.3 7.9-7.3 4.2 0 7.4 3 7.4 6.9 0 4.1-2.6 7.5-6.2 7.5-1.2 0-2.4-.6-2.7-1.4l-.8 3c-.4 1.1-.9 2.2-1.5 3.1 6.3 2 13-1.6 15-7.9.4-1.2.5-2.4.5-3.6C24 5.4 18.6 0 12 0z"/>
      </path>
    </svg>
</a>

Also, adding display: inline-block to your anchor tag allows the SVG to take up it's space.

CodePudding user response：

Remember, the viewBox doesn't have to match your dimensions, so adjust your viewBox - that's what it's there for! The viewBox settings below seems to work. (I scaled up the SVG size and added a 1px border red to show the effect).

svg {
border: 1px solid red;
}

  <svg xmlns="http://www.w3.org/2000/svg" width="240px" height="240px" viewBox="1.6 2 28.73 27.99">
       <path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
       </path>
    </svg>