How to make SVGs sharp in Firefox and Internet Explorer

Question

When I use a <svg> in order to display an icon, it looks perfectly crisp and sharp in Google Chrome. However, as soon as I open the svg in Firefox or Internet Explorer, the icon looks blurry.

It seems like those Browsers render the icon to half pixels. Only Google Chrome is doing a good job here.

What is the best approach to get crisp svg icons in all browsers? (We want to color the icons via fill:... so using a background-image or pixel graphics are no options)

What I have tried so far: I have applied the CSS attribute shape-rendering. but this one is too crisp and edgy.

<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg width="32px" height="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>

<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
	<rect y="19" fill="#231F20" width="24" height="2"></rect>
	<rect y="3" fill="#231F20" width="24" height="2"></rect>
	<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
</i></button>


<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
	<rect y="19" fill="#231F20" width="24" height="2"></rect>
	<rect y="3" fill="#231F20" width="24" height="2"></rect>
	<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>

Answer 1

Hack for Firefox:

svg {
 transform: translateZ(0);
}

What about IE: possible reason when svg container positioned in coordinates like 31.5 (not exactly on pixel line), IE will draw svg in this container the same way, a bit off pixel line.