Width of SVG isn't correct when viewBox is defined

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>

[Please don't post images of code.](http://meta.stackoverflow.com/q/303812/1679849) — r3mainer, Jan 11 '17 at 13:46
Actually I added the pure code. Image is just to show an example. I'll remove the console if you want. — Velidan, Jan 11 '17 at 13:48
Hi Robert. But is it fine to do that? Is it won't break a response design in case of reducing a browser size? (I changed the viewBox prop to : 0,0, 14,15 and it's working). Thank you so much! — Velidan, Jan 11 '17 at 13:50
More code is needed, at least 1 input next to the icon to see it's height. — Syden, Jan 11 '17 at 13:55

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

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

Thank you so much Kashyap for the detailed explanation! – Velidan Jan 12 '17 at 08:13 — Velidan, Jan 12 '17 at 08:13

Syden · Answer 2 · 2017-01-11T18:13:18.040

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>

Thank you so much Syden for the detailed explanation! – Velidan Jan 12 '17 at 08:13 — Velidan, Jan 12 '17 at 08:13

score 2 · Answer 3 · answered Jan 12 '17 at 05:09

There are two problems here:

As others have pointed out, your viewBox is wrong. Change it to "0 0 14 14" to fix that.
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"/>

Thank you so much Paul for the detailed explanation! – Velidan Jan 12 '17 at 08:13 — Velidan, Jan 12 '17 at 08:13

score 1 · Answer 4 · answered Jan 11 '17 at 14:01

1

Your drawing seems to occupy a space much smaller than the viewBox area, just reduce the viewBox size to whatever you need it to be.

answered Jan 11 '17 at 14:01

Robert Longson

118,664
26
252
242

Upon inspecting the other path, the vector itself is only 14×14 – Mr. Polywhirl Jan 11 '17 at 14:10
Thank you so much Robert for the detailed explanation! – Velidan Jan 12 '17 at 08:13

score 0 · Answer 5 · edited May 23 '17 at 12:01

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
   a r,r 0 1,0 (r * 2),0
   a r,r 0 1,0 -(r * 2),0
   "
/>

Thank you so much Mr. Plywhirl for the detailed explanation! — Velidan, Jan 12 '17 at 08:13

Width of SVG isn't correct when viewBox is defined

5 Answers5

View Port

View Box

Example

Solution