SVG 优化和性能：人类（多边形、圆形...等形状）与应用程序（路径）答案

【问题标题】：SVG optimization and performance: human (shapes like polygon, circle...) vs application (path)SVG 优化和性能：人类（多边形、圆形...等形状）与应用程序（路径）
【发布时间】：2017-01-17 01:47:49
【问题描述】：

有没有人经历过以下性能的差异：

人类 SVG（多边形、圆形、椭圆、矩形、直线、文本等形状）（由人类在文本编辑器中输入）
应用程序 SVG（路径）（由应用程序生成/导出为 svg）

什么在浏览器中渲染得更快？以字节为单位的大小更小？

我敢打赌，这可能很大程度上取决于实际形象，但我想知道是否有一些通用规则，以及我们是否可以想出一个社区模式。

这是对问题的后续跟进：Examples of polygons drawn by path vs polygon in SVG，作者：chris Frisina。

上下文：我正在通过使用数据 URI（保存在 DOM 节点和 HTTP 请求上）将简单的 JPEG 背景替换为 SVG（以保存字节）作为 CSS3 背景图像来减少绘制时间。我无法决定是否应该使用 Human SVG 或 Application SVG 以及是否应该使用 Base64 编码（我读了很多现代浏览器可以将 UTF-8 用于 SVG，但我想知道这是否适用于 Human SVG 或仅适用于路径！）。

【问题讨论】：

所有这些问题的答案都是“测试并查看”。我非常怀疑会有任何显着差异。主要是因为规范规定基本形状无论如何都要在内部转换为路径表示。即使有差异，也不一定在浏览器之间保持一致。
您的另一个误解是 CSS3 背景图像与内联 SVG 具有相同数量的 DOM 节点，您只是无法访问它们。
@RobertLongson 抱歉，我的帖子肯定不够清楚——我同意你的观点，CSS3 背景图像与内联 SVG 具有相同数量的 dom 节点。它是数据 URI，使它只有一个图像 DOM 节点。如果没有数据 URI，Human SVG 中的每个元素都将成为它自己的节点，这会影响绘制和流动时间。
数据 URI 具有内部 DOM 节点。我不希望油漆流量和时间有很大不同。试试看，当然。

标签： css svg data-uri

【解决方案1】：

假设手动创建和应用程序生成的 svg 生成的 svg 图像完全相同，您将无法注意到绘制时间的差异。但是，即使保存到最优化的版本，程序生成的结果代码也可能要大得多。这是值得关注的。如果您只需要一个三角形，请不要使用诸如 inkscape 之类的东西。在这种情况下，手动创建总是会更简单。

我正在回答这个问题，因为我在为一个更大的应用程序开发一个半复杂的 svg 应用程序时遇到了这个问题。我使用路径来创建大部分形状，但我想知道多边形的性能是否会更好。我的形状是可拖动的，也可以添加/删除/拖动角。他们中的许多人齐头并进。在我对这两个版本的少量测试中，我看不到加载、绘图等方面的差异。这似乎不适用于您的场景，但我会补充一点：因为我正在动态更新 d/ points 属性，我必须测试从 x、y 坐标集连接字符串的两个代码示例。同样，无论是观察正在运行的应用程序还是对代码本身进行基准测试，都没有明显的赢家。

所以，使用你认为最好的那个。如果您不需要路径元素的某些特性（例如弯曲），多边形可能更具上下文关系。

如果其他人对运行时性能有更深入的测试，我很乐意看到。

【讨论】：