为什么可变背景SVG文件无法正确显示所有尺寸？

Question

我目前正在尝试在新的流动站点上为现代浏览器使用svg文件而不是图像。 这个想法是将SVG用作流体div上的背景图片，然后可以在悬停时对其进行更改，并且我们可以使用现代化工具（或类似工具）回退到不受支持的浏览器使用img背景。

从理论上讲，这很好，但是在某些浏览器（尤其是Firefox）上，svg的右边缘和下边缘在某些大小上具有一些奇怪的像素化，这对于img而言是不会发生的。

因此，如果您查看http://jsfiddle.net/deshg/xuq6812g/ ，则可以看到一个网格，由4 x 25％的列组成，每个列包含div或img（即100％宽度）。 每个人都有一个带有svg或img背景的div或一个以svg / img为src的img元素。 如果您在FF中查看此图片并将其放大/缩小，您会在某些尺寸下看到我所说的退化。 您还可以在下面的图片中看到这一点（蓝色圈出的区域是降级的位，您可以看到它们出现在svg而不是img上）。

任何人都无法阐明为什么会发生这种情况，以及如何防止这种情况发生，因为如果无法解决，这会使SVG在很大程度上无法使用

的CSS

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.container {
    float: left;
    width: 25%;
    height: 100%;
}

.container img {
    width: 100%;
}

.container div {
    background-size: cover;
    width: 100%;
    padding-top: 100%;
}

的HTML

<div class="container">
    BACKGROUND SVG:<br>
    <div style="background-image: url('https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg');">
    </div>
</div>

<div class="container">
    BACKGROUND IMG:<br>
    <div style="background-image: url('https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png');">
    </div>
</div>

<div class="container">
    SVG IN IMG TAG:<br>
    <img src="https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg" alt="">
</div>

<div class="container">
    IMG IN IMG TAG:<br>
    <img src="https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png" alt="">
</div>

Answer 1

从多年来使用矢量图像开始，当您精确地对其进行裁切时，尽管它们需要混叠，但裁切看起来很奇怪-在曲线处变平了。 因此，圆圈，文本，徽标等在视图框中需要一些额外的边缘。 在这里，我添加了更多内容，但是您明白了。

DEMO之前和之后： http : //jsbin.com/buquw/1/edit

原始-精确裁切，但距离太近，因为此图像需要锯齿。

新版本-您不需要太多，用于夸大情况：