Edge，Firefox中的后台SVG缩放问题

Question

我有一个具有SVG背景的div。它可以在Chrome上流畅呈现，但在IE和Firefox上却参差不齐。

css代码：

.blog-menu-logo {
   display: block;
   float: left;
   height: 29px;
   width: 166px;
   margin: 18px 20px 18px 5px;
   background-image: url(/wp-content/themes/hemingway-child/svgs/logo-small.svg);
   background-size: cover;
   image-rendering: auto;

}

以及SVG文件：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1_xA0_Image_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 x="0px" y="0px" width="415px" height="72.5px" viewBox="283 49.25 415 72.5" enable-background="new 283 49.25 415 72.5"
 xml:space="preserve">
<image overflow="visible" enable-background="new" width="982" height="172" id="Layer_1_xA0_Image" xlink:href="data:image/png;base64,iVBORw0KGg...

这将导致：

Chrome

Firefox

边缘

请注意，FF和Edge在我的浏览器上看起来甚至更锯齿。屏幕截图工具会稍微消除锯齿。