Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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
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?
- Source Article by HTML5 Rocks
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!
As others have noted, the blurriness is caused by anti-aliasing, when the vertical line in your scale image doesn't fall exactly on a pixel boundary.
You can correct this manually in an SVG editor by first scaling your image to the desired size, and then zooming in and manually adjusting the lines so that they fall exactly on pixel boundaries. (If you're doing this in Inkscape, I recommend setting up a 0.5px grid with every second line emphasized in document preferences.)
Alternatively, you may find the PixelSnap Inkscape plug-in useful. It automates the tedious part of this job, automatically shifting lines so that they fall precisely on pixel boundaries. While it doesn't always do a perfect job, it's usually a lot easier to let it do its thing and then clean up any suboptimal results than to always do the pixel hinting completely manually.
I think @Jonathan Todd gave a good theory explanation and general method to avoid blur. I would like to supplement a practice video on how to do pixel hinting in Adobe Illustrator which I found in this article.
I will describe this video's method as follow:
Know how big icon you want to show. If you want it to show in 16px x 16px then you'd better make the same size icon to get optimal effect. Remember you'd better to design custom icons to the exact size you need.
Use Adobe Illustrator to open the SVG icon file and edit it. Two triangles are both SVG format but one has good alignment to a virtual grid it will not blur when show it in your screen.
To edit it your blur icon you first set your image unit in pixels. I think this is different on Windows and Mac OS so you'd better google it.
Design with pixel hinting enabled. (alt + ⌘ + Y on mac or alt + ctrl + Y on Windows)
you could see the left triangle's horizontal and vertical edge pixels align the grid perfectly while the right triangle's horizontal edge pixel are not.
Change width and height first and change X and Y to eliminate decimal part. I would suggest you edit width and height first and then modify x and y coordinates.
change decimal values
to round numbers (no decimal fractions)
Maybe this link will be helpful to solve you problem , http://theindustry.cc/2012/10/17/designed-pixel-hinting/
