SVG中图像的多个大小/版本

Question

是否可以在SVG文件中嵌入多个图像以实现与ICO文件类似的效果？

在ICO的情况下，文件包含图像的若干版本/尺寸，因此较小的图像可以省略一些细节或具有使用比率，这可以使缩小的图像更具可读性。

---

编辑

我对任何特定的应用程序都不感兴趣，并且我故意不考虑ICO格式的用途（仅用作示例）。

进一步的讨论让我们使用Applications-database.svg，女巫包含四个不同的图像，作为一个例子：

qazxsw poi（原始大小/比例）。

（缩放）。

右侧的图片包含较少的细节，并且具有不同的比例，但在按比例缩小时更具可读性：

然而，不会自动在单个图片之间切换，只有最大和最细节的图像通常是可见的。

所以问题是：当整个图像被调整大小时，我可以用CSS / SVG隐藏/显示不同的图像（可能是Applications-database.svg）（即如果width> 50则显示符号-1，否则显示符号-2）？

Answer 1

是否可以在SVG文件中嵌入多个图像

绝对。

问题是如何使用SVG将知道它应该使用图像的大小。

我们假设这是针对浏览器的。将它分成几层（<symbol>）。这是一个非常简单的例子

<g>

根据需要使用一些CSS或jQuery来显示/隐藏。

这当然需要决定使用哪一层。如果您将此SVG加载到Inkscape中，Inkscape将显示两个图像。我不知道SVG标准本身有什么东西来指定如何渲染SVG，具体取决于渲染的大小。

Answer 2

你好像误解了SVG的重点。

SVG根据形状定义定义图像。这意味着它应该能够以任何尺寸绘制并获得最佳结果*。

它不限于像ICO文件或PNG这样的某些尺寸，它们是基于像素的。

*只要SVG未在其标题中指定固定大小。

根据问题编辑进行更新

您可以在SVG中使用@media查询，根据最终大小对SVG进行不同的样式设置。

<svg>
    <g class="layer_large">
        large image
    </g>
    <g class="layer_small">
        small image
    </g>
</svg>

ellipse {
  fill: lightsteelblue;
  stroke: black;
  stroke-width: 5;
}

@media all and (max-width: 400px)
{
  ellipse {
    stroke-width: 10;
  }
}

@media all and (max-width: 100px)
{
  ellipse {
    fill: white;
  }
}

打开此CodePen并尝试调整浏览器窗口的大小：

<svg viewBox="0 0 100 100">
  <ellipse cx="50" cy="75" rx="45" ry="20"/>
  <ellipse cx="50" cy="50" rx="45" ry="20"/>
  <ellipse cx="50" cy="25" rx="45" ry="20"/>
</svg>

请注意，所有/大多数浏览器都应支持媒体查询，但其他SVG渲染器或编辑器可能不支持它们。