3 ms·

Interactive like this? https://yqnn.github.io/svg-path-editor/ https://yqnn.github.io/svg-path-editor/ I still don't see your point. Why wouldn't I always choo

Interactive like this? https://yqnn.github.io/svg-path-editor/ https://yqnn.github.io/svg-path-editor/ I still don't see your point. Why wouldn't I always choose SVG? What problem or pain point is being solved?

itishappy 7mo ago
It's not interactive for me: https://codepen.io/ItIsHappy/pen/vEXrXxg https://codepen.io/ItIsHappy/pen/vEXrXxg Yes, I'm being pedantic, but that was the point of my comment. SVGs aren't interactive by default, you need to bring your own interactivity. For static content, SVGs work great, but for interactive content the additional sematic layer of JSON Canvas has a clear benefit. SVGs represent connections using paths, while JSON Canvas uses a graph. This means SVG cannot connect a single node to more than 2 adjacent nodes. If I want to draw arrows from Alice, Bob, and Charlie all to Dave, then I need to create a second Dave or reference to that location somehow. (You can see this in your sword example by moving one of the edge points. The sword delaminates because only two of the four edges at that point can be connected together.) SVG provides limited tooling for this, but it gets rather complicated rather quickly.
- StilesCrisis 7mo ago
  Cool, now show me a codepen with an interactive JSON Canvas?
  - deleted 7mo ago
    [deleted]
  - itishappy 7mo ago
    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: <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>

itishappy 7mo ago

It's not interactive for me: https://codepen.io/ItIsHappy/pen/vEXrXxg https://codepen.io/ItIsHappy/pen/vEXrXxg Yes, I'm being pedantic, but that was the point of my comment. SVGs aren't interactive by default, you need to bring your own interactivity. For static content, SVGs work great, but for interactive content the additional sematic layer of JSON Canvas has a clear benefit. SVGs represent connections using paths, while JSON Canvas uses a graph. This means SVG cannot connect a single node to more than 2 adjacent nodes. If I want to draw arrows from Alice, Bob, and Charlie all to Dave, then I need to create a second Dave or reference to that location somehow. (You can see this in your sword example by moving one of the edge points. The sword delaminates because only two of the four edges at that point can be connected together.) SVG provides limited tooling for this, but it gets rather complicated rather quickly.

StilesCrisis 7mo ago
Cool, now show me a codepen with an interactive JSON Canvas?
- deleted 7mo ago
  [deleted]
- itishappy 7mo ago
  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: <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>