Which is more efficient in SVG, multiple small paths or one giant one?

Question

If I am displaying a regular SVG in a browser (either as an independent file or embedded in HTML), is there any theoretical difference in efficiency between having lots of separate path elements and one giant path element?

I'm thinking of doing some kind of animation from one picture into a totally different picture. If I can draw them both with just the one <path> tag each, animating between them will be much easier. I am however worried that if the path is too large, the processing might take longer or be less efficient.

I have not tested this myself because it would require concatenating a lot of paths by hand, which I don't want to waste time on if it turns out to be hideously inefficient in the end :-(

Cannot seem to find anything in the docs on this, either at W3C or Mozilla. Any comments appreciated.

Answer 1

I know this is old, but answering in case it helps others:

The following plots a line of 1000 random coordinates, 1st as a single path and 2nd as multiple separate paths.

I know it is not very rigorous as a benchmark but it results in ~10x slower performance for enter() of the multiple paths on Chrome 84.

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>