How does pixel hinting work?

Question

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...

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?

Answer 1

"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.

Answer 2

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).