Question

如果我在浏览器中显示常规SVG（作为独立文件或嵌入HTML），那么在拥有大量独立路径元素和一个巨大路径元素之间，效率是否存在理论差异？

我正在考虑从一张照片到一张完全不同的照片做某种动画。如果我只使用一个<path>标记来绘制它们，那么它们之间的动画将更加容易。然而，我担心如果路径太大，处理可能需要更长时间或效率更低。

我自己没有对此进行测试，因为它需要手工连接很多路径，如果事实证明最终效率低得惊人，我不想浪费时间： - （

无论是在W3C还是Mozilla，似乎无法在文档中找到任何内容。任何评论都赞赏。

Answer 1

你不必手动完成它，用一个小的xml解析器来测试它（如果你不得不补充一些玩具数据），这是微不足道的。

话虽如此，在没有完全奇异优化的合理世界中（在同一点上结束的小路径将成为单个长路径），长路径更好 - 但可能只有几个字节。渲染性能不应该真正不同 - 任何智能渲染器都将使用正确的基元，以便图形卡可以并行渲染单个段。

你当然可以找到糟糕的解析器和渲染器，所以对你来说真正的问题将归结为几个组件：

您是否可以控制客户使用的解析器/渲染器？
长路或短途路径会更快吗？

如果您无法控制客户使用的内容，那么无论我们在此处说什么，您都必须构建一组测试数据并对每个常见排列进行测试。

Answer 2

我知道这很老了，但是回答以防万一：

以下内容绘制了一条由1000个随机坐标组成的线，第1条为单个路径，第2条为多个单独路径。

我知道它作为基准不是很严格，但是在Chrome 84上，多路径的enter（）的性能会降低〜10倍。

const pathSingle = [
  [0, 0]
];
const pathMultiple = [];

for (let i = 0; i < 1000; i++) {
  const pathSingleLength = pathSingle.push([
    Math.floor(Math.random() * 200),
    Math.floor(Math.random() * 200),
  ]);

  pathMultiple.push([
    pathSingle[pathSingleLength - 2],
    pathSingle[pathSingleLength - 1]
  ]);
}

const svg1 = d3
  .select("body")
  .append("svg")
  .attr('width', 200)
  .attr('height', 200);

const line = d3.line();

console.time('single');
svg1
  .selectAll('path')
  .data([{
    path: pathSingle,
  }])
  .enter()
  .append('path')
  .attr('d', d => line(d.path));
console.timeEnd('single');

const svg2 = d3
  .select("body")
  .append("svg")
  .attr('width', 200)
  .attr('height', 200);

console.time('multiple');
svg2
  .selectAll('path')
  .data(pathMultiple)
  .enter()
  .append('path')
  .attr('d', d => line(d));
console.timeEnd('multiple');

path {
  fill: none;
  stroke-width: 1px;
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script>

哪个在SVG，多个小路径或一个巨大路径中效率更高？

2 个答案: