How to efficiently render a lot of SVG graphics?

Question

JavaScript

I want to implement a flowchart interface, with the ability to drag the grid itself and the elements with the mouse.
The first option was:

• This option just uses long blocks instead of lines, so not SVG. It is stupid (pure js).
  
• The second option was to use SVG for the lines, and the blocks were inserted on top of the svg tag. The svg block itself is stretched to the desired size in the container with , as in the first version, and just scrolled with the mouse. Also stupid, but less (used Vue.js)overflow: scroll
  
• The third option is to use mostly svg, already scrolled the contents of the tag in the view box. The result is the same as in the second option (also Vue)
  

The computer is not the most powerful, I understand that this is the problem, but what if there is some kind of life hack?).
The main question is: how is the rendering of elements in the browser, and how to optimize it?

Answer 1

In terms of speed, canvas will be faster, but it will be worse in terms of development speed. I have no brakes on vue + svg, at least up to 500 objects on the canvas. For optimization, I can advise some things:
1) Use path instead of several different other shapes.
2) For the grid, don't create a bunch of lines or shapes, just use pattern. Here is an example from my project (it's in React JSX, but not the point)

<pattern id={"bg-" + this.props.id} patternUnits="userSpaceOnUse" width="100" height="100">
    <rect width="100" height="100" fill={this.props.canvasColor}></rect>
    <g fill={this.props.canvasGridColor} style={{ fillOpacity: 0.34 }}>
        <rect width="100" height="1" y="20"></rect>
        <rect width="100" height="1" y="40"></rect>
        <rect width="100" height="1" y="60"></rect>
        <rect width="100" height="1" y="80"></rect>
        <rect width="1" height="100" x="20"></rect>
        <rect width="1" height="100" x="40"></rect>
        <rect width="1" height="100" x="60"></rect>
        <rect width="1" height="100" x="80"></rect>
    </g>
    <rect width="100" height="100" fill="none" strokeWidth="2" stroke={this.props.canvasGridColor}></rect>
</pattern>

this is how I fill it on the canvas
3) Set the unique key attribute for variable objects
4) Throw whole objects into a group, and assign common styles and positions to it.
UPD: a simple example for 1000 objects (can be added by changing the COUNT_OBJECTS constant) with drag&drop
jsfiddle.net/Vlad_IT/81kegmxf
UPD2: here is the same example, only with a grid jsfiddle.net/Vlad_IT/qt64rouL/1 if you make the grid not a fill, but elements, there will be noticeable brakes.