svg中的响应式图像答案

【问题标题】：responsive image inside svgsvg中的响应式图像
【发布时间】：2019-05-08 19:06:38
【问题描述】：

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 设置一组图标。

有没有办法让媒体查询选择正确的图标而不嵌入它们？

【问题讨论】：

标签： css svg media-queries embedded-resource

【解决方案1】：

您无法从用于<img> 标记（或用于其他“图像”上下文，如 CSS 背景图像）的 SVG 加载外部文件。出于安全和性能原因，用作图像的 SVG 必须像任何其他图像一样运行——单个文件，没有辅助资源，也没有脚本。

如果您不想使用内联 SVG，您可以考虑嵌入带有 <object> 标记或 <iframe> 的 SVG 文件。不过，我建议您实际仔细测试，看看浏览器是否正在下载图像文件，即使它们因为 CSS 而没有使用它们。

【讨论】：

正如我所说，我对如何嵌入它有限制。人们希望在论坛上看到这些文档，其中只有[img] BB-code。所以object 和embed 在我的情况下都不起作用如果他们发布链接，他们可以发布指向完整文档的链接（文本中可能也有超链接）。不过，带有嵌入视网膜图标的 svg 似乎少于一件非视网膜 png。

【解决方案2】：

因此，由于不可能有条件地加载：无论是否嵌入，我都应该对栅格集进行一些巧妙的检测。从技术上讲，这不是直接的答案，但如果有人需要的话。

我决定选择饼干。人们通常访问托管这些 SVG 的同一站点。我会为他们的 DPI 设置一个 cookie，然后所有提供的 SVG 都会选择正确的 DPI 图像。对于尚未访问该网站的人，我会选择 UA 嗅探：手机和 Mac 获得 2 倍，其他 1 倍。或者每个人只需 1 倍。

【讨论】：