SVG path benchmark (2012)

SVG Path Benchmark

Note: January 7, 2020

This benchmark was written in 2012 and the performance measurements below are valid for browsers at that time. The attribute path_seglist has been removed from the SCG element on Chrome and Firefox and this older benchmark no long runs on those systems.

The benchmark does still run on Safari and now has performance equivalent to the Canvas benchmark.

This example benchmarks the time taken to draw an SVG path with 10000 line segments.

On Chrome and Safari the SVG results are about 20x slower than those measured by the equivalent Canvas Path Benchmark. On Firefox, Opera, and IE9 the results are similar.

Google Spreadsheet with results: Canvas/SVG Path Benchmarks

source: gist.github.com/gists/1296930

2012-09-25: Recent Canary version of Chrome and the Nightly version of Safari/Webkit have eliminated this slowdown. See updated results in google spreadsheet.

Related bug reports:

Chromium Issue: 142675: Extremely SVG slow performance drawing 5000 segment path
WebKit Bug: 94048: SVGPathSegList has O(n) append!

<!DOCTYPE html>
<html>
<head>
    <title>SVG Path Benchmark</title>
    <style type="text/css">
      body { margin: 0px 10px; }
      h1 { font-size: 1.3em; line-height: 1.0em; }
      table { font-size: 0.8em; margin: 0px 10px; padding: 2px }
      th { text-align: center; font-weight: bold; padding: 0px  10px 0px 10px; }
      td { text-align: center; font-weight: normal; padding: 0px  10px 0px 10px; }
      ul.hlist { display: inline-block; list-style-type: none; margin: 0px; padding-left: 15px; }
      ul.hlist li { display: inline-table; vertical-align: top; list-style-type: none }
      svg { width: 400px; height: 400px }
      .line { fill: none; stroke: orangered; stroke-width: 1.0px; }
    </style>
    <script type="text/javascript">
      window.requestAnimFrame = (function() {
        return window.requestAnimationFrame ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
                 return window.setTimeout(callback, 1000/60);
               };
      })();
      window.cancelRequestAnimFrame = (function() {
        return window.cancelCancelRequestAnimationFrame ||
               window.webkitCancelRequestAnimationFrame ||
               window.mozCancelRequestAnimationFrame ||
               window.oCancelRequestAnimationFrame ||
               window.msCancelRequestAnimationFrame ||
               window.clearTimeout;
      })();
    </script>
</head>
<body>
  <h1>SVG Path Benchmark</h1>
  <p id="user-agent"></p>
  <ul class="hlist">
    <li>
      <svg id="svg" width="400" height="400">
        <g transform="translate(0,0)">
          <rect width="400" height="400" style="fill: #eeeeee;"></rect>
          <path id="path" class="line" d="M200,200"></path>
        </g>
      </svg>
    </li>
    <li>
      <table>
        <thead>
          <th>Line Segments</td>
          <th>Elapsed Time</td>
          <th>Time of Last Set</td>
        </thead>
        <tbody id="results"></tbody>
      </table>
    </li>
  </ul>
  <script type="text/javascript">
    window.onload=function() {
      
      var user_agent = document.getElementById("user-agent");
      user_agent.innerHTML = navigator.userAgent;

var path = document.getElementById("path");
      var path_seglist = path.pathSegList;
      
      var svg = document.getElementById("svg");
      
      var half_width  = svg.width['baseVal'].value / 2;
      var half_height = svg.height['baseVal'].value / 2;

var xpos = half_width;
      var ypos = half_height;
      
      var i, j;

var factor = 15;
      var factor_div_2 = factor / 2;
      var correction = 0.0035;

function addLineSegments(num) {
        for (i=0; i < num; i++) {
          xpos += (factor * Math.random() - factor_div_2) + (half_width  - xpos) * correction;
          ypos += (factor * Math.random() - factor_div_2) + (half_height - ypos) * correction;
          path_seglist.appendItem(path.createSVGPathSegLinetoAbs(xpos, ypos));
        }
      };

var results = document.getElementById("results");
      var table_row, table_data;
      
      function addToResults(samples, elapsed_time, sample_time) {
        table_row = document.createElement('tr');
        table_data = document.createElement('td');
        table_data.innerHTML = samples;
        table_row.appendChild(table_data);
        table_data = document.createElement('td');
        table_data.innerHTML = elapsed_time;
        table_row.appendChild(table_data);
        table_data = document.createElement('td');
        table_data.innerHTML = sample_time;
        table_row.appendChild(table_data);
        results.appendChild(table_row);
      };

var increment = 1000;
      var count = 0;
      var elapsed_time = 0;
      var sample_time, sample_start, sample_end;