I am playing around with drawing an SVG sprite (imported in through [Embed]). Depending on the coordinates of the image, sometimes it appears more crisp than others.

The following image shows how at different locations is it rendered differently:

3 characters

(Image link - You may have to download and zoom in with an image editor to see it)

You'll notice that the middle sprite is more blurry than the ones on the sides. Does anyone know why this is? Any help would be appreciated.


2 Answers 2


That's your sub pixel accuracy. It's a feature, rather than a bug but it's annoying in the wrong context. What's happening is that somewhere in the pipeline the x coordinates of your sprite are being rasterized to the screen a little off the pixel boundaries. This causes the flash renderer to interpolate between one pixel and the next, resulting in the blur you see. This actually aids animation as objects can smoothly transition from one pixel to the next but you don't want it here.

You can try two things - either look at the source svg and ensure that every coordinate is integer (i.e. no fractional part) or if that doesn't work, try offsetting everything by half a texel - that'll be 0.5 * the_width_of_your_drawing_surface.

  • \$\begingroup\$ I have already ensured that my SVG is only using whole numbers. I will look into the offsetting right now. \$\endgroup\$
    – user2971
    Mar 9, 2011 at 22:13

As Luther already wrote, it's how the flash renderer works. One thing that will guarantee pixel-accuracy is to turn your sprites into bitmaps and then set the pixelSnapping property to PixelSnapping.ALWAYS.

Or try cacheAsBitmap = true on your vector sprites (see here).


You must log in to answer this question.