Ceci est une ancienne révision du document !
One of the most welcome changes in Inkscape version 1.3 is the addition of a Pattern Editor in the Fill & Stroke dialog. It’s definitely not without its issues, but it’s such a vast improvement over the UI in earlier releases that I’m more than prepared to forgive a few UX missteps. First a reminder about patterns in general, as they’re not a feature that all users have a lot of experience with. The short, technical explanation is that a pattern is a section of SVG content that can be used in place of a color or gradient for the fill or stroke of an object, and which will automatically be tiled in both the horizontal and vertical directions if it’s not large enough to fill the required space. Inkscape comes with a large number of built-in patterns, and it’s those I’ll focus on in this article. If you need something else, however, you can create your own patterns by selecting one or more objects in your image, and using the Object > Pattern > Objects to Pattern menu entry.
Let’s look at adding a pattern to the fill of a rectangle. In this screenshot of the Fill & Stroke dialog, the object currently has a solid red fill. I’ve drawn a red circle around the button that switches from a flat color fill to a pattern fill, and there’s a similar button on the ‘Stroke paint’ tab. Clicking that button in an old Inkscape release produces a rather underwhelming UI, consisting of just a single pop-up selector and a lot of explanatory text. Opening that pop-up presents a long list of pattern names, consisting mostly of stripes of different ratios, some polka dots, a few miscellaneous vector entries, and three bitmap designs. But one thing that’s conspicuous by its absence is any sort of preview of each pattern – you have to just apply each of them to your shape in turn to see what they look like. That’s it for the UI in the dialog. There are some on-canvas handles for repositioning and sizing the pattern (more on those later), but in terms of selecting a pattern you just pick the name from a list and hope for the best.
Compared with that sparse interface, 1.3 offers a wealth of controls and previews, to the point that it’s almost overwhelming! With so much more to show, you may find that there’s even a scrollbar to let you access all of it if you have the dialog sized too small. Below this UI you’ll also find the Blend Mode, Blur, and Opacity controls that are common across all the fill types, so fitting the entire Fill & Stroke UI on screen at once requires quite a bit of vertical space and is likely to require some scrolling up and down on a smaller screen. Let’s break down the various parts of this UI to make more sense of the features that are now exposed, starting from the top:
After the ‘Pattern fill’ label, the first actual control is a button with a gear icon which opens a pop-up with a couple of settings. The first of these is a checkbox to turn on or off the display of the pattern names below each swatch. Personally I find that displaying the names is largely useless, as you may see only the first few characters, which are often identical across multiple different patterns. Hovering over a swatch displays the full name in a tooltip, so if you just want to know or memorize the names of your most commonly used patterns, there’s little need to have them permanently displayed. With the slider in this pop-up you can adjust the size of the pattern swatches (referred to as ‘tiles’). Larger tiles show more of the pattern content (and more characters in the name, if you have enabled that option), but reduces the number of swatches that are visible at once. Inkscape tries to update the dialog live as you move this slider: on my machine this was jerky, hanging the UI for a second or two with each re-render. I advise dragging the slider very slowly to allow the application to keep up, especially when trying to finetune the tile size to your exact preference.
Next to the gear button is a search field for filtering the displayed swatches based on their name. With the number of patterns in Inkscape at the moment it seems unlikely that much use will be made of this feature. Perhaps if many more designs are added in a future release, this will make more sense. The remainder of this top section is taken up by a box that shows a swatch for each pattern that is used in the current document. Note that this is one swatch per pattern, not per object using a pattern. If you use the exact same pattern on, say, five different objects it will still appear in here only once. Clicking one of these swatches will apply the pattern to the currently selected object(s) – but make sure you read the rest of this article to understand the difference between picking a pattern here versus the next box of tiles, as they don’t do quite the same thing.
That ‘next box of tiles’ is a similar region containing swatches for patterns, but this time it shows all the ones that are available in the application, rather than just those that are being used in the document (shown above). At the top-left is a pop-up menu that lets you select between different categories of pattern. The categories are rather arbitrary – what makes a pattern ‘Asian’ rather than ‘Decorative’ or causes it to appear in the ‘Geometrical’ section, rather than the confusingly named ‘Patterns’ group? The real benefit to being able to view one group at a time is simply that it limits the number of patterns to display at once, in this scrollable letterbox view that is clearly too small for the purpose except on the largest of screens. Next to the pop-up are arrows that simply step through the groups, offering little additional benefit. Furthermore, the stepping doesn’t wrap around, so when you get to the last group you’ll probably end up opening the pop-up anyway to jump back to the beginning.
Then we have the pattern swatches themselves. Clicking a swatch in here will apply it to the currently selected object(s), but again make sure to read to the end of this article. Whereas the top set of swatches is likely to have only a handful of entries at most, this one can potentially contain a huge number. Not only is this box often too small to practically scroll, but many of the patterns run into each other in a way that sometimes makes it hard to distinguish them from each other. Inkscape devs: can we have an option for a gap between tiles, please? Finally, we have the largest part of the dialog: the section for previewing and editing the currently selected pattern. This consists of a large preview box, with a number of fields and controls wrapped around it which affect the preview, as well as having a live effect on the pattern(s) on the canvas.
Top-left is a field that holds the name of the pattern. You can also edit the name here, though your changes don’t take effect immediately, even if you press the Enter or Tab key. Instead you have to interact with some other control – one of the buttons in this dialog, or selecting a different object on the canvas, for example. Only then does the change kick in, and the tooltip on the swatch will update. Running down the right are controls for changing the way the pattern appears. You can alter the scale in the x and y directions, with the ‘(un)broken chain’ toggle that is common in many graphics programs being used to switch between proportional and free scaling. You can also rotate the pattern using either the ‘Orientation’ field or the unlabelled slider beneath it. ‘Offset X’ and ‘Offset Y’ are used to adjust the placement of the pattern within your fill or stroke.
ll of these controls can also be changed graphically on the canvas. There are two ways to enable this mode: the first – which has been available in Inkscape for a long time – is to switch to the Node tool (F2) while an object with a pattern is selected; the second is simply to click the ‘Edit on canvas’ button in the Fill & Stroke dialog, which actually just switches you to the Node tool anyway. Whichever approach you take, Inkscape will display a square or rectangle with three handles on the canvas which represents the outline of a single tile of your pattern. In older releases, this rectangle always appeared at the top-left of your document, but 1.3 changes this so that it appears on the object you’re editing. This makes a lot more sense, especially if you’re trying to adjust the pattern on an element that’s far from the top-left corner. The style of the handles, however, is rather confusing. They look identical to the handles for editing a rectangle, such that it’s easy to get them mixed up when they happen to be close together on the canvas. In this image you can see the rectangle’s handles around the outside, and the pattern’s handles inside the object – just imagine the confusion when the pattern is a similar size to the object, so that the handles start to overlap. Wouldn’t it make so much more sense to render these handles with a different shape, color, or line thickness?
Dragging the top-left handle will reposition the pattern (equivalent to the ‘Offset X’ and ‘Offset Y’ controls). Dragging the bottom-right handle will resize the pattern (equivalent to ‘Scale X’ and ‘Scale Y’) – hold Ctrl at the same time for proportional scaling. When scaling proportionally, the handle fixes the aspect ratio that is currently set, rather than forcing x and y to the same value. This is a good thing, as it lets you set the aspect ratio for the pattern then adjust its actual size without that ratio changing, but there doesn’t seem to be a shortcut to force it back to a 1:1 ratio, should you wish to, leaving you to edit the fields in the dialog instead. Finally, dragging the round handle at the top-right will rotate the pattern (equivalent to the ‘Orientation’ field and slider). If your pattern is small enough to repeat within your shape, clicking within it will move the handles to the corresponding ‘copy’ of the pattern. If your pattern is larger than the shape it’s applied to, the handles can appear outside the object, as in this example with a large rotated pattern.
Within the dialog is also a pair of sliders labelled as ‘Gap X’ and ‘Gap Y’. These allow you to add gaps between the copies of your pattern but, quite frankly, they feel like an afterthought. The size of the gap is represented on them as a percentage (of what?), but they allow steps of only 20% at a time – and there’s no input field to enter an arbitrary value. Digging into the XML editor, I think that these actually set the ‘width’ and ‘height’ attributes on the <pattern> element (which is hidden away in the <defs> section), with the percentages being based on the width/height of the pattern content. They’re certainly not stored as simple percentages in the XML, so if you want a value that doesn’t fall on a 20% step, you’ll have to do the math, or manually tweak the values in the XML editor, until the result looks right. Now that I’ve explained the bulk of the pattern editing controls, we get to one of those caveats I mentioned earlier. If you click on a swatch to select a pattern – even if it’s the same one that’s already been applied to your object – all those fields are reset to their defaults. On the one hand, this is a quick and easy way to revert all your changes if you’ve been playing around with the handles on the canvas, but on the other hand, it’s a quick and easy way to accidentally revert some carefully curated changes in a way that you might not spot until it’s too late for Edit > Undo to save you.
There’s one final control I haven’t described yet, which you might think I’ve skipped over because it’s so obvious what it does: the ‘Color’ button (labelled ‘Colour’ in the screenshots from my British English installation). Unfortunately, while it is indeed obvious what it should do… it doesn’t always do it. With some patterns, selecting a color will change the pattern to that color, as you might expect. But with others, it doesn’t have an effect at all, or the button simply doesn’t do anything (it’s disabled, but although the label appears greyed out, the button itself doesn’t look obviously inactive in any way). Take these five patterns – the last five of the ‘Patterns’ group – and see if you can predict how each one will behave when I try to apply the same color to them?
The first (“Stripes 13 (4:1)”), is a simple vector pattern, and accepts the color as you might expect. The second (“Table Cloth”) disables the button, which I guess makes sense given the mixture of colors in the pattern. But although the third one (“Tiles”) also appears to contain multiple colors, it will happily accept a color change. The fourth pattern (“Tiles 2”) will let you open the color picker and set a value, but then it still appears in only black. The last one (“Wavy”), despite looking like a simple vector pattern, also disables the button. Here are those results, in graphical form, with the default appearance in the top row, and the bottom showing all the patterns after (trying to) set them to pure red. There’s one more caveat to using this dialog, and it’s a very, very important one. Depending on how you use it, Inkscape will sometimes create a copy of a pattern, and sometimes it won’t. This can have a huge effect on what happens when you play with the editing controls, and makes the result very hard to predict. If you set a pattern fill by clicking on the top section of the dialog – i.e. choosing a pattern that has already been applied to another object in your document – both those objects use the same pattern definition. If you change the color on one of them, the other one will change as well.
If you now change the other pattern controls for one of those objects, such as the scale or orientation, Inkscape creates a new pattern which references the first, but applies its own position and transformation data. Other types of data are inherited from the referenced pattern though. This means that even though there are now two patterns, they still share the same color data, so changing the color of one will still also change the color of the other. Now draw another shape and set a pattern on it. This time select it from the main section of the dialog, using the large list of grouped patterns. Even if you select the same basic pattern as above, Inkscape creates a fresh copy of it, not just a reference. You can change the color of this one without it affecting anything else. If this sounds confusing, it’s because it is. Sometimes Inkscape creates a copy, sometimes it creates a reference to an existing pattern. There’s some logic to it, but nothing that’s very obvious from a user’s perspective. I’ve distilled the complexity down into two rules, which should hopefully help you to make the right choice when setting a pattern:
1/ If you want an independent pattern for your object that will not be affected by changes to the pattern on other objects, make sure to select it from the main list of swatches, not from the top region that shows the ones already applied in the document. 2/ If you want objects to share the same pattern such that changing the color of one changes the others, select the pattern from those that are already in the document, using the top section of the dialog. The on-canvas controls for setting scale and orientation (or those at the bottom right of the dialog) will still operate on each element separately though.