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?
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.
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.
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 else?
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...
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 path/shape.
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!