CODEWITHSUNDEEP
javascripthtmlcsssvg
Velidan
Velidan

Reputation: 6019

Width of SVG isn't correct when viewBox is defined

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.

enter image description here

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>

Upvotes: 3

Views: 11517

Answers (5)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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"/>

Upvotes: 2

Syden
Syden

Reputation: 8625

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.

enter image description hereenter image description here

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>

Upvotes: 3

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

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.

screenshot

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
   "
/>

Upvotes: 0

Kashyap Merai
Kashyap Merai

Reputation: 862

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

Upvotes: 4

Robert Longson
Robert Longson

Reputation: 123985

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.

Upvotes: 1

Related Questions