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?
small 
actual 
large 
Answer
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
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?
- 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...
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!
No comments:
Post a Comment