Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

In this question, a user asks how he can create a vector image that scales down smoothly.

Pixel hinting is the solution:

Anti aliasing treats every edge like a nail, smashing and smoothing without restraint. 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 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!

But I don't understand how it works. Since SVG data is stored in XML, it doesn't seem like a pixel "map" of any kind would be saved with that data. In other words, it seems like the shapes would be stored alone and certainly not mapped to certain pixels.

After all, the reason for vector imaging scaling so well is because it uses shapes and gradients rather than pixels, right?

Could someone please explain how pixel hinting works?

share|improve this question
    
> Do note, however, that this only works for one particular size of your > SVG, or any subsequent larger rendering that is an even multiple of > the original. Actually, you can optimize for different sizes by using media queries. It's a bit of an advanced technique, but you can create separate versions in different SVG groups and hide/display them based on the size at render time. I've tested this out and it even works when used as background images in HTML. smashingmagazine.com/2014/03/05/rethinking-responsive-svg –  Eric Noble Sep 1 at 15:02

2 Answers 2

"Pixel Hinting" is a bit of a contrived term by the author of that article. Nothing wrong with it, but the term is typically reserved for type design. Traditionally, font hinting was the process of manually creating raster images of each vector glyph for each particular screen size deemed necessary. So, for example, at 9px on screen, the default vectors may not be as crisp as desired via the automated rasterization so the font designer would go in and create a custom set of raster images for displaying at exactly 9px.

With sub-pixel rendering and better software, a lot of font hinting is now done automatically and one can argue is where the term used in the SVG has some parallels. (Some would argue, however, that if the rasterization is all automatic, then no real hinting--at least in the manual sense--is happening. A semantic debate, for sure...)

As for how it works in an SVG, look at the source of an SVG file and you'll get an idea of what's happening.

In the opening SVG tag there are a lot of attributes, two defining the width and height. In an SVG I have on my desktop, these are set as such:

<svg width="744.09448819" height="1052.3622047" ...

As you can see, my particular SVG is not set to a specific pixel width/height. I could adjust my SVG so that it is EXACTLY so many pixels by so many pixels, and then from that, in my SVG editor, I could turn on a pixel grid to ensure that all of my vertical and horizontal lines cross exactly between two pixels.

Then, when I render the SVG at 'actual size' I can be relatively assured that I will retain sharp horizontal and vertical lines as there will be no need to auto-hint those particular lines and no need for the browser to round off the overall width and height.

So, in summary, what the author of that article calls 'pixel hinting' is merely taking your SVG file and ensuring that each line 'snaps' to a particular pixel unit. This would be created by the SVG editor you are using and implemented via the browser rendering the image based on the width/height attributes.

Do note, however, that this only works for one particular size of your SVG, or any subsequent larger rendering that is an even multiple of the original.

So, unlike a font where custom hinting could be created for all sizes desired, with an SVG, you can only ensure the auto-hinting will work at that specific size.

For example, perhaps your SVG is 100px x 100px. Your lines can only guarantee to remain 'pixel sharp' if you display the SVG at exactly 100x100 or 200x200 or 300x200 or 400x400, etc.

share|improve this answer

I suppose, that "pixel hinting" works by pixel perfect alignment of the graphic elements:

if the graphic element's border falls at "half-pixel" coordinate, then the antialiasing creates color gradients (anti-aliasing, actually, is the creating of gradients) with resultant picture blurriness.

when one "hints the pixels", he/she tries to align the elements on whole pixels values and by that minimising the antialiasing and improving the sharpness of the image.

(this is my understanding of the pixel hinting, probably someone can explain it better or differently).

share|improve this answer
    
It is important for the OP understand that there is no such thing as a half-pixel. A pixel is the smallest unit of memory used to store image data (even for vectors, since at this stage, the vector has been rendered to a pixel grid for output or display). –  horatio Jun 3 at 14:00
    
@horatio Do you think every virtual pixel match perfectly the physical one? –  Ilan Jun 3 at 14:07
    
No, but I think it is crucial to understanding what is going on. Pixel hinting as represented in the OP's example relies on the assumption that the pixel grid will be the same on random client machines. This is not a safe assumption. (but may be true 80% of the time) –  horatio Jun 3 at 14:14
    
@horatio if the rendering agent supports the width/height of the SVG and the SVG is rendered at that size, then the default should match the pixel grid. But there are certainly many, many ways where that may not be the case (such as a user changing their browser zoom). –  DA01 Jun 3 at 21:43
    
@da01: I agree in the general sense, but SVG files are essentially unitless and the pixel grid alignment presupposes a specific screen size see for instance Illustrator help file "The crisp appearance of pixel-aligned strokes is maintained in the raster output at a resolution of 72-ppi only. For other resolutions, there is a high possibility of such strokes producing anti-aliased results." The only reason I am being pedantic here is because the question is asking about the underlying reasons and so I think it is reasonable nitpicking. –  horatio Jun 4 at 14:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.