Getting crisper text out of Inkscape

Getting crisper text out of Inkscape

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:

Inkscape's native output

And here is Cairo PNG output.

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…

Synthetic sample

…Inkscape will render this as expected:

Rendering by Inkscape

Whereas Cairo will lose SVG filters while maintaining clips and masks:

Rendering by Cairo

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.

More antialiasing than required

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.

Was it useful? There's more:

14 Comments

Leave a comment
  1. 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.

  2. Alexandre Prokoudine 26 October 2011 at 2:09 am

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

  3. Have to say the native text sample looks much better to me anyway, but maybe you’ve just chosen a bad font to demonstrate.

  4. Alexandre Prokoudine 26 October 2011 at 10:10 am

    @Sandy


    Mmmaybe :) In some cases I can live with the native output, in others it’s has a totally eye-watering effect.

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

  6. Are there bugreport for this problems in Cairo and Incskape?

  7. Alexandre Prokoudine 26 October 2011 at 12:12 pm

    @Tobias Not sure about Cairo tracker, but Inkscape’s tracker did have entries on various aspects of Cairo based exporting last time I looked.

  8. Since few years Inkscape has a Cairo based PNG exporter (…)

    AFAIU the format was originally used as test implementation for cairo-based exports in Inkscape, not as a ‘full-featured’ export format

    * A quick hack to use the Cairo renderer to write out a file.

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

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

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

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

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

  12. Nice tip. Keep up the good work, this is really helpful :D. I found some issues when taking the text out of the shape.

  13. Alexandre Prokoudine 14 August 2012 at 6:46 pm

    @Bogdan Could you elaborate on that please?

  14. At first thought, I belive it’s because of the PNG file is transparent. Thanks for the tips, I think I need extra work on editing the vectors:)

Tell us what you think

Submit the word you see below: