What is the best way to make a grid on svg?

Question

JavaScript

You need to create a grid on the canvas.

About like here

The dimension can be any, but for example 500 by 500 cells.
I assume several implementation options:
1) squares. Draw each square separately. there will be 250,000 elements
1.1) The same squares, but draw through 1, then where lines from neighboring squares are not drawn, then there will be approximately 125,000 elements
2) lines. Draw horizontal and vertical lines, then there will be about 1000 elements
3) rectangles. Make horizontal and vertical rectangles, through 1 cell, then there will be about 500 elements.
4) pen. Draw the entire grid with a pen, in one line. then there will be only 1 element.
5) ???
So I thought about what will work faster and more optimally? further this grid will be moved by the mouse, the scale will change. There, in theory, there will be elements that will load, but this is another matter.
I'm not interested in how to draw it, I'll generate it with JS. Excites a question of productivity and an optimality.

Answer 1

It all depends on the task you are solving. I think it would be best to implement the options and test them, comparing the performance in your tasks.
As a 5th option, I can suggest a fill pattern: tutorials.jenkov.com/svg/fill-patterns.html