How to define SVG viewBox to remove padding around visible elements

Question

This SVG icon from Material Design is slightly off-center. The reason appears due to its viewBox defining a 24x24 container while the only visible path is defined with a 79.17x83.33 container (which you can see if you inspect the SVG in Google Chrome).

Assuming this hypothesis is correct, how can you correct the viewBox so there's no extra padding, which hopefully causes the airplane to get centered? There are other answers that suggest repositioning/translating the SVG to get it centered, but that's not the goal.

The goal is to modify the viewBox, remove extra padding around the visible elements, and allow the SVG to naturally get centered without translation.

The ultimate goal is to ensure the SVG is centered without translating/repositioning the element.

#container {
  width: 100px;
  height: 100px;
  background: red;
}

#icon {
  width: 100px;
  height: 100px;
}

<div id="container">

<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.18 9"/><path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/></svg>

</div>

Possible duplicate of [Find svg viewbox that trim whitespace around](https://stackoverflow.com/questions/29002472/find-svg-viewbox-that-trim-whitespace-around) — Kaiido, Nov 22 '19 at 07:05
@Kaiido `2 2 19 20` almost works but cuts off the plane at the top and has a little more space on the right side of the wing. does it center perfectly for you? thanks so much for your help! — Crashalot, Nov 22 '19 at 07:13
Yes it does, however I see a little bit of antialiasing at the edge of the right wing, might be what makes you see it not centered. — Kaiido, Nov 22 '19 at 07:24
For antialising I'm not too sure, I'd say you could use css image-rendering, but that's a bit risky as you don't really control where the anti-alias will be pushed. Otherwise a true solution would be to desing the icons directly at correct positions. — Kaiido, Nov 22 '19 at 07:30

score -2 · Answer 1 · answered Nov 22 '19 at 07:00

You can do this using transform transform="translate(0.6, 0)" check snippet.

#container {
  width: 100px;
  height: 100px;
  background: red;
}

#icon {
  width: 100px;
  height: 100px;
}

<div id="container">

  <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.18 9"/><path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z" transform="translate(0.6, 0)"/></svg>

</div>

How to define SVG viewBox to remove padding around visible elements

1 Answers1