根据 screensize/media 查询阻止下载未使用的 SVG <image xlink>

Question

我在 HTML 页面中间直接嵌入了以下 SVG 代码：

<!-- Desktop SVG -->
<svg class="desktop">
  <g>
    <image xlink:href="/images/desktop.png" />
    <a xlink:href="/link1">
      <g>
        <circle r="10" cy="84" cx="123" />
      </g>
    </a>
  </g>
</svg>

<!-- Mobile SVG -->
<svg class="mobile">
  <g>
    <image xlink:href="/images/mobile.png" />
    <a xlink:href="/link1">
      <g>
        <circle r="10" cy="5" cx="10" />
      </g>
    </a>
  </g>
</svg>

根据屏幕大小，CSS 隐藏一个或另一个，这一切都很好。

问题是 PNG 图像都下载到移动设备和桌面上，即使实际上只会显示一个，这对性能来说很差。

是否可以根据媒体查询阻止 <image> 标签 xlinks 的双重下载（就像您可以对 CSS 背景所做的那样）？

SVG 包含可点击链接（通过 <a xlink:href="..."> 标签），当从外部文件加载 SVG 时它们似乎不起作用，因此通过外部文件加载整个 SVG 代码并使用它因为背景图像不是一个选项。

Answer 1

目前看来这是不可能的。

幸运的是，PNG 覆盖了整个 space SVG，可以将它们从 SVG 中拉出，只留下 xlink，这实现了我想要的：

<style>
.svg-desktop-image {
        background-image: url("/images/desktop.png");
        background-size: contain;
}
.svg-mobile-image {
        background-image: url("/images/mobile.png");
        background-size: contain;
}
</style>
<!-- Desktop SVG -->
<div class="desktop">
  <svg class="svg-desktop-image">
    <g>
      <a xlink:href="/link1">
        <g>
          <circle r="10" cy="84" cx="123" />
        </g>
      </a>
    </g>
  </svg>
</div>

<!-- Mobile SVG -->
<div class="mobile">
  <svg class="svg-mobile-image">
    <g>
      <a xlink:href="/link1">
        <g>
          <circle r="10" cy="5" cx="10" />
        </g>
      </a>
    </g>
  </svg>
</div>

如果有人有任何其他建议，将把这个问题开放一段时间，如果没有，则接受我自己的回答。

根据 screensize/media 查询阻止下载未使用的 SVG <image xlink>

Prevent download of unused SVG <image xlink> depending on screensize/media queries

svg

media-queries

responsive-design