SVG.js is fast.

by Pankaj Kargirwar

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>

CSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

JavaScript

// prepare data
var max = 5500

var data = {
  svgjs: {
    rects: '138ms', fill: '194ms', gradient: '868ms' 
  }
, snapsvg: {
    rects: '692ms', fill: '848ms', gradient: '3446ms' 
  }
, vanilla: {
    rects: '22ms', fill: '26ms', gradient: '101ms' 
  }
}

var colors = {
  svgjs:   '#ff0066'
, snapsvg: '#05bba6'
, vanilla: '#999999'
}

// build graphics
var draw = SVG().addTo('body').size('100%', 240)

// helpers
function bar(lib, version, y) {
  var width = new SVG.Number(data[lib][version]).divide(max).convert('%')
  draw.rect(width, 15).y(y).fill(colors[lib])
  draw.text(function(add) {
  		add.tspan(data[lib][version])
      add.tspan(version).dx(5).fill('#999').attr('font-size', 12)
    })
  	.move(width.plus('1%'), y - 1)
  	.font({ family: 'Inconsolata', size: 14 })
    .fill('#666')
}

function lib(name, y, color) {
  draw.text(name)
  	.move(0, y + 1)
  	.font({ family: 'Inconsolata', size: 16 })
    .fill(color)
}

lib('Vanilla js', 0, colors.vanilla)
bar('vanilla', 'rects', 20)
bar('vanilla', 'fill', 40)
bar('vanilla', 'gradient', 60)

lib('SVG.js', 80, colors.svgjs)
bar('svgjs', 'rects', 100)
bar('svgjs', 'fill', 120)
bar('svgjs', 'gradient', 140)

lib('Snap.svg', 160, colors.snapsvg)
bar('snapsvg', 'rects', 180)
bar('snapsvg', 'fill', 200)
bar('snapsvg', 'gradient', 220)