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