1 2 Previous Next 51 Replies Latest reply on Oct 3, 2016 4:43 PM by AdamForcucci

    SVG Images Blurry

    pcsystematic

      I am working on a project in Edge Animate using SVG images responsively. However, whenever I increase them in my browser (Chrome), the images get very blurry and almost look like bitmaps. I saved the SVG images from Illustrator in SVG 1.1 as only one layer. I've researched everywhere and cannot find any answers on this issue. Also, I made sure to change the properties on my images to "img" rather than "div". I am using symbols on the timeline for animating these symbols. Hopefully, someone has some insight on how I can get the SVG images to enlarge properly and at higher quality. I also used this video from Adobe to add the responsive code onto the Stage: http://sarahjustine.com/2013/04/08/create-scale-to-fit-projects-with-adobe-edge-animate/

       

      I would appreciate any assistance asap.

       

      Thanks!

        • 1. Re: SVG Images Blurry
          escargo Level 1

          Perhaps this has something to do with cross-browser compatibility noted here?

           

          http://helpx.adobe.com/edge-animate/kb/best-practices-graphics-edge-animate.html

           

          It sounds like SVG should be used very sparingly according to this and only in certain instances.

          1 person found this helpful
          • 2. Re: SVG Images Blurry
            pcsystematic Level 1

            Thanks, Escargo, but I had already looked at that article and it didn't really help. The browser I use is Chrome, and we use it for most all our projects here, and SVGs work great in that browser normally. I can't understand why they don't work right in Edge Animate when increasing the size for responsive design. They get real blurry. If you or anyone has any ideas on who I can contact about this, that would be great, as it is very frustrating.

             

            Thanks!

            • 3. Re: SVG Images Blurry
              elainecc Adobe Employee

              Hi, pcsystematic-

               

              Are you resizing or scaling?  Can you try the graphic on its own in the browser using CSS?  We've found that for certain browsers, scale doesn't work the same as resizing the asset.

               

              -Elaine

              • 4. Re: SVG Images Blurry
                pcsystematic Level 1

                Hi Elaine,

                 

                Yes, I did try creating an html page with the image resizing using CSS, and it scaled perfectly. It's just when I put it into Animate that it gets blurry when it scales. Not sure if it is the code I used for responsive (see post above for link)? If you have any thoughts, please let me know.

                 

                Thanks,

                Patty

                • 5. Re: SVG Images Blurry
                  ckpeters Level 1

                  I've noticed the same problem with Edge Animate. Although you put an .svg file in your Edge Animate project it seems to render it out as a raster image for some reason. So, when you re-size in the browser it shows up blurry. Given I am using Edge Animate because of its responsive capabilities this is a major issue. Preferably .svg files would remain .svg when called up by the animation.

                   

                  Why does it render the images before it displays them in the animation?

                   

                  Give Edge Animate is an HTML5 based software it seems we should be able to utilize vector graphics a bit better. SVG seems like the way to go given it allows for vector inside the browser.

                   

                   

                  - Chris

                  • 6. Re: SVG Images Blurry
                    Sudeshnasarkar27 Adobe Employee

                    Hi ,

                     

                    Can you share the composition or the svg content where the issue is happening? Is the pixilation observed only when you animate the svg content with scale up transformation or is it happening in any other scenario as well. We would like to try it out at our end and investigate the issue.

                     

                    Thanks and Regards,

                    Sudeshna Sarkar

                    • 7. Re: SVG Images Blurry
                      MrEdCross Level 1

                      Same thing happened to me then tried it with a png instead but I got the same issue in the browser. The svg started looking blurry in Edge Animate and continued in the browser. The png looked great in the program but started to get real blurry in the browser after animating. I had to refresh the browser to make it not blurry but as soon as it animated it bacame blurry.

                      • 8. Re: SVG Images Blurry
                        MrEdCross Level 1

                        Changing my png to img instead of div fixed it. But not the svg. Maybe the svg needs to be wrapped in a div before animating, thus pixelating it somehow?

                        1 person found this helpful
                        • 9. Re: SVG Images Blurry
                          sarahchesnutt

                          I have the same problem. This is what my .ai saved as .svg looks like when imported and placed on the stage. It is a small Edge file, 29 x 29 pixels, with the .svg resized down quite a bit.

                           

                          blurry_ring.jpg

                          • 10. Re: SVG Images Blurry
                            mr hooga Level 1

                            Yep, same problem here. SVG scaling is horrible, I second the observation that it looks like a rastered image (rastered at the comp size).

                            Another Problem is the text scaling. I have to use fonts that aren't web fonts, so scaling them is a nightmare.

                            If I create text in Illustrator, create outlines and export to svg, it sure looks alright in Edge. But if I export to browser, there seems to be a vector compression on it (like it reduces the points of the bezier curve of the text).

                             

                             

                            EDIT: ok, this happens in different updated browsers on mac

                             

                            safari: everything is blurred / compressed

                            firefox: it's all good

                            chrome: only scale animated icons are blurred / compressed. all the other icons, that have a blur /opacity animation on them, remain crisp.

                             

                            weirdness

                            1 person found this helpful
                            • 11. Re: SVG Images Blurry
                              Sudeshnasarkar27 Adobe Employee

                              Hi All ,

                               

                              We have addressed the SVG Pixilation issue which is observed on browsers when any SVG content is animated with "scale up" transform within Animate in the latest Edge Animate CC 2014 build available now on Creative Cloud.

                               

                              To solve the problem 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. However, the Property Panel will show this inverse transform scale since that is the transform scale applied to the SVG element.


                              Do try out this feature and let us know your feedback on the same.

                               

                              Thanks and Regards,

                              Sudeshna Sarkar

                              1 person found this helpful
                              • 12. Re: SVG Images Blurry
                                ckpeters Level 1

                                Hello,

                                 

                                I don't see that this issue is fixed. I am using the latest version (2014) and svg files in IE 10 look horribly. I don't understand why this is still an issue as it makes the software less valuable. Using SVG files is much better as they scale and if you're placing text in them the text can be changed without needing to go back into Edge Animate. 

                                 

                                adobe_edge_ss.PNG

                                • 13. Re: SVG Images Blurry
                                  Guido_BOOM Level 1

                                  Exact same problem here in Edge Animate CC (2014). Still blurry

                                  • 14. Re: SVG Images Blurry
                                    SujaiS Adobe Employee

                                    Hi guido-boom & ckpeters, Can you share the SVG or the Ai file with which you see the problem.

                                     

                                    -Sujai

                                    • 15. Re: SVG Images Blurry
                                      ckpeters Level 1

                                      Try saving the .svg file without the artboard. I haven't done extensive testing, but it seems to work.

                                       

                                      I'd like to understand why Edge Animate has to raster the .svg files which even in Chrome makes them look less sharp. More and more .svg files seem to be used because of high resolution screens. It would be nice if Adobe was working on a tool that would allow us to animate .svg files. I know there must be a way to have triggers in Edge that callout to items not in the library (such as an .svg in a folder, but not imported into Edge) but I can't figure out how to do it. Unfortunately I don't know much about programming.

                                      • 16. Re: Re: SVG Images Blurry
                                        Guido_BOOM Level 1

                                        Dropbox - file.svg

                                         

                                        I used a quick workaround though. I used a PNG file in the exact size i needed it in Edge. I placed it in on my canvas at 100%, then went back in the timeline to downscale it.

                                        (I hope my English makes sense).

                                         

                                        Greetings, Guido

                                        • 17. Re: SVG Images Blurry
                                          SujaiS Adobe Employee

                                          Hi Guido, I imported the SVG and am not able to see the blurry rendering on Firefox and IE11. Any specific browser that you are seeing the issue?

                                           

                                          -Sujai

                                          • 18. Re: SVG Images Blurry
                                            Guido_BOOM Level 1

                                            Yeah i should have mentioned that. I was using Safari, Firefox did work.

                                            • 19. Re: SVG Images Blurry
                                              SujaiS Adobe Employee

                                              Hi Guido,

                                               

                                              Can you please change the SvgAntiScaleFactor to 1(default value is 10) in AppPrefs.xml file at /Usres/{username}/Library/Prefrences/Adobe/EdgeAnimate/4.0.0 and then try testing the scenario.

                                               

                                              Search for the Current line in AppPrefs.xml:

                                              <key>SvgAntiScaleFactor</key>

                                              <float>10</float>

                                               

                                               

                                              Update this to

                                              <key>SvgAntiScaleFactor</key>

                                              <float>1</float>

                                               

                                              This is a session level property. Can you let me know if with this value the rendering is fine in Safari?

                                               

                                              -Sujai

                                              1 person found this helpful
                                              • 20. Re: Re: SVG Images Blurry
                                                ckpeters Level 1

                                                Even though its much better than the awful blurry image above you can see below that passing an .svg through edge causes some degradation. The image on the left is raw .svg in IE11 the one on the left is the .svg using Edge. This is much less of an issue, but still something to consider. I followed the instructions above changing the anti scale factor to 1.

                                                no_edge.PNGwith_edge.PNG

                                                • 21. Re: SVG Images Blurry
                                                  Henry Code

                                                  OK tested it on  Safari 7.0.6 , Firefox 32.0 , Chrome 37.0.2062.120,

                                                  Macbook Pro Mavericks OSX 10.9.4...

                                                   

                                                  The project has 6-7 SVG image file

                                                  Stage is in Responsive Scaling- both

                                                  When I use just the all images in static mode (no animation) they look perfect on all three browsers.

                                                   

                                                  When I add animation to just one element in the project then some SVG turn blurry in Safari 7.0.6, in Chrome however they look better but bit more jagged as image above from CKpeters.

                                                  In Firefox they look fine no blurriness even with animation.

                                                   

                                                  maybe once has a animation the browser refreshes because i can get the svg to be clear if i hold it for a sec, then it blurs again (safari) ...

                                                  • 22. Re: SVG Images Blurry
                                                    ttjordan81 Level 1

                                                    Was this fixed in AE CC 2014.1?  I'm getting the same issue. Using .svg to transform from big to small, while moving to a position on the stage.

                                                     

                                                    On the program everything looks normal, but when I published to the browser (Chrome version.39.0.2171.65, IE 11) and after the animation stops, I get a pixelated image at the end of the animation. By adjusting the browser fixes the issue.
                                                    11-20-2014 6-07-59 PM.png

                                                    • 23. Re: SVG Images Blurry
                                                      Henry Code Level 1

                                                      No once you start animating it blurs out some elements if not all. It has to do with the fact that essentially it's all one big div.

                                                       

                                                       

                                                      • 24. Re: SVG Images Blurry
                                                        ttjordan81 Level 1

                                                        @Henry or anyone, I'm new to AE and don't follow. You gave a probable cause to why it's happening, is there a fix?

                                                         

                                                        I should also mention, my stage is on Responsive Scaling. When I turn OFF Responsive Scaling, the animation is working correctly, but when its turn on, I see the problem.

                                                         

                                                        No Responsive scale: http://tim-jordan.abtsites.com/edge/gyro_motion/gyro_motion.html

                                                        Responsive scale: http://tim-jordan.abtsites.com/edge/gyro_scale_issue/gyro_motion_scale.html

                                                        • 25. Re: SVG Images Blurry
                                                          Henry Code Level 1

                                                          Yeah responsive scaling is where it happens , no fix that I know of , relay it if yah find one.

                                                           

                                                           

                                                          • 26. Re: SVG Images Blurry
                                                            ttjordan81 Level 1

                                                            Thanks Henry, for confirming that. I just said f-it. I re-sized the stage and made all the objects bigger and turned off responsive.

                                                            • 27. Re: SVG Images Blurry
                                                              Henry Code Level 1

                                                              I'm working on a work around this week , if it works I'll email you.

                                                               

                                                               

                                                              • 28. Re: SVG Images Blurry
                                                                GeorgeGeorge

                                                                Hi Sujai,

                                                                 

                                                                Thanks for this answer. The default value should be 1 and not 10, because every time I import an SVG file, and place it on the canvas, the alert message appears which says that the SVG is higher than 1024 px.... and on the Transform panel the width and height is set to 10%.....

                                                                 

                                                                After editing the AppPrefs.xml as you have mentioned, this problem has been solved, and all SVGs are placed normally in 1:1 ratio.


                                                                So I think you might consider to set back the value to 1 in the next release of Edge Animate.

                                                                 

                                                                Best regards,

                                                                George

                                                                • 29. Re: SVG Images Blurry
                                                                  Henry Code Level 1

                                                                  this What i see when i spotlight AppPrefs.xml 

                                                                  Is there more than 1 in my system ...Or is there a specific path?

                                                                   

                                                                  This is what i see ,

                                                                  <?xml version='1.0'?>

                                                                  <prop.map version='4'>

                                                                  <prop.list>

                                                                  <prop.pair>

                                                                  <key>__eXoPrivateData__</key>

                                                                  <prop.list>

                                                                  <prop.pair>

                                                                  <key>sLastSetWorkspace</key>

                                                                  <ustring>Default Workspace</ustring>

                                                                  </prop.pair>

                                                                  </prop.list>

                                                                  </prop.pair>

                                                                  </prop.list>

                                                                  </prop.map>

                                                                  • 30. Re: SVG Images Blurry
                                                                    Orangette

                                                                    Is there any further update on this issue ? I have the same blurry SVG and Text in Safari when scaling.

                                                                    I can't find the AppPrefs.xml you are talking about on my Mac, I seem to only have a file associated with Adobe Media Encoder.

                                                                     

                                                                    Is there any way this bug can be fixed ? I'm a graphic design teacher working with Edge Animate in class, my students are pretty annoyed with this, and so are my colleagues and I. We switched from Tumult Hype to Edge Animate for HTML 5 animation and this problem never occurred with Hype.

                                                                     

                                                                    Thank you

                                                                    • 31. Re: SVG Images Blurry
                                                                      ttjordan81 Level 1

                                                                      @Orangette,

                                                                       

                                                                      I submitted a support ticket a while ago with ZERO response from Adobe support, and actually sent them my files and they confirmed the issue.

                                                                       

                                                                      Two options for a work around:

                                                                      • Turn off responsive scaling and you could use SVGs
                                                                      • Since using SVGs is buggy, I gave up and converted everything to PNGs images and set my canvas with a fixed height and width. You could still set the div wrapper to be responsive and swap out different window sizes.

                                                                      Hope this helps...

                                                                      1 person found this helpful
                                                                      • 32. Re: SVG Images Blurry
                                                                        Henry Code Level 1

                                                                        Point is to use SVG so the vector quality is scaled with a crisp effect.

                                                                        This also applies to text.

                                                                        This problem is when using responsive scaling.

                                                                        You can use responsive scaling with SVG and text can remain crisp if you don't animate.

                                                                        It is only after certain animation or transitions that you get the blurred/fuzzy effect.

                                                                        The problem doesn't exist, prior to transforming and animating.

                                                                        Of course the point is to animate in AEA.

                                                                        You can animate using jQuery , css or javascript and not lose vector quality in AEA CC 2014 .

                                                                        in AEA 2014.1 there might be some issues with responsive scaling from the start, text is blurry even before you animate.

                                                                         

                                                                        We've been following this issue for several versions of AEA

                                                                        • 33. Re: SVG Images Blurry
                                                                          g.bollmann Level 1

                                                                          Hi, I see this note in the Help PDF under suitable file types. It seems pretty significant...

                                                                           

                                                                          If you resize an SVG image when you're working in Animate, it's likely to start looking pixelated—that jagged stair-step appearance that graphics get when they're enlarged. When this modified image is viewed in a browser, the pixelation shows. It's interesting to note that if you don't change the image within Animate, it resizes gracefully in a browser window, when it gets larger and smaller.

                                                                           

                                                                          This was found in the AEA CC 2014 Help reference doc.

                                                                           

                                                                          I don't think that this is particularly comforting, but it's good to know.

                                                                           

                                                                          Hope it helps everyone...

                                                                          GB

                                                                           

                                                                          • 34. Re: SVG Images Blurry
                                                                            Henry Code Level 1

                                                                            thanks g.bollman for the input. I tested your post ,results don't differ.

                                                                             

                                                                            This fuzzy/blurry effect is only there when using the "Responsive Scaling" feature in the stage panel and animating something. If you animate css or jQuery it remains clear n crisp though you limit your effects/animating spectrum.

                                                                            This is in AE 2014.0.1 and all previous versions...

                                                                            .

                                                                            If using "Responsive Scaling"  in AE 2014.1 (note:not the same as above) the blurry/fuzziness starts even before you animate. Unless you add gpuAccelerate: false, to your "stage" symbol in your yourfilename_edge.js file.

                                                                             

                                                                            Since the first AE this issue was never fixed or is beyond the developers control.

                                                                            Later Gators,

                                                                            Henry CODE

                                                                            • 35. Re: SVG Images Blurry
                                                                              g.bollmann Level 1

                                                                              Many thanks for the actionable info!

                                                                               

                                                                              Unfortunately, I've noticed that Webfonts have the same trouble.

                                                                              BR/Grace

                                                                              • 36. Re: SVG Images Blurry
                                                                                g.bollmann Level 1

                                                                                Related ... my end use is actually PHONEGAP BUILD, not a web browser.

                                                                                Is the blurry SVG/text issue relevant outside the browser?

                                                                                Thanks!

                                                                                • 37. Re: SVG Images Blurry
                                                                                  Wheezer

                                                                                  Animating transform scale is causing the problem for me. Width and height leave the svg sharp, but now you don't have control of the origin.

                                                                                  • 38. Re: SVG Images Blurry
                                                                                    Devendra Kumar Adobe Employee

                                                                                    Hi Sam,

                                                                                     

                                                                                    can you please share any test file for testing this issue at our end?

                                                                                     

                                                                                    Regards,


                                                                                    Devendra

                                                                                    • 39. Re: SVG Images Blurry
                                                                                      g.bollmann Level 1

                                                                                      As my symbols become more nested, I have a big BIG blur problem with SVGs. It became a bigger problem suddenly ... and I think it corresponds with making a big symbol out of other symbols, which themselves have symbols. They load blurry - no animation yet. On my computer, it looks bad in Chrome. Using Edge Inspect on an iPad mini, everything looks correct. My end use is PhoneGap Build, so I hope this is indicative of success.

                                                                                       

                                                                                      Is there a limit or suggestion on how many levels of nested symbols you can use?

                                                                                       

                                                                                      BTW, using Edge Inspect, I can use transform up/down on this large symbol and it resizes correctly and without blur on the mini.

                                                                                      thx/g

                                                                                      1 person found this helpful
                                                                                      1 2 Previous Next