HTML/CSS - 使用 SVG 创建仪表板的优点和缺点

Question

我将使用 HTML 和 CSS 创建一个仪表板布局。稍后将有一个大屏幕显示仪表板。有人说我不应该使用 div 等，而应该使用

等 SVG 标签

<svg><rect><text>

我的意图是使用 CSS 网格 (8x8) 来组织仪表板的元素(网格项)。这些元素可以有不同的大小(1x1、2x2、2x1、1x2)并且可以包含动态内容(文本、图表、表格)。图表将由库生成 - 我更喜欢 Plotly JS - 所以图表已经具有 svg 格式。

网格项(卡片)可能如下所示:

Timestamp (optional)
Title
Description (multiline)

我的问题是；在我的网格元素中使用 SVG 标签而不是 div 有什么优点和缺点？到目前为止，在我看来使用 SVG 更加​​困难，因为没有简单的方法来实现 float 文本。此外，文本定位(多行)似乎更难实现。

为什么使用“标准”HMTL/CSS 代码来创建网格项的基本样式不合法？

Answer 1

SVG 非常适合替换 png，例如图标和其他图形，因为它是基于矢量的，所以它也可以完美缩放。正如您所说，它也非常适合绘制图形和其他东西，这就是为什么大多数图形库使用 SVG 来绘制图形的原因。

至于构建实际页面，这正是 HTML/CSS 的用途 - 所以我建议您坚持这样做。您将获得更轻松的响应、更轻松的放置，是的 - 文本定位在 SVG 中有点复杂，而在 HTML/CSS 中非常容易。

结论:如果您有一个必须在仪表板中缩放的复杂设计，请使用 SVG 构建它，其余部分坚持使用 HTML/CSS。如果没有，请对除图表之外的所有内容使用 HTML/CSS。

那些告诉你使用 SVG 的人有没有给你任何论据来说明为什么 SVG 会更好？如果他们没有，那可能是因为没有论据支持它..