Skip to main content
fab222222
fab222222
Participant
April 21, 2020
Question

SVG animation ready for the web

  • April 21, 2020
  • 2 replies
  • 2936 views

Hello everyone, 🙂

 

I'm looking into creating svg animation for a client, but I have no knowledge of javascript or so. I have the svg still illustrations created on Illustrator. While I was doing some research I came to this website https://www.svgator.com/ which is quite cool and useful.

 

I was wondering if I could have a final ready to web Adobe program just like Svgator that I could use with no coding knowledge. It will be mostly just very very soft position animations. No more than that.

 

Could someone help me please ?

 

Thank you in advance 🙂

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 21, 2020

    Even the best tools will only take you so far with animated SVG. When client asks for changes (and they always do), you need to understand the underlying code.  Otherwise, you're back to square one.  

     

    Unfortunately, I have not found the perfect tool for creating SVG animations.  I don't think one exists yet.  Illustrator's exported SVG code tends to be bloated and disorganized.  You can mitigate this to some extent by giving your layers good identifiable names and using the right export settings (see link below).  But some code cleanup is essential.

    https://blog.envylabs.com/svg-export-settings-for-custom-css-animations-adobe-illustrator-e106f77c6cb5

     

    The good news is SVG is just glorified XML code which is simple to learn and work with in any decent code editor (Dreamweaver, Brackets, etc...).  See link below.  Read the chapters. Work with code examples.  And of course, experiment on your own. You'll be surprised how much you learn from working with SVG code.

    https://www.w3schools.com/graphics/svg_intro.asp

     

    Nancy O'Shea— Product User & Community Expert
      fab222222
      fab222222Author
      Participant
      April 22, 2020

      Thank you for your replies.

      I don't have any Javascript knowledge and the delay I have won't allow me to learn it.

      I really need something programm that could export the svg animation. I mean just as for After Effects we add the position and rotation animation and then we export the file as simple as that. Does it not exist ?

       

      Than you again 🙂

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      April 22, 2020

      SVG is not JavaScript.

       

      Try Animate CC with this 3rd party extension.

      Disclaimer: I've never used it.

      https://github.com/TomByrne/Flash2Svg

       

      Or if time is limited, sub-contract this out to someone with more HTML, CSS and SVG experience.

       

      Good luck!

       

      Nancy O'Shea— Product User & Community Expert
      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      April 21, 2020

      google: svg animation and adobe animate cc.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices