How can I change the svg path size to 20.10x24.40. I believe the path d values are incorrect.

<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.42859 25.5714C1.42859 19.8912 6.03402 15.2857 11.7143 15.2857C17.3946 15.2857 22 19.8912 22 25.5714M16.8572 6.57145C16.8572 9.41116 14.554 11.7143 11.7143 11.7143C8.87459 11.7143 6.57145 9.41116 6.57145 6.57145C6.57145 3.73173 8.87459 1.42859 11.7143 1.42859C14.554 1.42859 16.8572 3.73173 16.8572 6.57145Z" stroke="#151F27" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Currently the icon path size is as displayed as below. I'm trying to make the path size 20x24. However, the main icon size needs to stay as 25x25. I'm only trying the change the icon path size. Icon path size

CodePudding user response：

The basic problem is that the viewBox is not fitting the content/the path. You need to read up on what the viewBox does. As a starting point: newer mind about the width and the height of the SVG. You can see in my first 3 examples the height is 100.

In the first example I made the viewBox fit exactely to the path. In that case some of the painted parts of the path is cut off. That is not very useful. In example 2 I made the viewBox fit the exact painted area. Now you can see the entire path, but the aspect ratio is not right. I example 3 I made the width of the viewBox the same as the height (25.14) and moved the x value in the viewBox so that the path is in the middle of the viewBox. Now, you can set the correct width and height of the SVG.

I don't understand exactly what you need, but the two last examples are 25x25 and 24x20. So you pick.

If I where to redo the entire SVG I would move the path to the left and up so that its outline would hit 0 and 0. Then I would make the path like 20 or whatever wide (not 20.57) and also like 24 in height (not 24.14). Then it is mush easier to move it around and place it in the right spot so that the painted area also fits.

svg {
  background-color: orange;
}

<p>No space arround the path (<code>viewBox="1.43 1.43 20.57 24.14"</code>): 
<svg height="100" viewBox="1.43 1.43 20.57 24.14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.42859 25.5714C1.42859 19.8912 6.03402 15.2857 11.7143 15.2857C17.3946 15.2857 22 19.8912 22 25.5714M16.8572 6.57145C16.8572 9.41116 14.554 11.7143 11.7143 11.7143C8.87459 11.7143 6.57145 9.41116 6.57145 6.57145C6.57145 3.73173 8.87459 1.42859 11.7143 1.42859C14.554 1.42859 16.8572 3.73173 16.8572 6.57145Z" stroke="#151F27" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</p>
<p>Just enoth space arround the path now that the path is default 1 in width (painting .5 on both sides of the path outline)(<code>viewBox=".93 .93 21.57 25.14"</code>): 
<svg height="100" viewBox=".93 .93 21.57 25.14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.42859 25.5714C1.42859 19.8912 6.03402 15.2857 11.7143 15.2857C17.3946 15.2857 22 19.8912 22 25.5714M16.8572 6.57145C16.8572 9.41116 14.554 11.7143 11.7143 11.7143C8.87459 11.7143 6.57145 9.41116 6.57145 6.57145C6.57145 3.73173 8.87459 1.42859 11.7143 1.42859C14.554 1.42859 16.8572 3.73173 16.8572 6.57145Z" stroke="#151F27" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</p>
<p>Just enoth space for height, but make the SVG as wide as the height (<code>viewBox="-0.855 .93 25.14 25.14"</code>): 
<svg height="100" viewBox="-0.855 .93 25.14 25.14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.42859 25.5714C1.42859 19.8912 6.03402 15.2857 11.7143 15.2857C17.3946 15.2857 22 19.8912 22 25.5714M16.8572 6.57145C16.8572 9.41116 14.554 11.7143 11.7143 11.7143C8.87459 11.7143 6.57145 9.41116 6.57145 6.57145C6.57145 3.73173 8.87459 1.42859 11.7143 1.42859C14.554 1.42859 16.8572 3.73173 16.8572 6.57145Z" stroke="#151F27" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</p>
<p>Now you can give the SVG a height and width of 25: 
<svg height="25" width="25" viewBox="-0.855 .93 25.14 25.14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.42859 25.5714C1.42859 19.8912 6.03402 15.2857 11.7143 15.2857C17.3946 15.2857 22 19.8912 22 25.5714M16.8572 6.57145C16.8572 9.41116 14.554 11.7143 11.7143 11.7143C8.87459 11.7143 6.57145 9.41116 6.57145 6.57145C6.57145 3.73173 8.87459 1.42859 11.7143 1.42859C14.554 1.42859 16.8572 3.73173 16.8572 6.57145Z" stroke="#151F27" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</p>
<p>If the SVG needs to be 24x20 we need to recalulate. Now the viewBox is a bit higher (<code>viewBox=".93 .56 21.57 25.884"</code>): 
<svg height="24" width="20" viewBox=".93 .56 21.57 25.884" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.42859 25.5714C1.42859 19.8912 6.03402 15.2857 11.7143 15.2857C17.3946 15.2857 22 19.8912 22 25.5714M16.8572 6.57145C16.8572 9.41116 14.554 11.7143 11.7143 11.7143C8.87459 11.7143 6.57145 9.41116 6.57145 6.57145C6.57145 3.73173 8.87459 1.42859 11.7143 1.42859C14.554 1.42859 16.8572 3.73173 16.8572 6.57145Z" stroke="#151F27" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</p>

CodePudding user response：

so to clarify some basic svg stuff:

your svg has a fixed set width (20) & height (24). you could also remove those and set them with css OR leave them and override them with css (but it's fine as it is).

the svg also has a viewBox. this is the actual size of the svg and its values are coordinates (x y x1 y1) - so starting point is 0 0 ends on 24 24. consider it as a sheet of paper (0 0 is top left) and your paths/circles/rectanlges etc are positioned relatively to this viewbox. it's a good advice to NEVER touch this unless u know what u do.

what you might need is the preserveAspectRatio attribute, see here. I guess your svg is cut off due to reduced size.