Adobe Community: Message List - SVG Images Blurry

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 11 Sep 2014 07:24:38 GMT

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

Re: Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 12:28:56 GMT

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.

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 12:20:03 GMT

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>

Update this to

<key>SvgAntiScaleFactor</key>

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

-Sujai

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 12:14:02 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 12:11:48 GMT

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

Re: Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 12:00:17 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 11:57:52 GMT

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.

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 11:49:36 GMT

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

-Sujai

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 03 Jul 2014 11:38:34 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Fri, 27 Jun 2014 19:19:47 GMT

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.

Re: SVG Images Blurry

forums_noreply@adobe.com — Wed, 18 Jun 2014 15:07:50 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Mon, 09 Jun 2014 18:24:44 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Fri, 06 Jun 2014 20:06:35 GMT

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.

Re: SVG Images Blurry

forums_noreply@adobe.com — Fri, 06 Jun 2014 06:04:20 GMT

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?

Re: SVG Images Blurry

forums_noreply@adobe.com — Fri, 06 Jun 2014 05:50:09 GMT

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.

Re: SVG Images Blurry

forums_noreply@adobe.com — Fri, 06 Jun 2014 04:40:26 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Thu, 05 Jun 2014 13:52:57 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Mon, 22 Jul 2013 12:16:28 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Fri, 19 Jul 2013 19:59:32 GMT

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

Re: SVG Images Blurry

forums_noreply@adobe.com — Wed, 17 Jul 2013 12:30:14 GMT

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!

Re: SVG Images Blurry

forums_noreply@adobe.com — Wed, 17 Jul 2013 09:56:55 GMT

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.

SVG Images Blurry

forums_noreply@adobe.com — Tue, 16 Jul 2013 19:44:11 GMT

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!