Quality Loss When Scaling down SVG’s

I’m having a hard time trying to find the best way to produce an SVG that maintains it’s quality through scaling. The actual size of the image is the medium one which is pixel-perfect in Illustrator. However, once I save it as an SVG, the right-most vertical line becomes blurred. What can I do to produce a better quality/scale-friendly SVG?



enter image description here


SVG Maintains 100% source quality

An SVG image’s data is stored as XML instead of pixels, and consists of components that can be scaled to any level without losing source quality.

Screen Resolution

As the graphic becomes smaller on your screen, it has fewer and fewer pixels to represent it’s source (which is still in perfect quality), causing the image to appear less sharp.

Anti Aliasing

enter image description here

The large image (left) and the small one (right) are both anti-aliased (See the slight, subtle color used at the edges?).

Anti-aliasing is a technique used in rendering images that sacrifices sharpness to avoid ugly jagged edges.This technique used to keep edges smooth is the reason for the poor quality in the smallest image. Because of the low resolution, the anti-aliasing is much more obvious here, and is even used on the vertical edges.

I suspect this happens in the anti-aliasing process either because it’s hard to do it differently, or for uniformity in the image. If the diagonal edges were slightly blurred from anti-aliasing and the vertical ones were not, it wouldn’t be a very balanced effect.

Antialiasing is something of an unsung hero in web graphics; it’s the
reason we have clear text and smooth vector shapes on our screens.
There are actually a couple of approaches to antialiasing used in
browsers today which are most obvious when it comes to text rendering.
When the algorithm used for antialising switches it can lead to
unexpected visual results. In this article we’ll take a look at the
approaches to antialiasing and see how the pixels get drawn.

All of our screens are made up, as we all know, of pixels. It’s a
giant grid of blocks, and each one contains red, green and blue (RGB)
components. At a distance we see images, text and icons, but up close
we can actually see the grid of RGB components and how everything is
made up.

So what happens when we’re drawing a vector shape and it passes
through “part” of a pixel? Let’s assume that the shape we’re drawing
is black and the background is white. Should we color that pixel at
all? If we color it, what color should it be? Black, gray, something

– Source Article by HTML5 Rocks

The Solution

Pixel Hinting. As linked by the new user below pixel hinting is exactly what you need, and the proper answer to your question. Anti aliasing treats every edge like a nail, smashing and smoothing without restrain. Unless you give hints!

How it’s done…

enter image description here

First, open the document containing the vector shape you’d want to
pixel hint. This technique works great if you’re working in vector,
though if you’re working with raster shapes, pixel hinting is
manageable — but only for the advanced. So let’s stick with vector
shapes for now.

Second, zoom in as much as you can until you see a pixel grid. If you
think you’ve zoomed in far enough, but you still can’t see the pixel
grid, I suggest you change some settings and preferences to turn it
on. If it’s on and you can see it, go and select your vector

Third, select points on your vector path, and move the pixels with
your arrow keys in minute increments. Some apps require you to hold a
button down, some don’t. Just as a long as you know the paths aren’t
just shifting a pixel up — because you’d want them to shift at most, a
half-pixel up.

Fourth, do the same for the rest of your vector’s points until
everything looks less blurry when zoomed out. When you’ve finished,
you can now apply sharp, “pixel-perfect” styles, gradients, shadows,
etc., as you normally would with a vector shape.

Lastly, if you’re thinking of going that extra mile with this
technique, try nudging vector points on icons that look “too” crisp.
Sometimes, a curve might look much better slightly blurred than it
looks when crispy.

– Source Article by The Industry, courtesy of tareq-a.

Pixel hinting with vector shapes tells the rendering system the intention of the edge, so anti aliasing knows whether or not to swing it’s smoothing hammer!

Source : Link , Question Author : Jamie Kudla , Answer Author :
8 revs

Leave a Comment