0 Replies Latest reply on Apr 29, 2016 7:57 AM by g.bollmann

    Blurry SVG? I know why.

    g.bollmann Level 1

      In short, with responsive mode EA applies a -webkit-transform on the whole composition. A transform (scale) applied to an SVG makes for blur. Further described here and appearing briefly acknowledged by Elaine in EA forums.  Don't believe? Toggle responsive then open in Firefox (non webkit) and Chrome/Safari (webkit).

       

      http://www.kirtrainford.co.uk/blurry-svg-edges-scaling/

      When you scale an SVG element using transforms, if you scale from outside the svg tag, the edges of shapes can appear blurry. Take the following for example:

       

      “Most browsers will attempt to scale the result of the SVGinstead of scaling the actual vector, causing the graphic to appear aliased. “

       

       

      So, if you know how to prevent EA from instructing the browser to do a transform on load... Please Please Tell Me.

      Elaine's idea did not work for me at all.

      ---

      I have boiled down many reasons why SVGs may be blurry, and collected them here: SVG – how to prep for best results, least blur – Adobe Edge Animate for the logically advanced designer .

       

      At the link you will find other research and suggestions for creating your SVGs for EA. This blog is really a research catch-all.