codefln

Например:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

А по другому никак.
Не получится просто в файле программно менять, технически наверное реально, но точно не правильно так делать потому что вам нужно каждый раз перезаписывать файл удалять его из DOM, и загружать заново чтобы изменения сохранились. + Файл же будет общим для всех. Короче подход с файлом точно следует исключить.

Пример:
https://jsfiddle.net/zjyeakc4/6/

U.P.D
Если SVG действительно большой, то можно его подключать файлом и оставить глобально и в нем к примеру добавить: <use href="#myCircle"

А потом в нужном месте создавать еще одну свгшку, которая будет содержать этот элемент, и изменения вносить в ней. А главный svg будет подтягивать это

Там же выбивает ошибку:
"checkout_alias_not_found"

Читайте доки api, скорее всего найдете или напишите им в саппорт и вам подскажут.

Для частиц использовать не % с position:absolute
А transform
Должно ускорить. А с частицами лучше всего использовать канвас.

Так же рекомендую посмотреть на gsap:
https://greensock.com

Посмотрите benhmark
https://greensock.com/js/speed.html

npm install <your-git-repo> --save

Вам нужно слушать событие onhashchange
И вызывать скроллинг при смене

https://developer.mozilla.org/ru/docs/Web/API/Wind...