Ceci est une ancienne révision du document !
Last month, I introduced the Fill and Stroke dialog as a method for setting flat colors or patterns on your objects. The SVG specification also allows for gradients to be used, but, unfortunately, describes only two types: linear and radial. If you've used gradients in other graphics programs, you may be used to far more variety, but Inkscape is bound by the limitations of the SVG specification so, for now at least, two gradient types are all you have. Inkscape has separate buttons for these in the Fill and Stroke Paint tabs of the dialog: as you might expect, one looks like a linear gradient:
and the other looks like a radial gradient:
Whichever one you choose, you'll be faced with the same user interface within the dialog (above right).
The first item is a pop-up list of the gradients that already exist within your document. The currently selected gradient, at the top of the list, will be the new one that you're in the process of creating. If you prefer to use an existing gradient, then you can simply select another one from the list. Each gradient gets given a user-unfriendly name, such as the “linearGradient3791” in the screenshot. Unfortunately, Inkscape doesn't provide a practical user interface for modifying this name, so, once you have more than a handful of gradients in a document, it can quickly become an unwieldy list which gives little indication of where each one is used in your image.
Your new gradient will always take the same basic form: it has a start color which is set to a fully opaque version of your current fill color (or to black if there is no fill color set), and it has an end color which is the same as the start color – but with its alpha value set to zero. The result is a gradient running from an opaque color to a transparent color which runs from left to right for a linear gradient, and from the center outwards for a radial gradient:
If you double-click on your object – so that you enter editing mode and can see the small handles we've explored in previous articles – you'll also find that two or three new handles have appeared, joined by lines and indicating the start and end points of your gradients as square and circular handles respectively. You can drag these handles around – even outside the boundary of your object – in order to change the position and angle of your gradient. For radial gradients, the two end points can be moved independently, allowing you to have circular or elliptical gradients.
When you click on one of the gradient handles, you'll notice that the Fill and Stroke dialog switches back to the Flat Color mode, with the selected color also reflected in the swatches in the bottom-left corner of the main Inskcape window. The color you can see is that of the selected end point of your gradient, and you can change it in any of the ways we've discussed previously. Try selecting the transparent end, clicking on another color swatch, and then playing with the opacity slider or the “O” spin-box. This approach lets you create gradients that change smoothly between any two colors.
A gradient with two colors is all well and good, but what happens if you want three, four, or a whole rainbow? You could create multiple objects, each with a part of the overall gradient, but that quickly gets complex and unwieldy. In practice the answer is simpler than you might think – we just create more handles on our gradients. Instead of a start and end handle, we'll have one or more in the middle as well. These handles each define a particular color in the gradient, and are usually referred to as “stops”.
To add a new stop to a gradient we need to make it clear to Inkscape that we want to edit the gradient rather than the object itself, by selecting the Gradient tool:
from the toolbox (or by pressing “g” or CTRL-F1). Now it's possible to double-click on the line that joins your existing stops in order to add a new stop. It will default to the color and opacity at that point on the line, so the visual appearance of your object won't change – but now that the new stop exists, you can select it and change its color. You can also drag stops along the line, crowding them together for a sharp transition between colors, or spreading them out for something more gradual. Very quickly, it's easy to create garish multi-colored gradients, although more subtle color changes between stops will often give a better artistic effect.
While the Gradient tool is active, you can still move the end stops to modify the size and angle of the gradient. When you're done, just select your object using the Select tool in order to return to the familiar view of the Fill and Stroke dialog with the gradient in place. A useful shortcut for this step is to just hit the space-bar. In most cases, this will toggle between the current tool and the Select tool, switching back and forth with each press.
Let's go back to a simpler gradient with only two stops. The quick way to do that is to switch your fill to Flat Color, and then back to a gradient again, returning you to the default arrangement of a fade from opaque to transparent – centered on your object. The Fill and Stroke dialog should look like the first image in this article once more, giving us a chance to explore the remaining options on the screen.
The Duplicate button is almost self explanatory. It duplicates whichever gradient is currently selected in the pop-up menu, and applies the duplicate to the currently selected object. That last point is important – it means that you can happily change the stop colors and positions in the duplicated gradient without affecting any objects that use the original version. As such, it can be a convenient starting point if you already have a gradient that's close to the one you need, but not quite perfect.
The Edit… button we'll come back to shortly.
The Repeat pop-up is used to define what happens beyond the start and end stops of your gradient. The default setting is “none”, in which case the area before the start handle will take on the same color as the start handle itself, and the area beyond the end handle will likewise take on the color of the end stop. Both the other settings repeat the gradient: “reflected” causes the gradient to reverse for each repeat, giving a smooth transition that cycles as Start-End, End-Start, Start-End, End-Start…; “direct” uses the gradient as it stands, giving a more abrupt cycle of Start-End, Start-End, Start-End, Start-End… As is often the case, a picture demonstrating this makes far more sense than a textual description, so here are three pairs of gradients demonstrating “none,” “reflected” and “direct” modes using the gradients shown in the top pair:
Now we'll return to that Edit… button. If you click it, you'll bring up a gradient editor window. This is an alternative interface for editing gradients: you can add and remove stops, change their position within the gradient, and alter their colors – exactly the same features that are available by editing using the Gradient tool on the canvas except that the editor won't help you to change the position and angle of your gradients within your objects. The gradient editor dialog has been officially deprecated though, and will likely be removed in a future release in favor of some additions to the on-canvas editing, so I won't go into any more detail about it.
Throughout this article I've talked about editing the fill. But you can also apply a gradient to your object's stroke. Here we have two thick-stroked rectangles, one with a linear gradient for the stroke, and the other with a radial gradient:
Being able to use a gradient for the stroke can be a useful workaround for one of SVG's (and therefore Inkscape's) limitations: strokes are always a fixed width. This restriction makes it difficult to draw lines that taper out, but using a stroke that fades to transparent can often give a similar visual effect, especially with thin lines:
There is one feature that crops up when using both fill and stroke gradients which can sometimes feel more like a bug: Inkscape likes to 'help' by snapping the handles of gradients together so that you can manipulate them as one. In this example, I've drawn a square with a yellow fill and blue stroke, then clicked the linear gradient buttons in the Fill and Stroke dialog. It looks like there's only one pair of gradient handles, but that's because one set is on top of the other.
If you wish to modify just the fill or the stroke gradient, the obvious thing to do would be to grab the visible handles and move them out of the way to reveal the second pair below, right? If you try that, you'll find that Inkscape's propensity for snapping gradient handles together means that both sets of handles move as one.
The solution to this conundrum is simply to hold the SHIFT button as you drag the handles around. This will let you separate them, and prevent them snapping back together if they get too close to one another.
Now that you can create gradients, perhaps it's time to replace the simple blurred shading on your snowman with some radial gradients, to give him a little more depth. Don't forget linear gradients for his nose, arms, hat and pipe. As a finishing touch, a nicely shaded sky is usually more interesting than a flat plane.