7 Replies Latest reply on Jul 28, 2015 6:37 PM by Muzamiro

    Pasted Ai graphics (svg) have jagged edges

    boywundr

      I am working on an animation in Edge Animate and have been copy and pasting all the assets from Illustrator. I noticed that the result, whether it is in the Edge interface or the published HTML file, has jagged edges. I assumed that they would be smooth since Edge was creating vector files, but that is not the case.

       

      Here's what I'm seeing:

       

      Screen Shot 2014-07-02 at 12.05.15 PM.png

      Thank you in advance for any help you can provide!

        • 1. Re: Pasted Ai graphics (svg) have jagged edges
          SujaiS Adobe Employee

          Hi boywundr,

           

          In the latest Edge Animate CC 2014 where we have the new feature to direclty copy and paste vector artwork from Illustrator to Animate stage. I'm hoping that you are using this feature.

          Would it be possible for you to send me the Ai file that you re using here to copy or import vector artwork and facing this pixellation?

           

          -Sujai

          • 2. Re: Pasted Ai graphics (svg) have jagged edges
            boywundr Level 1

            Hi Sujai,

             

            Sure, I can send it to you, but I'm not sure how. I am copying in Ai and pasting directly in to An, which has been great besides this issue!

             

            If you can let me know how to contact you, I will email a zip file right away. Thank you so much for helping!

            • 3. Re: Pasted Ai graphics (svg) have jagged edges
              SujaiS Adobe Employee

              We were able to solve the above issue that Micah was facing with SVG. Posting this here for the benefit of others seeing the same issue.

               

              Description:

              In Edge Animate CC there existed a SVG pixilation issue which is observed on browsers when any SVG content is animated with “scale up” transform. To solve this problem in Edge Animate CC 2014 we are scaling up the container div by a factor of 10 (which is by default) and then using image filtering to reduce the resolution based on the inverse scale. Property panel will show this inverse transform scale since that is the transform scale applied to the svg element.

               

              This scale factor can be changed from:

              1.      Close Animate

              2.      Open the preference folder:

              a.      Windows: C:\Users\{username}\AppData\Roaming\Adobe\Edge Animate\4.0.0\

              b.      Mac: /Users/{username}/Library/Prefrences/Adobe/EdgeAnimate/4.0.0/

              3.      Open the AppPrefs.xml file in a text editor.

              4.      Search for the Current line in AppPrefs.xml:

              <key>SvgAntiScaleFactor</key>

              <float>10</float>

               

              Update this to:

              <key>SvgAntiScaleFactor</key>

              <float>1</float>

              5.      Launch Animate

              6.      Now try to copy the assets from Ai to Edge and check if you still see the jagged edges. Note: reopening the old composition with the new preference settings will not help. You will need to re-copy the assets with the new preference setting for this to work.

               

               

              Thanks,

              Sujai

              • 4. Re: Pasted Ai graphics (svg) have jagged edges
                christinas65252292

                Hi Sujai,

                I too am having the same problem, but it is now June 2015. Do I still need to do the above? or should sit have been fixed by now in the most recent update(s). I am using the most recent 2014.1.1 btw and still have this problem.

                • 6. Re: Pasted Ai graphics (svg) have jagged edges
                  anthony_dx

                  Hey sooooo Sujai doesn't know what he is talking about. When you import your .svg assets for some reason it defaults to 10% in the Transform box.

                   

                  Screen Shot 2015-07-28 at 2.35.48 PM.png You need to change it to 100%. Then reduce the the width and height to the original dimensions. This should get rid of your jagged edges.

                  • 7. Re: Pasted Ai graphics (svg) have jagged edges
                    Muzamiro

                    Yes it works. Been having same problem as well. Thanks!