lagudal

А почему stroke-dashoffset: -500; не устраивает?

Это означает, что шрифты могут генерироваться только из иконок без обводки - даже если у вас в svg только stroke, нужно вначале преобразовать это в path, и после этого скормить иконку Icomoon

у вас в вашем шаблоне psd не svg, а тупо png картинка, завернутая в svg -"data:image/png;base64" - или векторизовать или просите чтобы дизайнер не халтурил и дал вам нормальный вектор(если вы получили шаблон от дизайнера)

Ну а почему нельзя - удочку - кроме вертикальной части лески и крючка - transform: rotate(здесь угол на который вертеть в deg), лучше всего вокруг катушки, а вертикальную часть синхронно transform: translate.
Правда, тут вижу одну маленькую проблему - было бы изящнее, чтобы нижняя часть лески оставалась строго вертикальной, т.е. двигать ее только по Y - transform: translate(Y), но тогда удочку надо или немного удлиннять, или не крутить, а тоже двигать по оси Y .
Или же нижнюю часть лески перемещать по обеим осям.
В любом случае, если эти перемещения маленькие, только чтобы обозначить, то можно любой из вариантов использовать, лучше всего поиграться и посмотреть, как будет лучше выглядить.
Кстати, я не вижу у этого рыбака правую руку, он инвалид что ли?
Я просто чтобы понять, если рука не должна быть видна, то можно смело поднимать все по Y, если же рука видна, то поднимать все с рукой или все таки крутить.

не совсем понятно, а почему нельзя просто вырезать в нижнем по верхнему, предварительно этот верхний продублировав? Тогда они будут просто 1в 1 соприкасаться. Или другая задача стоит, анимация там какая то, или еще что?

Но проблема в том, что svg картинка появляется сначала полностью готовой, а потом уже через секунду начинает проигрываться анимация

ну так вы же сами выставили на все пути изначально
stroke-dashoffset="0"
Т.е. вы показываете сначала все это дело без промежутков, и через 1 сек начинаете анимировать из 540 до 0 к примеру.
Установите изначально свои максимальные значения stroke-dashoffset и все заработает.
Единственное, в таком виде как сейчас, анимация завершится возвращением к тем же значениям. Для того чтобы оставить после анимации линии прорисованными, добавьте/измените значение fill (в animate) с remove, на freeze, к примеру

dur="5s"
begin="1s"
fill="freeze"

это не ощущение, у вас таки png внутри -

<image id="image0" width="1732" height="308" xlink:href="data:image/png;base64

transform-origin: 50% 50%;
transform-box:fill-box;

Можно без js, только надо анимировать элемент svg - в вашем случае это координаты path, a не top etc.
Как вариант - ваши 2 стрелки в один связанный контур, его координаты стандарт и по hover, анимировать ваш класс fil1 как следующий элемент по + предыдущего селектора fil0.
Единственное еще, измените свои стрелки, такое чувство, что у вас обрисованные тяп ляп из растра - у font awesome можно взять четкие. Иначе анимация возможно будет скачком, а не плавно.
https://codepen.io/lagudal/pen/oPpOQm

чтобы класс присваивать графической программой - не встречал.
Иллюстратор дает малопригодные имена id - например, что то вроде #SVGID_76_ .
Я делал таким образом.
Элементы, которые предполагалось будут иметь общее поведение, объединял в группы - в иллюстраторе еще. Чаще всего нельзя все элементы с одним поведением включить в одну группу, поэтому таких групп создаю столько, сколько это необходимо по-минимуму.
Тут же в ручную в иллюстраторе добавляю уникальные но однокоренные имена для этих групп - эти имена будут id этих групп в svg.
После сохранения svg открываю его например в notepad ++, простой регуляркой по Поиск-замена всем нужным группам с заданными id добавляю класс, который и будет основным для поведения выбранных групп.
Таким образом делаю столько классов, сколько нужно, этим классам уже задаю стили, анимацию и тд. Может не так чтобы очень быстро, но все равно легче, чем вручную по каждому элементу или даже группе проходить...