TL; DR：是否可以根据媒体查询通过img标签包含的svg加载其他图像？
我生成了一堆svg文件，其中包含带有文本和图标的表格。 PDF从语义上来说是一个更好的容器，但是我需要保留诸如图像之类的“文档”以进行无缝嵌入/预览，并且它可能无法解决我的问题。所以这个故事是关于图标的。
我用媒体查询编写了内联样式，并选择了与用户屏幕DPI相对应的图标。图标已经捆绑到精灵中，因此我使用pattern/image[xlink:href] + fill:url(#id)。当我将svg直接嵌入HTML（DOM岛）时，一切都按需工作。但是，如果我通过img标签（即<img src="foo.svg">）嵌入svg，它根本不会加载图标，更不用说显示它们了。
我知道可以通过data-URL嵌入图标，但是为所有受支持的屏幕dpi嵌入图标似乎太多了。具有讽刺意味的是，图标是栅格图标，几乎无法矢量化像素艺术，因此我不能为所有DPI设置一组图标。
是否有一种方法可以让媒体查询选择适当的图标，而不将其全部嵌入？
答案 0 :(得分：4)
您无法从<img>标记（或其他“图像”上下文，例如CSS背景图像）中使用的SVG加载外部文件。出于安全和性能方面的考虑，用作映像的SVG必须具有与其他任何映像相同的行为-单个文件，没有辅助资源和脚本。
如果您不想使用嵌入式SVG，则可以考虑使用<object>标签或<iframe>嵌入SVG文件。但是，我建议您实际上进行仔细的测试，以查看浏览器是否下载了图像文件，即使由于CSS而没有使用它们。
答案 1 :(得分：0)
因此，由于不可能有条件地加载：无论是否嵌入，我都应该对栅格集进行一些巧妙的检测。从技术上讲不是直接的答案，但万一有人需要。
我决定去吃饼干。人们通常访问托管这些SVG的同一站点。 我为他们的DPI设置了cookie，然后投放的所有SVG都会选择适当的DPI图像。 对于尚未访问该网站的人，我会使用UA嗅探：移动设备和Mac机获得2倍的收益，其他获得1倍。或每个人只需1倍。