Skip to main content
mattb2461688
mattb2461688
Inspiring
August 14, 2017
Answered

Exporting animated vector based graphics for web use

  • August 14, 2017
  • 2 replies
  • 962 views

Is there such a thing? I have a 'flat' animations (such as icons and a short clip as well) that I'd rather not export as an animated GIF, PNG or JPG.

I've tried Bodymovin, and that sort of works, but the transparencies etc of the animation get lost and it looks like it has a hard time interpreting overlapping shapes.

I'd like to get sharp, crisp animations, while at the same time reducing file size.

Is there a way, or best practice for exporting animations for use online?

    This topic has been closed for replies.
    Correct answer Mylenium

    I see nothing in there that would warrant obsessing about vector output. You use al lthe trimmings that screw with performance like transparencies and (animated?) paths for the interpolated curves. Conversely, since there is effectively only a handful of colors, you could create a 4k GIF from it and it would still be a small file. Unless you plan on adding considerably more elements that would e.g. make the 256 color palette run out in a GIF or wanted an interactive SVG, I see no reason at all to change anything.

    Mylenium

    2 replies

    mattb2461688
    mattb2461688Author
    Inspiring
    August 14, 2017

    OK I've had limited experience with animate, but you can do basically what I'm looking to do with that?

    Mylenium
    Mylenium
    Legend
    August 14, 2017

    Well, not meaning to be rude, but exactly this...:

    I'd like to get sharp, crisp animations, while at the same time reducing file size.

    ...could turn out to be utter nonsense. You already bumped into the limitations of this process which not necessarily is the fault of the script you are using. There are simply limitations in AE itself. That said, you probably should learn to compromise and/ or start out in Animate CC to begin with. There is nothing wrong with animations being baked into pixel imagery just like there will always be limitations as to how far vector-based animation can go even if you manage to produce clean SVGs, HTML canvas code and CSS animation from Animate. You simply need to understand these things and not expect the programs to do magic. That being so, and returning to my original point, it could quite well be that your vector output is just a series of static states/ poses, which would result in SVG files much bigger than even a hunky animated GIF, so again, from where I sit you simply have wrong expectations because you you're not aware of the underlying technical stuff. In any case, without actually seeing your artwork, nobody can realyl tel lyou which route might be best.

    Mylenium

    mattb2461688
    mattb2461688Author
    Inspiring
    August 14, 2017

    this is the animation I'm trying to 'optimize'

    Mylenium
    MyleniumCorrect answer
    Legend
    August 15, 2017

    I see nothing in there that would warrant obsessing about vector output. You use al lthe trimmings that screw with performance like transparencies and (animated?) paths for the interpolated curves. Conversely, since there is effectively only a handful of colors, you could create a 4k GIF from it and it would still be a small file. Unless you plan on adding considerably more elements that would e.g. make the 256 color palette run out in a GIF or wanted an interactive SVG, I see no reason at all to change anything.

    Mylenium

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