Первое, что делает ваш SVG.Вы вряд ли сможете написать свои данные пути вручную, если у вас нет очень простых анимаций.Самыми популярными редакторами являются Illustrator (но он очень дорогой) и Inkscape (это почти нормально для моих целей и бесплатно).Есть много учебников о том, как сделать что-то с этим.Inkscape может экспортировать в довольно аккуратный и стандартный SVG, который вам, скорее всего, потребуется анимировать вручную.
Два способа, которыми я ранее добавил интерактивность в мои SVG, - это либо добавление JS в сам SVG (довольно прикольный)) и импорт SVG на страницу с помощью object или img;или поместив SVG на самом деле внутри страницы, и работая на нем с тем же JS, что и остальная часть страницы.Это не сложно: все, что вы можете сделать с помощью JQuery на странице, например, добавление обработчиков кликов к элементам, перемещение объектов, стилизация с помощью CSS, вы можете делать с помощью JavaScript.Это очень удобно.
Что касается практических ресурсов, я очень часто пользуюсь Mozilla Developer Network (MDN), потому что он имеет хорошие ресурсы для элементов SVG, а jQuery имеет свои собственные превосходныедокументация, а также почти бесконечность обучающих программ Google.Наконец, Inkscape и Illustrator поставляются с собственными руководствами.В некотором смысле, вы, вероятно, задаете вопрос, потому что вы ищете какой-то действительно конкретный сайт, который сделает все это простым, но я не думаю, что он есть, просто потому, что это в основном те же веб-технологии, что и все обычные вещи.вы используете, с добавлением нескольких SVG-элементов, к которым вы привыкнете, и они не будут слишком сложными, если вы создадите их с помощью пакета векторной графики.