在
网站建设过程中，我们经常考虑SVG的情况，它们可以缩放，但我们还能如何让它们更好地适应多种屏幕尺寸呢？
我们考虑了很多关于如何准备和优化 SVG 代码以用作静态图形或动画的文章。我们喜欢使用 SVG，但它们总是有一些东西让我们感到困扰。假设我们设计了一个基于新能源 的 SVG 场景，它的纵横比为 16：9，大小为 1920×1080。这个 SVG 可以放大和缩小（线索在名称中），所以当它很大时和当它很小时，它看起来很清晰。但在小屏幕上，16：9 的纵横比（现场演示）可能不是最好的格式，并且图像会失去其影响力。有时，纵向方向（如 3：4）更适合屏幕尺寸。
问题就在这里，因为仅使用为不同的屏幕尺寸重新定位内部元素并不容易。这是因为在 SVG 中，内部元素位置被锁定到原始坐标系，因此您无法轻松更改它们在桌面和移动设备之间的布局。这是一个问题，因为动画和交互性通常依赖于元素位置，当更改时，元素位置会中断。
为什么我们不只将 与外部 SVG 一起使用？ 这<picture><picture>元素非常适合响应式图像，但它仅适用于光栅格式（如 JPEG 或 WebP）和被视为图像的外部 SVG 文件。这意味着您无法使用 CSS 为内部元素制作动画或设置样式。最明显的选择是在标记中包含两个不同的 SVG，一个用于小屏幕，另一个用于大屏幕，然后使用 CSS 和媒体查询显示或隐藏它们。但是使用这种方法，两个 SVG 版本都会被加载，当图形复杂时，这意味着下载大量不必要的代码。
撇开 JavaScript 现在对设计的显示方式至关重要这一事实不谈，这两个 SVG 通常都会被加载，这增加了 DOM 的复杂性和不必要的权重。此外，维护也成为一个问题，因为现在有两个版本的艺术品需要维护，更新像 Quick Draw 尾巴形状这样小的东西所需的时间增加了一倍。A 就像将字符存储在库中一样。我可以根据需要多次引用它，以保持我的代码一致和轻量级。使用元素，我可以多次插入同一个符号，以不同的位置或大小，甚至在不同的 SVG 中。
我们可以使用 独立放置每个元素。这很强大，因为不是在 SVG 中重新定位元素，而是移动引用。我们的内部布局保持干净，文件大小仍然很小，因为没有复制图稿。浏览器只加载一次，这会减少带宽并加快页面渲染速度。而且因为总是引用相同的，所以无论屏幕尺寸如何，它们的外观都保持一致。
通过结合 CSS 媒体查询和特定转换，我们可以构建自适应 SVG 来重新定位其元素，而无需复制内容、加载额外的资源或依赖 JavaScript。我们只需要在隐藏的符号库中定义每个图形一次。然后可以根据需要在几个可见的 SVG 中重用这些图形。通过 CSS 进行布局切换，结果是快速而灵活的。
