Эффект растущей кривой polyline объекта?

Для любого объекта, имеющего атрибут stroke-dashoffset, можно получить эффект рисования линиями. То есть для всех фигур svg: line, circle, ellipse, polygon, polyline, path. Необходимо только точно вычислить длину этой линии. В вашем случае длина линии -136px

#myLine{ 
fill: none; 
  stroke: #000; 
  stroke-width: 4; 
  stroke-miterlimit: 10; 
stroke-dasharray:136; 
  stroke-dashoffset:136; 
  animation:dash 5s ease-in forwards; 
} 
@keyframes dash { 
  0% {  
   stroke-dashoffset:136; 
  } 
  100% { 
    stroke-dashoffset:0; 
  } 
 } 

<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 60 200 200"> 
  <symbol id="myLine"> 
 
    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" /> 
  </symbol> 
 
  <use xlink:href="#myLine" class="st1" /> 
</svg>

Добавлю ещё два варианта:

#1. Вариант с заготовкой пути

Это серый путь, по которому пойдет анимация рисования линии.
Используется та же линия, что и в первом примере, но она неподвижна. (id="shadow")
Анимируется ее дубликат -id="#myLine".

#myLine{ 
fill: none; 
  stroke: #000; 
  stroke-width: 4; 
  stroke-miterlimit: 10; 
stroke-dasharray:136; 
  stroke-dashoffset:136; 
  animation:dash 4s ease-in 1s forwards; 
} 
#shadow{ 
   fill: none; 
  stroke: #EAEAEA; 
  stroke-width: 4; 
  stroke-miterlimit: 10; 
    
} 
@keyframes dash { 
  0% {  
   stroke-dashoffset:136; 
  } 
  100% { 
    stroke-dashoffset:0; 
  } 
 } 

<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 65 200 200"> 
  <symbol id="myLine"> 
 
    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" /> 
  </symbol>  
   <symbol id="shadow"> 
 
    <polyline   points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  /> 
  </symbol> 
  <use xlink:href="#shadow"  /> 
  <use xlink:href="#myLine"  /> 
   
</svg>

#2. Вариант с анимацей тени

Для получения тени клонируется первая линия и сдвигается вправо и вниз на несколько пикселей

 <symbol id="shadow">
    <polyline  transform="translate(1 0.5)" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  />
  </symbol>         

анимация линий выполняется совместно и реализуется точно также, как в самом верхнем, основном примере для одной линии:

#myLine{ 
fill: none; 
  stroke: #000; 
  stroke-width: 4; 
  stroke-miterlimit: 10; 
stroke-dasharray:136; 
  stroke-dashoffset:136; 
  animation:dash 5s ease-in forwards; 
} 
#shadow{ 
   fill: none; 
  stroke: grey; 
  stroke-width: 4; 
  stroke-miterlimit: 10; 
stroke-dasharray:136; 
  stroke-dashoffset:136; 
  animation:dash 5s ease-in forwards; 
  opacity:0.5; 
   
} 
@keyframes dash { 
  0% {  
   stroke-dashoffset:136; 
  } 
  100% { 
    stroke-dashoffset:0; 
  } 
 } 

<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 65 200 200"> 
 
   <symbol id="shadow"> 
    <polyline  transform="translate(1 0.5)" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  /> 
  </symbol> 
   
  <symbol id="myLine"> 
    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" /> 
  </symbol>  
   
  <use xlink:href="#shadow"  /> 
  <use xlink:href="#myLine"  /> 
   
</svg>

Приведение анимаций CSS и SVG

Этот ответ на вопрос, создаю специально для тех, кто владеет приемами анимации CSS, но пока не решается освоить анимацию SVG для расширения своих возможностей.
Всё познается в сравнении.
Взят пример анимации CSS из первого ответа и я преобразую его в анимацию SMIL SVG

В основе эффекта рисования линии в обоих видах анимации (css и svg) лежит один и тот же прием - использование атрибута stroke-dasharray - отступ от начала линии.
Когда максимальный отступ равен длине линии, то она полностью скрыта.
Уменьшая stroke-dasharray от максимального значения, в нашем случае - 136px до нуля, мы тем самым реализуем эффект рисования, появления линии.

SVG очень гибко и мощно работает со стилями,- делая анимацию SMIL, вы можете, как привыкли, внести stroke-dasharray в таблицу стилей или разместить стили прямо непосредственно в команде SVG.

   <polyline id="myLine"  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" 
 style="fill:none; stroke-width:4; stroke: #000; stroke-dasharray:136; stroke-dashoffset:136;"/>         

Остается понять, как преобразовать анимацию CSS, в smil

Для CSS команда уменьшения stroke-dasharray от 136px до нуля выглядит следующим образом:

#myLine{
 stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
  } 
  @keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 }        

Для SVG smil аналогичная команда записывается так:

 <animate attributeName="stroke-dashoffset" from="136" to="0" dur="5s" fill="freeze" />

вот, когда эти два способа (css, svg) рядом, то в принципе и так всё понятно. Добавлю лишь, что параметрforwards css делает тоже самое, что fill="freeze" svg - изображение по окончанию анимации замораживается на экране.

Ниже полный пример анимации smil svg

<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 60 200 200"> 
    
    <polyline id="shadow"  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" style="fill:none; stroke-width:4; stroke: #EAEAEA; opacity:0.5;"  /> 
      
    <polyline id="myLine"  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" style="fill:none; stroke-width:4; stroke: #000; stroke-dasharray:136; stroke-dashoffset:136;"  > 
	<animate attributeName="stroke-dashoffset" from="136" to="0" dur="5s" fill="freeze" /> 
    </polyline> 
   
</svg>