CODEWITHSUNDEEP
htmlcsssvg
Tom O'Brien
Tom O'Brien

Reputation: 1831

Path not filling the full SVG element size

I have a simple svg icon I am using. I have set it's height and width to 16px. When I inspect the svg element, it is 16px. However, it looks a little smaller than the other icons it needs to grouped with.

When I inspect the only 'path' in the svg, it's size is 15.625px.

Here is the svg:

<svg height="16px" style="enable-background:new 0 0 512 512;"
  version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M456,506H56c-27.617,0-50-22.393-50-50V56 C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408  c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488  c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498,55.498c0,2.832,0.43,5.557,0.84,8.272l-94.922,52.705  c-10.097-10.537-24.248-17.168-40-17.168c-30.644,0-55.488,24.844-55.488,55.488c0,30.654,24.844,55.498,55.488,55.498  c15.264,0,29.073-6.172,39.102-16.142l95.176,52.851c1.035,29.736,25.312,53.565,55.302,53.565  c30.655,0,55.498-24.844,55.498-55.499c0-30.644-24.843-55.488-55.498-55.488c-17.08,0-32.177,7.891-42.353,20.03l-92.1-51.133  C213.93,261.849,214.213,260.668,214.213,259.408z" id="share_1_" style="fill-rule:evenodd;clip-rule:evenodd;fill:grey;"/>
</svg>

How do I make the path element be the same size as the svg element it is contained within?

ie. If the svg is 16px*16px then then path should be 16px*16px - not 15.625px*15.625px.

Forgive me if this is a dumb question, but I am a total svg novice....

You can see it here in a plnkr: http://plnkr.co/edit/0XBHg89HbUoPdDL22GSF

Upvotes: 6

Views: 15404

Answers (2)

Rodrigo Calix
Rodrigo Calix

Reputation: 637

Is because the path element size is actually: 15.625px X 15.625px,

if you want to change it, you can edit the icon in an SVG editor like Inkscape.

If you do that you will see a little margin at the sides of the icon, then if you click it you will see the actual size of it, just change it to 16px X 16px.

Upvotes: 3

Tom O&#39;Brien
Tom O&#39;Brien

Reputation: 1831

As per commenter Robert Longson, I fixed this by adjusting the height and width of the viewBox using the following calculation:

(15.625/16)*512 = 500

The viewBox then looked like this:

viewBox="0 0 500 500"

This fixed the problem perfectly!

Thanks Rob!

Upvotes: 7

Related Questions