Ceci est une ancienne révision du document !
This month I’m going to start by looking at a couple of small-but-useful quality of life improvements in the gradient editor that were added in Inkscape 1.4. So I guess the first thing to do is to create an object with a gradient… I’ve only applied a gradient to the fill, but the new features are also available on strokes with a gradient. In this case the gradient runs from red to yellow, and from left to right. In terms of SVG, that’s the default direction, with 0° towards the right of the object, and angles increasing clockwise from there. Remember that, it will be important. In practice, as you can see, there’s also a thin blue section in the middle of the gradient. I’ve included that simply to make any orientation changes clearer in the following screenshots, but for simplicity I’m going to ignore it and continue as though this is just a simple red-yellow gradient. Opening the Fill & Stroke dialog we see roughly the same layout as the past few Inkscape versions, but with some new controls at the top-right (outlined in red). The first new control here is a numeric input to adjust the rotation of the gradient. Setting it to 45°, for example, does exactly what you would expect it to.
Remember that the blue line runs through the middle of the gradient, perpendicular to the gradient direction. Our 45° angle, therefore, runs from top-left to bottom-right. Of course you can set any other angle you wish to in this field but, disappointingly, there are no presets available when right-clicking. One useful feature of Inkscape is its presentation of sensible presets associated with a lot of other input fields, but it’s something that seems to be increasingly falling by the wayside with each new field added to the application. It would be handy for this field to offer a list of presets at 15° angles across the available range but, as it stands, you’ll just have to type them in yourself. Neither does this field support the ability to enter simple equations as found in many other inputs in Inkscape. The lack of presets might be forgiven if it were possible to enter “15*5” and have the program calculate the result for you, but that’s not an option here. If you want to change the value in 1° increments there are plus and minus buttons – for smaller or larger increments you’ll need to do some typing. You can also focus the field and scroll your mouse wheel for the same effect – but, again, only in 1° steps. It would have been useful to switch to 10° steps with the Shift key held, or 0.1° steps for Ctrl, but that level of coarse and fine control hasn’t been implemented.
For a more interactive approach there is also a new slider, below the numeric input. If you don’t need a precise angle, but just want to adjust it until it looks “right” on the canvas, this might be a better tool. As is the nature of sliders, the exact resolution of each step will change depending on how wide the dialog is. But even with an extremely wide dialog, and therefore a longer slider, the resolution still appears to bottom out at 1° steps. Once again, if you want finer control than that you’ll need to adjust the value in the input box, but I’ll forgive that given that a slider isn’t really the right control for such exacting requirements. To the left of the slider, a new button rotates the gradient clockwise in 90° steps. To be clear, it rotates the existing gradient by an additional 90° with each click, so if you start with an angle of 30° it will jump to 120°. Note that the rotation control covers a range of +/-180°, so an additional click on the button won’t jump to 210°, but rather to -150°. From there, another click jumps to -60° before a fourth click brings it back to the starting value of 30°. Dragging the slider to either end is a quick way to initialise the gradient to a base number such that the button cycles through the four cardinal directions.
This button is a potentially handy shortcut with one glaring omission: it only rotates clockwise. It’d be more useful still if a Shift-click caused it to rotate anti-clockwise for those times when you overshoot your intended rotation, or know that you specifically want to adjust the value by -90°. One possible use for this button is to flip the orientation of a gradient through 180° – in the case of my example shape, to change it from red-yellow to yellow-red. But right next to the rotate button is one that was already present in earlier releases, which reverses the direction of the gradient. Obviously it makes more sense to use that single-click button, rather than two clicks on the rotate button, right? In the vast majority of cases, either button will do the job. But there is a technical difference between the way they work which means they’re not quite equivalent, in ways that could affect your design if you’re sharing gradients among multiple objects. To demonstrate this, I’ve taken my original square and made two duplicates. Then I reversed the gradient on the first one, and rotated it twice on the second. As you might expect, both duplicates look the same. The differences appear when looking at the gradient settings in the Fill & Stroke dialog (below).
On the left we can see that the ‘Reverse’ button has done exactly that – it’s reversed the order of the color stops entirely. The gradient that had previously run from red to yellow now runs from yellow to red, but with a rotation of 0°. The ‘Rotate’ version, on the right, maintains the same stop order as the original object, but with a rotation of 180°. Within the Inkscape Preferences (Edit > Preferences), in the Tools > Gradient Tool panel, there’s an option called “Prevent sharing of gradient definitions”. So long as this is checked, you’re unlikely to be adversely affected by the difference between these two approaches. Under the hood, this option causes Inkscape to automatically duplicate your gradient when changes to it would affect more than one object. A change to the rotation of the gradient is okay, as that’s set at the point the gradient is used, allowing two different objects to share a single gradient definition but to display it with different orientations. But using the ‘Reverse’ button results in a change to the gradient definition itself due to the change to the order of stops. Inkscape creates another copy of the gradient, which you can see by opening the ‘Gradient’ pop-up in the Fill & Stroke dialog. Notice that there are now two gradients for our three objects. The first is shared by two objects (as indicated by the number in the ‘#’ column) – our original, and the copy with the rotated gradient. The second was created as soon as the ‘Reverse’ button was clicked, and is only used by one object.
The problems arise when you do want to share gradients. Consider that you might want that yellow changed to green throughout your entire drawing – perhaps due to a change of corporate style or branding. As I discussed last time, you can’t use swatches as gradient color stops, so it’s not possible to define your gradient in terms of named swatches that you can edit in a single place. Instead you’re faced with tracking down and changing the color in every gradient separately. Un-checking the option in the Preferences dialog causes Inkscape to not create additional gradients on a whim, but comes with its own set of issues. This time, as soon as you reverse the gradient on the first copy, the gradient on the original also flips direction, resulting in a pair of yellow-red gradients and no sign of the original red-yellow direction at all. We’ve told Inkscape to share the gradient definition, so a change in the order of stops (due to the ‘Reverse’ button) has affected both our objects. Using the rotate button a couple of times, however, does not affect the original. Let’s create another copy, and flip that one back to red-yellow using this technique (above).
Now there’s only a single gradient used across three objects even though, visually, we have them running in two different directions. Changing a color stop now affects all the objects using that gradient, as with the yellow-to-green swap I suggested earlier (below). Now our entire document has been updated to match the new (if tasteless) corporate branding, without us having to change myriad gradients across lots of objects. Note, however, that disabling this preference means it’s easy to inadvertently change the gradient of another object when you didn’t mean to. For example, if you absent-mindedly use the ‘Reverse’ button, you may find that an object that’s currently off-screen and out of sight also has its gradient reversed. For this reason, unless you really, really want to share gradients, and you understand the implications of doing so, I recommend most users leave this setting checked, and just accept that you may have a bit more work to do if you genuinely do want to change a single stop color across multiple objects.
If you just want to reverse a gradient, therefore, using the ‘Rotate’ button a couple of times is a better option than the ‘Reverse’ button. It won’t result in an additional gradient being created, regardless of the state of this setting, and will give you the same visual result. So does that mean that the ‘Reverse’ button is completely useless? Not at all! Everything I’ve written above applies only to linear gradients. When working with radial gradients the Orientation section of the Fill & Stroke dialog is disabled entirely, so if you want to flip your gradient from being red in the center and yellow at the edge to the opposite style, you have no choice but to use the ‘Reverse’ button, even though it does mean creating a second gradient.
The fact that the Orientation section is disabled for radial gradients is, itself, a little odd. Although it serves no purpose when the gradient is completely circular, if you extend one of the two arms your gradient becomes elliptical. The angle of the ellipse can be altered by dragging the end handle of one of the arms, so it’s a shame that the orientation controls don’t work for this situation. The addition of these new controls is another case where a small, seemingly insignificant change to the UI opens up a can of worms when you begin to dig into what’s actually happening in your SVG file. I think the new Orientation controls are definitely a positive addition (despite the lack of shortcuts, arithmetic and support for radial gradients), but it’s worth being aware of the underlying details if your needs fall outside of ‘normal’ use.