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

【问题标题】：HTML/CSS - Advantages and disadvantages creating a dashboard using SVGsHTML/CSS - 使用 SVG 创建仪表板的优缺点
【发布时间】：2019-03-01 19:26:47
【问题描述】：

我将使用 HTML 和 CSS 创建仪表板布局。稍后将在大屏幕上显示仪表板。有人说我不应该使用 div 之类的，而是使用

等 SVG 标签

<svg><rect><text>

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

网格项（卡片）可能如下所示：

Timestamp (optional)
Title
Description (multiline)

我的问题是；在我的网格项目中使用 SVG 标签而不是 div 有哪些优点和缺点？到目前为止，在我看来，使用 SVG 似乎更加困难，因为没有简单的方法来实现浮动文本。此外，文本定位（多行）似乎更难实现。

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

【问题讨论】：

仪表板元素是否有设计，使用 CSS 不容易完成？这些人有没有告诉你为什么他们建议在所有事情上都使用 SVG？
不，我认为使用 CSS 创建元素更容易。卡片（网格项目）设计应该是简单的（平面设计或材料设计）。他们的论点是 SVG 在大屏幕上的外观更好。
嗯，在这种情况下，这不是一个有效的论点。当然，按比例放大时，SVG 图标看起来比 PNG 更好。但是 CSS 应用的样式（如边框、边框半径、阴影等）在高分辨率、高密度显示器或缩放时看起来相当不错。
谢谢！我认为使用 HTML/CSS 代替 SVG 在 50 英寸屏幕上不会有太大的变化。

标签： html css svg dashboard

【解决方案1】：

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

至于构建实际页面，这正是 HTML/CSS 的用途——所以我建议你坚持下去。您将获得更轻松的响应，更轻松的放置，是的 - 文本定位在 SVG 中有点复杂，在 HTML/CSS 中超级简单。

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

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

【讨论】：

他们的论点是 SVG 在大屏幕上具有更好的外观。但在我看来，将 HTML/CSS 用于主要布局，将 SVG 用于必须随不同卡片尺寸缩放的图像和图表更实用。
正如@insertusernamehere 提到的，除了图形元素（图像、图表等）之外，SVG 和 HTML/CSS 之间没有视觉差异。除非你想降低 DOM 的复杂性。