Getting crisper text out of Inkscape
Alexandre 
25. Oct, 2011
12 Opinions
Presumably most Inkscape users rely on the default PNG exporting method only. But there's more than one way to do it.
I've just seen it in Mairin's blog and couldn't resist… The problem is that Inkscape doesn't do any hinting for text, while the application is rather popular for web design and all sorts of screen graphics where crisp is good, and pixel grid alignment is king.
Adding hinting is certainly doable, but involves quite a bit of work to get it right. To start with, you probably only ever need hinted text at 100% zoom level, and then there's a question of exporting where scaling content to a certain custom destination dpi is not so uncommon.
But there is a way to save some embarassment. Since few years Inkscape has a Cairo based PNG exporter which makes the text looks less jaggy thanks to LCD filtering in Cairo. It's available in Save As…/Save Copy As… dialog (the whole page is saved).
Here is Inkscape's native output:
And here is Cairo PNG output.
The second version looks a bit easier on eyes, but YMMV.
However, as many things in life it comes with a trade-off as Cairo based exporting doesn't support some features. E.g. if you take this purely synthetic sample with two objects that have gaussian blur and two objects, one of which is a clipping mask for the other…
…Inkscape will render this as expected:
Whereas Cairo will lose SVG filters while maintaining clips and masks:
Moreover, if you look at the output from the first example, you will see that Cairo is trying to be too smart and antialias what's already aligned to pixel grid.
Unfortunately it doesn't look like Cairo is going to add some control over aliasing (don't you just miss the precision control from Xara?), so when you are exporting to PNG for publishing on the web, it's up to you to decide what you sacrifice. Just remember that you have a choice there.
Oooh! Thanks for the tip! I had noticed the newer ‘Save Copy As’ option but didn’t know what the difference was.
And I fully-admit that graphic was not crisp; if you click on it for the 100% view it is though! I scaled it down lazily using the default Inkscape exporter because the original size I thought was too big for the blog post on planets.
@Máirín Duffy
You are welcome :) I red it from an RSS reader and didn’t really notice there was a link to a full-size version. My bad.
Have to say the native text sample looks much better to me anyway, but maybe you’ve just chosen a bad font to demonstrate.
@Sandy
Mmmaybe :) In some cases I can live with the native output, in others it’s has a totally eye-watering effect.
Cairo PNG export was certainly an improvement on the “menu items” font, though.
Thanks for the tip!
But I agree on the smaller fonts, although each letter is sharper, it does seem to change the horizontal position of some letters.
Look at the “i” in “Vestibulum”. In Cairo, “ib” are much closer than “ti” and on “ulu” the “l” is too close to the last “u”.
So result is “broken flow” but still it’s an opportunity for experimentation.
Thanks.
Are there bugreport for this problems in Cairo and Incskape?
@Tobias Not sure about Cairo tracker, but Inkscape’s tracker did have entries on various aspects of Cairo based exporting last time I looked.
AFAIU the format was originally used as test implementation for cairo-based exports in Inkscape, not as a ‘full-featured’ export format
(from the Inkscape sources)
Cairo itself isn’t ideal for optimized font handling either (it’s own font support is called a ‘toy’ -> the real worker AFAIU is pango, not cairo):
http://cairographics.org/FAQ/#using_pango
Overall I don’t think it makes sense to file new bug reports for specific aspects of this “Cairo PNG” format in Inkscape - its main purpose now seems to be to confuse new users (it’s a FAQ how to keep the background transparent) and trigger other issues (overwrite PNG files without warning, interfere with the clipboard when pasting e.g. into GIMP. etc.). IMHO the format should be removed from the ‘Save…’ dialogs, and - if kept as output format - integrated as option in the ‘Export bitmap’ dialog (or a more general ‘Export’ dialog, supporting other raster formats as well).
Font hinting and optional antialiasing for bitmap export (based on Inkscape’s own renderer) has been filed repeatedly in the bug tracker already.
Thanks for the tip too :-)
Personally, I use different method for better looking fonts/shapes. I create SVG. Open that SVG in some SVG-friendly web browser, printscreen and crop the image. It is also possible to zoom SVG in browser.
It has also some bugs - sometimes, there are problems with text out of the shape etc.
In my tests, the quality of the hinted text in ‘Cairo PNG’ output to a large degree seems to depend on the configuration of freetype at runtime via fontconfig (and probably on whether freetype was configured (or patched) to use subpixel rendering (& hinting) for LCDs or not).
Cairo does support linear and radial gradients which could be used to render the above rectangular with rounded corners much much better.
The API doesn’t need changing, all they need to do is to extend the underlying calls they make to already existing functionality in Cairo.
If you are in need of this, please make a bug report at Cairo and many users will benefit of it.
I use SVG for even better looking shapes