Как оптимальнее сделать сетку на svg?

Question

[Elvis]

Необходимо создать сетку на холсте.

Примерно как тут

Размерность может быть любая, но например 500 на 500 ячеек.
Предполагаю несколько вариантов реализации:
1) квадраты. Нарисовать каждый квадрат отдельно. будет 250000 элементов
1.1) Те же квадраты, но рисовать через 1, тогда там где не нарисован будут линии от соседних квадратов, тогда будет примерно 125000 элементов
2) линии. Нарисовать горизонтальные и вертикальные линии, тогда будет около 1000 элементов
3) прямоугольники. Сделать горизонтальные и вертикальные прямоугольники, через 1 ячейку, тогда будет около 500 элементов.
4) пером. Нарисовать всю сетку пером, одной линией. тогда будет всего 1 элемент.
5) ???

Вот задумался а что будет быстрее и оптимальнее работать? далее эта сетка будет перемещаться мышкой, изменяться масштаб. Там еще по идее будут элементы, которые будут нагружать, но это уже другое дело.
Как это нарисовать - не интересует, JSом сгенерирую. Волнует вопрос производительности и оптимальности.

Answer 1

[twolegs]

Все зависит от задачи, которую решаете. Думаю, правильнее всего будет реализовать варианты и провести их тест, сравнив производительность в ваших задачах.
Как 5-й вариант могу предложить fill паттерном: tutorials.jenkov.com/svg/fill-patterns.html

Comments

[Elvis]

не знал о pattern. этим способом и меньше кода и фактически 1 элемент.