Inkscape: Cloning and tiling

PART 2 Dmitry Kirsanov’s evil twin introduces cloning, one of the most exciting Inkscape features

Inkscape is a vector graphics editor. Usually, the term vector is explained as “scalable without loss of quality”. Even Inkscape’s native file format, SVG, stands for Scalable Vector Graphics. But there’s much more to vector graphics than just scalability. Perhaps the most important thing about vector (rather than bitmap) representation of graphics, is that it is much closer to how we – people, not computers – tend to think about images.

When we imagine a circle, we do not think in terms of a grid of pixels. What we have in mind is a complete self-sufficient of SVG, which means they will look as intended in any object with properties such as radius, centre coordinates, colour and so on. And that’s exactly how a vector format would represent a circle as well. As a result, vector representation enables you to manipulate objects in a drawing just as easily as you would manipulate them in your mind. It’s like a high-level programming language whose building blocks make it much easier to express complex algorithms than the ‘compiled binary’ of a bitmap image format.

One simple idea that comes naturally from the vector way of TIME thinking is that of a clone of an object. A clone looks like a copy of the original object, but it’s more than that: a clone is a linked copy that changes whenever the original changes. Simply put, a clone is not a real object, but just a command: “Display a copy of the object here.” The document stores that command, not an object copy. Actual copying is done only in memory, whenever you edit the original, so that the clone always stays up to date.

Inkscape’s clones are an implementation of the use element of SVG, which means they will look as intended in any compliant SVG renderer (in fact, this is true for any other Inkscape-created SVG graphics). Any type of object can be cloned – path, shape, text or bitmap. If you need to get a clone of several objects at once, just group them together and clone the group.

As we’ll see in this tutorial, reasons to use clones include artistic (watching several objects change live when you edit only one is an exciting experience, opening many creative possibilities) and technical (using clones instead of duplicates makes the SVG document smaller and faster to display). Map symbols, repeated design elements such as bullets or icons, various symmetrical designs or patterns – all these are easy to do with clones. Few, if any, other vector editors allow you to create live linked copies of objects so easily.

Now without further ado, I will instruct my good twin to take you through the basics of Inkscape cloning.

PART 1 – HOW CLONING WORKS

Create a clone

Select any object (A) and do Edit > Clone or press Alt+D (this shortcut is easy to remember as Ctrl+D creates a plain non-linked duplicate). The clone will be positioned on top of the original (B); drag it away to reveal the original and the clone (C). We’ve added the arrow from the original to its clone for clarity. (such as node editing on paths or handle dragging on shapes) copy/paste the original In Inkscape you can always find out which object a clone is taken from by selecting the clone and pressing Shift+D.

Transform it

You can move both the clone and its original without one
disturbing the other (A). You can also scale, rotate, or skew the
clone independently; however, scaling, rotating, or skewing of
the original is passed on to all its clones (B). Any shape editing
(such as node editing on paths or handle dragging on shapes)
of the original is also passed on to its clones, whereas you
cannot edit shape of a clone at all (C).

Clones of clones

An object can have any number of clones, all of which are
updated simultaneously when the original is edited. Moreover, a
clone can be cloned too. However, if what you need is multiple
identical copies of an object (this is the most common scenario),
it is better to use multiple clones of the same object (A) than a
clone-of-clone chain (B). To get another clone of the original,
you can select any of its existing clones and duplicate it (Ctrl+D).

Change a clone’s style

Any style property, such as fill colour or stroke width, can be
changed in a clone to be different from the original. But this is
only possible if that style property is unset on the original object.
To unset fill or stroke on an object, select it, open the Fill and
Stroke dialog and use the button with the question mark (A);
after that you can select a clone and assign any fill or stroke
style to it (B).

Partial styling of a cloned group

If you are cloning a group, you can unset fill or stroke on any
object within the group, and that object will become ‘paintable’
in the clones. For example, here the original is a group of five
objects (A), of which one – the bottom ellipse – has its fill unset
(B). Clones of this group can then be painted any colours (C),
and these colours will affect only the bottom ellipse, whereas the
highlights and shadows will remain the same as in the original.

Unlinking clones

If necessary, a clone is easy to convert to a regular object – that
is, to cut its link to the original. For this, go to Edit > Unlink
Clone or press Alt+Shift+D when the clone is selected. You can
unlink many clones at once. This operation does not change any
visible aspect of the drawing; only the invisible link to the clone
is severed. Do this only if you really need to do something that
you can’t do to a clone, such as edit its shape.

PART 2 – CLONE TILING

Pattern symmetries

The very powerful Tile Clones dialog is, in essence, a clone
factory, which will create any number of clones of the selected
object, then move and transform them to create a pattern
according to one of the 17 plane symmetry groups. Use the
controls at the bottom of the dialog to specify the number of
rows and columns in the pattern. This illustration demonstrates
patterns using CM, P4, P4G, and P31M symmetries.

Shifts, scales, rotates, opacities

The Tile Clones dialog can also move, scale, rotate, or change
opacity of the pattern tiles by specified percentages, per row or
per column. Any of these changes can be randomised to a
given degree. These controls are on the corresponding tabs of
the dialog; here, the Shift tab is shown. With this, a wide variety
of exciting effects becomes possible: fadeouts, spreadouts,
gradients, ‘force fields’, ‘explosions’ and more.

Play with colour

The Colour tab of the Tile Clones dialog allows you to assign fill
or stroke colours to the clones in the pattern, while varying the
hue, saturation, and/or lightness per row or per column. The
starting colour to which the changes apply can be selected by
clicking on the Initial Colour button. A lot of effects ranging from
tidy rainbows (A) to randomly patched quilts (B) are easy to
achieve with such algorithmic colouring.

Trace shapes

The Tile Clones dialog has one more trick in its bag. Using the
controls on the Trace tab, you can trace the existing image
under the pattern – that is, pick a value (such as an HSL or
RGB colour channel) in the area under each clone and apply
that value to that clone’s size, colour, opacity or probability of
presence. Shown here is an example of tracing a shape by the
grid of glass buttons.

CLONES IN PRACTICE

Tessellation

One of the impressive graphical feats that Inkscape makes
almost trivial is creating tessellations, that is, complex patterns
that completely cover the plane with no holes or gaps. Starting
from almost any clone tiling, it’s easy to tweak the original’s
shape so that its clones fit each other exactly in the tiling. This
example tessellation was created in about ten minutes, starting
from a P6-symmetric tiling made of triangles.

Optimising icons

Almost all interface icons used by Inkscape are rendered during
program launch from the single SVG document called
icons.svg. Naturally, the size and complexity of that file are
critical for quick startup of the program. As shown in this
illustration, repeated elements in the Zoom tool icons are in fact
clones of a single original. The total of 106 clones in the entire
icons.svg make that file smaller by almost 40%.