Fixing SVG font glyphs by hand

In a web font, I had one glyph where the background and foreground was reversed. Being Mr.Pragmatic, I just went with it, setting foreground and background colours appropriately. But it is an RWD site, and at certain scalings a 1 pixel white line was appearing. Here is how I fixed it.

I opened it in a text editor. What I had was:

<svg ... x="0px" y="0px" width="71px" height="67px" viewBox="0 0 71 67" enable-background="new 0 0 71 67">
<rect fill="#000000" width="71" height="67"/>
<g>
 <path fill="#FFFFFF" d="M49.562,...,31.799z"/>
 <path fill="#FFFFFF" d="M46,...z"/>
</g>
</svg>

The fix was as simple as deleting that <rect> line, and then setting the fill colour of the two <path> tags to be #000000.

When I made the webfont (I use the excellent icomoon.io site to do this) it looked fine. But it looked smaller than the other glyphs in the font. I can add padding easily with CSS, but removing it can be more work.

Conclusion: I don’t know how to do this. I could play around with the viewBox="..." in the <svg> tag, and change the appearance in Inkscape, but it made no difference in icomoon. Similarly, I could select the whole path, scale it in Inkscape, but still no change in icomoon. So, having done the important fix, I gave up on this one (and will stick to controlling the size and padding from CSS.)