SVG Images Blurry

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.

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

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

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

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.

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?

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.

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

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

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. 

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

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

-Sujai

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.

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

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

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

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

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.

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) ...