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
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.)