我一定是做错了什么。该图像是从 illustrator 导出为 SVG 并且（我不确定这是否相关）它确实有一些像素数据。 Here's my JSFiddle example.
请注意，直接转到图像，它显示得很好： http://ykcreations.com/tv.svg
编辑：这在 Chrome 或 Safari 中不起作用，但在 Firefox 中起作用。 Webkit 问题？
【问题讨论】：
您的源 SVG 存在问题。请参阅此更新后的指向 a different SVG file 的小提琴，它可以正常工作：http://jsfiddle.net/wdW2K/2/
.tv {
background: url("http://phrogz.net/svg/800x800.svg");
width: 400px; height: 400px;
}
编辑：具体来说，问题似乎是 WebKit 不支持在用作背景的 SVG 中使用 <image>。最低限度地修改您的文件以将<image> 更改为引用本地（非数据uri）文件，并添加<circle/>，当直接在Chrome 中查看SVG 时，我能够看到图像和圆圈，但是当用作背景图片时，只有圆圈可见。
This bug 闻起来很相关。
【讨论】：
<image>..
<image> 元素没有使用data: uri，也没有使用复杂的内容——它看起来本身是正确的，但作为背景不正确。这是支持 WebKit 中存在错误而不是内容问题的信念的数据。
这与您的图像有关，请尝试将以下内容插入您的CSS：
.tv
{
background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
width: 400px;
height: 400px;
}
也许您的SVG 实际上是SVGZ？ SVGZ 文件是SVG 文件的压缩版本。通常你必须配置你的服务器来处理它，但 FF 可能只能处理压缩版本。
编辑 请参阅下面的 Phrogz 的答案（在您阅读本文时可能在上面）；它涵盖了这一点并给出了更好的解释。
【讨论】：
curl http://www.ykcreations.com/tv.svg 应该会传入二进制数据。它不会；它显示正确的编码。
另一个可能的原因是使用错误的 MIME 类型为 SVG 提供服务。将其设置为 'image/svg+xml' 可能会解决此问题。
在 Rails 中，这可以通过将以下内容添加到 config/initializers/mime_types.rb 来完成：
Mime::Type.register 'image/svg+xml', :svg
我在 Chrome 中将 svg 渲染为背景图像时遇到了类似的问题，但在 Firefox 中一切都很好。我发现从 Adobe 导出的 svg 文件中存在语法错误：
错误的 xlink 属性：
xlink:href="data:img/png;base64
正确的 xlink 属性：
xlink:href="data:image/png;base64
下面的文章：
【讨论】：