Сложно ли изменить SVG?

Question

[Влад]

Здравствуйте!

Суть вопроса: Есть svg файл анимированный, который плавно рисует слово. Необходимо его доработать и сделать так, как будто это делает карандаш.

Скажите пожалуйста как и какими инструментами это сделать лучше? Спасибо!

Answer 1

[Максим Тимофеев]

анимация может быть не в самом svg, а в js и в css так что однозначно сказать сложно не видя код страницы.
Но если говорить о ПО для работы с самим svg, то лучшее вот:
inkscape.org
Но оно не поможет если анимация в js. Если svg и js для Вас вещи новые - возможно проще обратиться на фриланс.

Comments

[Влад]

Спасибо за ответ!
Анимация прям в svg, пробовал его открыть отдельно.
Вот так он выглядит:

<svg version="1.1" id="Tanya-Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 566.9 566.9" style="enable-background:new 0 0 566.9 566.9;" xml:space="preserve">
<style type="text/css">
  .st0{fill:none;}
  .st1{fill:none;stroke:#D47431;stroke-width:6.9784;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10; }
  .st2{fill:none;stroke:#D47431;stroke-width:6.978;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10; }
  #path-1 { stroke-dashoffset: 100; stroke-dasharray: 100;  animation: dash 0.5s linear 0s forwards;  }
  #path-6 { stroke-dashoffset: 58; stroke-dasharray: 58; animation: dash 0.5s linear 0.5s forwards;  }
  #path-2 { stroke-dashoffset: 173; stroke-dasharray: 173; animation: dash 0.5s linear 1s forwards;  }
  #path-3 { stroke-dashoffset: 185; stroke-dasharray: 185; animation: dash 0.5s linear 1.5s forwards;  }
  #path-4 { stroke-dashoffset: 213; stroke-dasharray: 213; animation: dash 0.5s linear 2s forwards;  }
  #path-5 { stroke-dashoffset: 172; stroke-dasharray: 172; animation: dash 0.5s linear 2.5s forwards;  }

  @keyframes dash {
      to {
        stroke-dashoffset: 0;
        /*stroke-dasharray: 0;*/
      }
  }
</style>
  <path id="motionPath" class="st0" d="M132.9,100.8c0,0,4.7,12.3,5.5,24c0,0,9.2,62.8,17.2,70.5s12-68,12-68s-23.2,2.5-50,24.7
	s56-14.3,56-14.3s2.2-10.2,9.5-11.1c7.3-0.8,24.2-1.5,28.7,42.7c0,0-18-29.2-28.5-4.6c0,0-2.1,3.2-1.3,8.3c0.8,5.1,3.6,9.8,9.2,8.5
	c5.6-1.3,13.8-13.7,13.8-13.7l14.7-52.5l15,58.2c0,0,4.9-52.1,7.2-59.7s3.7-9,6.5-3.2c2.8,5.8,11.2,28,14.3,41.5s6.8,11.8,6.8,11.8
	l2.7-66.8c0,0,4.8,41.3,10.5,46.8s22.5-45.8,22.5-45.8s12.3,35.5,23,109.8l-3.7-120.2c0,0,7.7-19.3,26.3-3.5c0,0,10.2,8.5,10.7,39
	c0,0-15-21.4-21-14.8c0,0-12.5,12-6.7,23.3c0,0,3.6,7.1,12.3,2.9s9.7-14.7,9.7-14.7"/>
  <g>
    <path id="path-1" class="st1" d="M174.9,242.7l2.5,6.2c0,0,2.6,8.2,3.4,16.1c0.3,2.3,10,62.9,16.3,72.2"/>
    <path id="path-6" class="st2" d="M211.5,267.5c0,0-16.4,4.5-28.4,11c-8.1,4.4-22.6,14.7-22.6,14.7"/>
    <path id="path-2" class="st1" d="M217.5,277.8c0,0,0.3-5.6,4.5-8.2c4.3-2.6,16.1-7.9,26.3,9.2c10.3,17.1,8.2,38.1,8.2,38.1
		s-11.9-28.8-24.9-18.3c-12.4,10.1-5.7,29,3.4,25.8c0,0,10.5-1.4,15.4-14.1"/>
    <path id="path-3" class="st1" d="M264.3,256.4c0,0,4.5,16.6,6.1,22.1s8.2,32.8,8.2,32.8s2.6-82.8,14.6-59.1c0,0,4.8,9.8,6.2,13.9
		c3.2,9.9,9.2,29.7,9.2,29.7s2.9,7.5,4.7,8.6"/>
    <path id="path-4" class="st1" d="M316.8,238.7c0,0,2.1,17.5,3.5,22.9s3.9,28.1,8.5,21.5c4.6-6.7,14.3-28.1,16.2-34.1
		c2-6,4-11.6,4-11.6s4.5,9.5,12,45.2c4.1,19.8,12.4,64.9,12.4,64.9"/>
    <path id="path-5" class="st1" d="M367.5,229.8c0,0,3.8-9.4,10.8-10.2c8.6-0.9,18.5,2,24.1,20.7c5.1,16.7,3.8,28.2,3.8,28.2
		s-13.7-25.8-23.1-18.4c0,0-17.2,19.8-1.1,28.4c0,0,11.5,2.2,19.2-15.4"/>
  </g>

  <animateMotion  accumulate="none" additive="replace" begin="1s" calcMode="paced" dur="0.5s" fill="freeze" repeatCount="1" restart="always" xlink:href="#flomaster">
    <mpath  xlink:href="#path-6"></mpath>
  </animateMotion>
  <animateMotion  accumulate="none" additive="replace" begin="1.5s" calcMode="paced" dur="0.5s" fill="freeze" repeatCount="1" restart="always" xlink:href="#flomaster">
    <mpath  xlink:href="#path-2"></mpath>
  </animateMotion>
  <animateMotion  accumulate="none" additive="replace" begin="2s" calcMode="paced" dur="0.5s" fill="freeze" repeatCount="1" restart="always" xlink:href="#flomaster">
    <mpath  xlink:href="#path-3"></mpath>
  </animateMotion>
  <animateMotion  accumulate="none" additive="replace" begin="2.5s" calcMode="paced" dur="0.5s" fill="freeze" repeatCount="1" restart="always" xlink:href="#flomaster">
    <mpath  xlink:href="#path-4"></mpath>
  </animateMotion>
  <animateMotion  accumulate="none" additive="replace" begin="3s" calcMode="paced" dur="0.5s" fill="freeze" repeatCount="1" restart="always" xlink:href="#flomaster">
    <mpath  xlink:href="#path-5"></mpath>
  </animateMotion>
</svg>

[Максим Тимофеев]

Влад, Смотря как карандаш должен себя вести. Если это просто 2d привязанный своим концом к точке анимированному path, то это относительно не сложно. Если надо съэмитировать его склонение, как будто он в руке, тут уже сложнее. В любом случае надо знать svg.

[Влад]

Максим Тимофеев, Мне 1 вариант подходит, буду пытаться его тогда сделать. Спасибо!