Editing Cairo (graphics) (section)

=== Drawing model ===
[[File:Cairo's drawing model.svg|thumb|The Cairo drawing model]]
The Cairo drawing model relies on a three-layer model.

Any drawing process takes place in three steps:
# First a mask is created, which includes one or more vector primitives or forms, i.e., circles, squares, [[TrueType]] fonts, [[Bézier curve]]s, etc.
# 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.
# 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.{{Citation needed|date=September 2021}} 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 <code>style</code> attribute. That said, the models are not incompatible; many SVG renderers use Cairo for heavy lifting.<ref>{{cite web |url=https://github.com/GNOME/librsvg |title=GNOME/librsvg |website=GitHub}}</ref><!-- Well, SVG 1.1. in fact provides a way to achieve similar result via filters. Checkout: https://www.w3.org/TR/SVG11/filters.html -->

==== Example ====
Quite complex "[[Hello world program|Hello world]]" graphics can be drawn with the help of Cairo with only a few lines of [[source code]]:
[[File:Cairo example.svg|thumb|none|180px|SVG picture generated by this example]]
<syntaxhighlight line lang="c">
#include <cairo-svg.h>
#include <stdio.h>

int main(int argc, char **argv) {
    cairo_surface_t *surface = cairo_svg_surface_create("Cairo_example.svg", 100.0, 100.0);
    cairo_t *cr = cairo_create(surface);

    /* Draw the squares in the background */
    for (int x = 0; x < 10; ++x)
        for (int y = 0; y < 10; ++y)
            cairo_rectangle(cr, x * 10.0, y * 10.0, 5, 5);

    cairo_pattern_t *pattern = cairo_pattern_create_radial(50, 50, 5, 50, 50, 50);
    cairo_pattern_add_color_stop_rgb(pattern, 0, 0.75, 0.15, 0.99);
    cairo_pattern_add_color_stop_rgb(pattern, 0.9, 1, 1, 1);

    cairo_set_source(cr, pattern);
    cairo_fill(cr);

    /* Writing in the foreground */
    cairo_set_font_size (cr, 15);
    cairo_select_font_face (cr, "Georgia", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);
    cairo_set_source_rgb (cr, 0, 0, 0);

    cairo_move_to(cr, 10, 25);
    cairo_show_text(cr, "Hallo");

    cairo_move_to(cr, 10, 75);
    cairo_show_text(cr, "Wikipedia!");

    cairo_destroy(cr);
    cairo_surface_destroy(surface);
}
</syntaxhighlight>