定义viewBox时SVG的宽度不正确

Question

I am trying to understand why my SVG icon is not rendered correctly. The icon is a little smallest that my SVG element event if the viewBox property was used the same like width\\height.

Thanks for any help

As you see the icon is a little bit smallest than the whole SVG element.

My SVG code.

 <svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg"> <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> <g fill="#9FA09F" fill-rule="evenodd"> <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" /> <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" /> </g> </svg> 

Answer 1

您的绘图似乎占据的空间比viewBox区域小得多，只需将viewBox的大小减小到所需的大小即可。

Answer 2

View Port

-The viewport is the visible area of an <svg> . To set viewport we can use attributes height and width with <svg> .

View Box

-It allow us to set our graphic and stretch to fit within container. viewbox having four property mix-x , min-y , width , height . And min values represent from what point within the image the viewBox should start.

Example

If we set viewport and viewbox , width and height same. Then viewbox cover entire image.

Solution

-For your problem you need to reduce size of viewbox width an height property. But as your image size is small you also need to set width and `height to get required result.

JsFiddle Solution with different example

Answer 3

If you created the icon, it was draw on the top left corner of the canvas. The actual icon is a 14px x 15px inside a 24px x 25px viewbox.

If this was the case, you could either re-draw it centered full width and height of a 24px x 25px workspace canvas or if you can't re-draw it just try to align it manually as it is.

Anyways, if you wish the latter, here's a flex suggestion to align it with CSS translate (tweak values to your benefit):

 .container { display: flex; } svg { transform: translate(25%, 20%); } 

 <div class="container"> <svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg"> <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> <g fill="#9FA09F" fill-rule="evenodd"> <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" /> <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" /> </g> </svg> <input type="text"> </div> 

Answer 4

The reason why your icon appears to be offset is because it is not 24 × 25 pixels. The actual bounds of the vector are 14 × 14 pixels.

I would use an SVG editing tool to fine-tune your vector. The vector that you are currently using is very unstable. I had issues opening it up as-is.

I went ahead and tuned your vector and utilized actual circle and arc-paths.

Here is the result. The original vector is a 32 pixel SVG.

 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> <g id="person-in-circle"> <circle id="circle" cx="16" cy="16" r="15" fill="none" stroke="#9FA09F" stroke-width="2" stroke-linejoin="round" /> <g id="person" fill="#9FA09F"> <circle id="person-head" cx="16" cy="12" r="5" /> <path id="person-shoulders" d="M 24 24 a8,8 0 1,0 -16,0" /> </g> </g> </svg> 

Here is a 16 pixel SVG (Scaled by half)

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> <g id="person-in-circle"> <circle id="circle" cx="8" cy="8" r="7.5" fill="none" stroke="#9FA09F" stroke-width="1" stroke-linejoin="round" /> <g id="person" fill="#9FA09F"> <circle id="person-head" cx="8" cy="6" r="2.5" /> <path id="person-shoulders" d="M 12 12 a4,4 0 1,0 -8,0" /> </g> </g> </svg> 

If you want to find out more about how arc-paths work, check out this answer:

Circle drawing with SVG's arc path

 <path d=" M cx cy m -r, 0 ar,r 0 1,0 (r * 2),0 ar,r 0 1,0 -(r * 2),0 " /> 

Answer 5

There are two problems here:

1. As others have pointed out, your viewBox is wrong. Change it to "0 0 14 14" to fix that.

2. Secondly, by default, <svg> elements are display: inline-block , just like other images. So if they are in a line with other text (inluding <input> elements) they will be positioned so that they sit of the text baseline.

There are various way to solve that, but generally you would just change the SVG to display: block then use the typical ways that you would align vertically to other things on the line. Eg. with float: left and margin .

 svg { display:block; float: left; } input { margin-top: 2px; margin-left: 5px; } 

 <svg width="24" height="24" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"> <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> <g fill="#9FA09F" fill-rule="evenodd"> <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" /> <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" /> </g> </svg> <input type="text"/>