Moskus

Если вы о том, чтобы использовать svg clip path на видео, а не на картинке, то это возможно, но работает далеко не везде. Кроме того, это довольно бессмысленно, потому что bounding box этого SVG все равно - прямоугольник.

Вы уверены, что до 2016, а не до 2014, например?
Если серьезно, то хоть на тот же список продуктов Adobe посмотрели. Тогда бы нашли Adobe Animate.

Собственно, browser и тормозит у вас из-за того, что он ее растрирует. Хотите сэкономить на этом - нужно растрировать на сервере или вообще, еще до закачки на сервер.

Хак вам уже посоветовали, а я добавлю, что даже если бы CSS мог влиять на содержимое object, ваш код не работал бы в любом случае. Вы ведь пытаетесь изменить свойства object.big и object.small, что возможно только относительно их размера. А для изменения свойств фигур, селектор должен был бы выглядеть как .small svg * или . small rect, например. Потому что свойства в SVG, один чёрт, не наследуются.

Например, так:

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Поблема в том, что все линии на вашей иконке - это линейные объекты, а не замкнутые контуры. Вам сначала нужно все их превратить в контуры через Path -> Stroke to Path, потом - сделать пересечение тех контуров, которые действительно пересекаются, через Path -> Union, а потом уже делать Path -> Combine.

https://websitebeaver.com/how-to-make-an-interacti...

То, что вы упомянули, к картам имеет сомнительное отношение. Относится к графикам, главным образом.

Задача называется "нахождение центроида".
https://www.npmjs.com/package/polygon-centroid

Нет никакого "HTML-SVG".
SVG использует разметку XML всегда. Соответственно, любая программа, которая умеет открывать файлы SVG, откроет то, что вы процитировали, если вы сохраните это в файл.
В Inkscape есть окно непосредственного редактирования кода XML Editor https://www.packtpub.com/mapt/book/hardware_and_cr...