Разработка игры: отрисовка карты - CANVAS vs SVG
 

Коллеги, доброго времени суток, собственно вопрос исходит из темы.

Работаю надо разработкой игры. И процесс остановился на рендере карты локации. Карта представляет собой набор объектов, каждый отвечает за свой участок, например "завод", "стадион" (пример) и так далее. Соответственно каждый объект имеет свое изображение, координаты, по сценарию изображения делаются в формате svg, пример:

const map_objects = {

factory: {
name: '/*some name*/',
image: '<svg>.......</svg>',
coords: /*.......*/
},
shop: {
//...

},
gym: {
//...

}

// other ....
}

При инициализации игры, из объектов таких, собирается карта локации. Карту масштабируется и можно ее двигать. С этим нет проблем.
Вопрос собственно в том, если делать через canvas, то по сути будет вставка картинок svg внутрь и несколько слоев canvas. Но ведь можно собрать карту и просто сгенерировав элемент например <gamemap></gamemap> в него вставить объекты и получится то же самое. При том у svg больше возможностей обработки событий, интерактивность ...

Вопрос производительности. При росте игры будет и увеличиваться число объектов.

Что будет быстрее отрисовка в canvas или сборка большой SVG из маленьких???

Обычно один слой.
Например из div можно тоже собрать карту.
У обычных элементов не меньше, а canvas при желании можно сделать интерактивным.Вообще помимо SVG и Canvas есть еще CSS. Используйте что вам больше нравится, будет тормозить перепишите в Canvas)