Cairo (graphics) explained

Cairo
Logo Size:	150px
Author:	Keith Packard, Carl Worth^[1]
Developer:	Carl Worth, Behdad Esfahbod
Released:	Before ^[2]
Programming Language:	C
Genre:	Graphics library
License:	GNU Lesser General Public License version 2.1 (only) or Mozilla Public License 1.1

Cairo (stylized as cairo) is an open-source graphics library that provides a vector graphics-based, device-independent API for software developers. It provides primitives for two-dimensional drawing across a number of different backends. Cairo uses hardware acceleration^[3] when available.

Software architecture

Language bindings

A library written in one programming language may be used in another language if bindings are written; Cairo has a range of bindings for various languages including C++, C# and other CLI languages, Delphi, Eiffel, Fortran, Factor, Harbour, Haskell, Julia, Lua, Perl, PHP, Python, Ruby, Rust, Scheme, Smalltalk and several others like Gambas (Visual Basic like).^[4]

Toolkit bindings

Since Cairo is only a drawing library, it can be quite useful to integrate it with a graphical user interface toolkit.

• FLTK has full Cairo support (through --enable-cairo compile switch).
• GTK began in 2005, with version 2.8, to use Cairo to render the majority of its graphical control elements, and since version 3.0 all rendering is done through Cairo.
• The Cairo development team maintains up-to-date instructions for rendering surfaces to SDL.^[5]

Available back-ends

Cairo supports output (including rasterisation) to a number of different back-ends, known as "surfaces" in its code. Back-ends support includes output to the X Window System, via both Xlib and XCB, Win32 GDI, OS X Quartz Compositor, the BeOS API, OS/2, OpenGL contexts (directly^[6] and via glitz), local image buffers, PNG files, PDF, PostScript, DirectFB and SVG files.

There are other back-ends in development targeting the graphics APIs OpenVG,^[7] Qt,^[8] Skia,^[9] and Microsoft's Direct2D.^[10] The BeOS, OS/2 and DirectFB backends were dropped in 2022.^[11]

Drawing model

The Cairo drawing model relies on a three-layer model.

Any drawing process takes place in three steps:

1. First a mask is created, which includes one or more vector primitives or forms, i.e., circles, squares, TrueType fonts, Bézier curves, etc.
2. Then source must be defined, which may be a color, a color gradient, a bitmap or some vector graphics, and from the painted parts of this source a die cut is made with the help of the above defined mask.
3. Finally the result is transferred to the destination or surface, which is provided by the back-end for the output.

This constitutes a fundamentally different approach from Scalable Vector Graphics (SVG), which specifies the color of shapes with Cascading Style Sheets (CSS) rules. Whereas Cairo would create a mask of a shape, then make a source for it, and then transfer them onto the surface, an SVG file would simply specify the shape with a style attribute. That said, the models are not incompatible; many SVG renderers use Cairo for heavy lifting.^[12]

Example

Quite complex "Hello world" graphics can be drawn with the help of Cairo with only a few lines of source code:

Notable usage

Cairo is popular in the open source community for providing cross-platform support for advanced 2D drawing.

• GTK, starting in 2005 with version 2.8, uses Cairo to render the majority of its graphical control elements.^[13] Since GTK version 3, all the rendering is done using Cairo.
  • A program called found in Debian allows for taking vector (SVG, PDF, or PostScript) screenshots of GTK 3 applications.^[14]
• The Mono Project,^[15] including Moonlight,^[16] has been using Cairo since very early in conception to power the back-ends of its GDI+ (libgdiplus) and System.Drawing namespaces.
• The Mozilla project has made use of Cairo in its Gecko layout engine, used for rendering the graphical output of Mozilla products. Gecko 1.8, the layout engine for Mozilla Firefox 2.0 and SeaMonkey 1.0, used Cairo to render SVG and content. Gecko 1.9,^[17] the release of Gecko that serves as the basis of Firefox 3, uses Cairo as the graphics back-end for rendering both web page content and the user interface (or "chrome").
• The WebKit framework uses Cairo for all rendering in the GTK and EFL ports. Support has also been added for SVG and content using Cairo.
• The Poppler library uses Cairo to render PDF documents. Cairo enables the drawing of antialiased vector graphics and transparent objects.
• The vector graphics application Inkscape uses the Cairo library for its outline mode display, as well as for PDF and PostScript export since release 0.46.^[18]
• The original version of Manim referred to as ManimCairo, a mathematical animation engine used in the animations of 3Blue1Brown's YouTube Videos. Manim has since moved to using OpenGL. This version is referred to as ManimGL.^[19]
• MorphOS 2.5 features a shared library implementation of Cairo, which was available as stand-alone release for earlier MorphOS versions.
• AmigaOS 4.1 supports a shared object library of Cairo (libcairo.so) in its default installation.
• FontForge enabled Cairo by default for rendering in mid-October 2008.
• R can output plots in PDF, PostScript and SVG formats using Cairo if available.
• Gnuplot 4.4 now uses Cairo for rendering PDF and PNG output.^[20]
• Internet Browser for PlayStation 3 uses Cairo since system software update 4.10.
• Synfig 0.64 now supports optional Cairo rendering.
• On-demand graphing of time series data in Graphite.
• The Konfabulator/Yahoo widget engine uses Cairo for identical output to both Win32 and Quartz on Mac OS/X.
• SolveSpace, free and open source 2D and 3D CAD software.

History

Keith Packard and Carl Worth founded the Cairo project for use in the X Window System. It was originally (until at least 2003) called Xr or Xr/Xc. The name was changed to emphasize the idea of a cross-platform library to access display server, not tied to the X Window System.^[21] The name Cairo derives from the original name Xr, interpreted as the Greek letters chi and rho.^[22]

Complex text layout

Cairo handles Latin and CJK based fonts, but does not directly support complex text layout fonts, which require shaping the glyphs. The Cairo developers recommend using Pango, which provides complex text layout and can integrate with Cairo.^[23]

See also

• Display PostScript and Quartz 2D
• Skia Graphics Engine
• Starling Framework
• WebGL

External links

• • – CFFI-based Cairo bindings for Python
• Web site: Cairo API reference manual.
• Web site: Linux.Ars . Cairo here, there and everywhere . August 23, 2005 . Ars Technica.
• Web site: Cross-platform graphics with cairo. IBM.
• Web site: Comparison of PHP image libraries.
• Web site: The Cairo graphics tutorial.

Notes and References

1. Web site: Carl's boring web pages . cworth.org . 2013 . July 11, 2014.
2. Web site: Xr: Cross-device Rendering for Vector Graphics . June 8, 2009.
3. Web site: Cairo homepage . October 30, 2010.
4. Web site: Cairo Language Bindings . April 16, 2014.
5. Web site: SDL . Cairo . February 17, 2009 . November 3, 2014.
6. Web site: New OpenGL backend merged . Chris Wilson . July 22, 2009 . February 12, 2010.
7. Web site: Announcing OpenVG backend . Øyvind Kolås . January 24, 2008 . February 12, 2010.
8. Web site: Well Isn't That Qt . Vladimir Vukićević . May 6, 2008 . February 12, 2010 . dead . https://web.archive.org/web/20100409072817/http://blog.vlad1.com/2008/05/06/well-isnt-that-qt/ . April 9, 2010.
9. Web site: Cool Stuff . Chris Wilson . August 31, 2009 . February 12, 2010.
10. Web site: Direct2D: Hardware Rendering a Browser . Bas Schouten . November 22, 2009 . February 12, 2010.
11. Web site: Cairo graphics library drops many old backends. Michael. Larabel. Phoronix. February 27, 2022. June 5, 2022.
12. Web site: GNOME/librsvg . GitHub.
13. Web site: GTK+ to Use Cairo Vector Engine . February 5, 2005 . December 27, 2009.
14. Web site: Details of package gtk-vector-screenshot in stretch . Debian. GitHub
15. Web site: Mono - Drawing . December 27, 2009.
16. Web site: Moonlight Notes . December 27, 2009.
17. Web site: Gecko 1.9 Roadmap . December 27, 2009.
18. Web site: ReleaseNotes046 . Inkscape Wiki . March 31, 2008.
19. Web site: ManimCE tutorial by TheoremOfBeethoven — ManimCE tutorial by TB documentation . January 29, 2023 . zavden.github.io.
20. Web site: Gnuplot version 4.4.0 announcement . Gnuplot homepage . February 22, 2011 . https://web.archive.org/web/20110514115341/http://www.gnuplot.info/announce.4.4.0 . May 14, 2011 . dead .
21. Web site: Mailing list thread about the Cairo name change . July 15, 2003 . June 8, 2009.
22. Web site: Mailing list thread about the Cairo name change . July 12, 2003 . December 2, 2006.
23. Web site: How do I use Pango instead of Cairo's "toy" text API? . March 20, 2024.