Ivan

расскажите потом через какой период времени вернетесь на использование png)) о полезности и рациональности использования svg ничего плохого сказать не могу. но, когда соберетесь тестировать кроссбраузерность, обратите внимание на то, как с svg работает safari, точнее говоря как он по своему неработает.
вообще, чем больше общения с apple софтом тем больше ощущение, что их политика - пляшите под нашу дудку и не смотрите на остальных, ну т.е. иногда кажется что под них нужно писать абсолютно индивидуальные реализации)

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

а контент на сайте есть?

Как делать это без боли, без втыкания профилирующих строчек в код, без знания структуры фреймворка на уровне контрибьютера?
без втыкания врят ли получится, даже из написанного выше понятно, что некоторая доля погружения обязательна (time - самое примитивное и надежное средство)
хотя некоторые считают, что таймлайна браузера вполне достаточно для выяснения узких мест))

а для чего? вы уверенны что клиент захочет всю тяжесть и тугость ваших алгоритмов видеть на своей машине, где кроме вашей фронтенд-реализации крутится по меньшей мере десяток других не менее полезных приложений, которым тоже хочется кушать память и процессорное время?

зависит от того, что собственно в поиске и что на сайте, если стопроцентное (длинное) попадание и у других такого нет - будете в топе, если что-то повседневное и короткое - то почти не надейтесь попасть в тройку лучших в первое же время работы ресурса. важно чтобы поисковики видели все, что вы хотите показать окружающим и видели это правильно. иногда полезно посмотреть на свой ресурс глазами поисковика - тот же гугл с радостью вам в этом поможет.

Для canvas слоя задать css свойства border-radius: X% или использовать квадратичную кривую безье - метод для рисование такой кривой встроен, называется quadraticCurveTo.
fillRect-ом скруглять не вариант, просто потому, что он не скругляет.
а просто внутреннюю часть закрасить не вариант?

Всё это называется, сделай поиск в гугле
https://colorlib.com/activello/
Вопрос - картинка-скриншот? ответ - да, скриншот
Или это делается в фотошопе? ответ - да, такое можно сделать и в фотошопе