5 Replies Latest reply on May 20, 2012 8:02 AM by Mylenium

    Any way of outputting SVG from AE?

    Andy Bay Level 1



      I'm experimenting on some interactive web applications at the moment and one of them needs motion tracked hotspots.


      I tracked the motion with mocha and pasted it into AE as an animated mask.


      Next step would be to export each frame of this mask vector as a SVG file in order to easily attach eventhandlers to it. I know Illustrator can export SVG. But obviously taking 2000 frames manually to Illustrator for SVG exporting is not really doable. Is there any way of getting my mask out of AE frame by frame in SVG format, that doesn't require manually handling each frame?


      I'm greatful of any tips!

        • 1. Re: Any way of outputting SVG from AE?
          Mylenium Most Valuable Participant

          I don't think anyone would do it this way, honestly. Unless the mask is extremely complex, you would embed the coordinates into the SVG or an external XML file, not discrete shapes. You could then parse the data by a JavaScript contained in the SVG or on a more global level by a page JavaScript that interacts with the file. in nay case, it's probably gonna involve a lot more on the web side than actually prepping the graphics so perhaps ask with the web people ho this could possibly be done with jQuery or Adobe Edge.



          • 2. Re: Any way of outputting SVG from AE?
            Andy Bay Level 1

            Thanks for your input Mylenium!


            The difficulty in using only jQuery for this is that I need the image map shapes to be quite complex with animated perspective distortions. That's why it would be essential to be able to get the motion tracked shape data from Mocha. JQuery is not capable of motion tracking at the moment.


            If there is no simple way to do this then perhaps the best approach would be something like this:


            1. Motion track the shape in Mocha

            2. Paste shape data into AE

            3. Try to develop a script for automatically copying mask shape data from a frame, pasting it to Illustrator, save file as SVG, then go back to AE, go to next frame and repeat process. Not a very easy scripting task I'm afraid, although maybe Autohotkey could handle it.

            • 3. Re: Any way of outputting SVG from AE?
              Mylenium Most Valuable Participant

              Not sure if I follow you here. Even if it's a corner pin, that makes it at most 4x2 coordinate pairs per frame, which by all means is pretty trivial in JavaScript. Transforming the image is another matter, but I hope you are aware that SVG supports trapezoid warp deformations natively along with skew, rotation and offset transforms (for vector data at least). The only downside really would be that you have to hack code. Also, if you really must have an elegant way of doing this, perhaps you could use Flash Pro CS6. Something like export XFL from AE to Flash, then export a canvas/HTML5 file from Flash. Even if you don't use that output directly, you could still use it to construct your SVG/ HTML page. I'd definitely investigate that route a bit, as the one big downside to having 2000 discrete shapes will be performnce. The file will take quite a while to load and interactivity may be impaired when trying to load your hotspots. Could well be that your users get such a delay that they click on an invalid area that belongs to a previous frame. and perhaps you are even overthinking that alltogether. A simple invisible rectangle tracked to the motion might just be good enough. Same for a PNG image with pixel based detection.... I could think of so many ways to try and do this, but I wouldn't necessarily wanan do it as a vector based SVG...



              1 person found this helpful
              • 4. Re: Any way of outputting SVG from AE?
                Andy Bay Level 1



                Thanks again!


                Your suggestion of taking it from AE to flash and then use the HTML5 export capabilites of Flash CS6 might indeed be worth investigating.


                Let me clarify a little bit why this is more difficult that just a corner pin:


                I need the image map to follow an item from real footage. For example, imagine a human being walking. I need to trace the motion of the human body for every frame and it can't be done with a simple corner pin. I need the Mocha shape functionality for it (I'm pasting the tracked shapes from mocha as AE masks). Actually... this now gives me and idea as we speak.. maybe I could save the shape data from Mocha as a text file and dig into that with javascript..


                Ps. I understand that the performance might slow down because of handling data on every frame, but in my environment this is not a problem. This application will run only locally and I have already used heavier processing succesfully on a frame by frame basis. I'm just saying that you are right about this being intensive, but just that in my case it doesn't matter.

                • 5. Re: Any way of outputting SVG from AE?
                  Mylenium Most Valuable Participant

                  I see. If you need to follow some contours, then al lthe simple stuff won't work of course. Too bad Flash has been declared evil. This would be so easy to do just with image sequences...