Fair point, SVGs are more portable. They're also more capable (and complicated). JSON Canvas is a more specific tool.

Both of the following examples show the same thing, but the SVG representation doesn't convey the structure:

JSON Canvas:

  {
    "nodes": [
      {"id": "a", "type": "text", "text": "Alice",   "x": 20,  "y": 50,  "width": 40, "height": 10},
      {"id": "b", "type": "text", "text": "Bob",     "x": 170, "y": 50,  "width": 40, "height": 10},
      {"id": "c", "type": "text", "text": "Charlie", "x": 320, "y": 50,  "width": 40, "height": 10},
      {"id": "d", "type": "text", "text": "Dave",    "x": 170, "y": 150, "width": 40, "height": 10}
    ],
    "edges": [
      {"id": "ad", "fromNode": "a", "toNode": "d"},
      {"id": "bd", "fromNode": "b", "toNode": "d"},
      {"id": "cd", "fromNode": "c", "toNode": "d"}
    ]
  }

  <svg width="400" height="200">
    <text x="20"  y="50" >Alice</text>
    <text x="170" y="50" >Bob</text>
    <text x="320" y="50" >Charlie</text>
    <text x="170" y="150">Dave</text>
    <line x1="40"  y1="60" x2="190" y2="130" stroke="black"/>
    <line x1="190" y1="60" x2="190" y2="130" stroke="black"/>
    <line x1="340" y1="60" x2="190" y2="130" stroke="black"/>
  </svg>