Ceci est une ancienne révision du document !
In the previous instalment, I talked about the very real danger facing the SVG 2 standard: although it contains some extremely useful new features, lack of buy-in from the browser vendors threatens the very future of SVG as an independent standard. As individual users, there’s little we can do to influence the outcome, but one thing we can do is to start putting documents online that use some of the SVG 2 features, to prove that there’s a demand for them. Short of hand-coding documents, however, this limits us to those features that have support in the authoring tools – which, practically, means those supported in Inkscape. Last time I looked at the uncontroversial addition of Paint Order to the SVG spec. This time I’ll look at another big addition – one that has been eagerly anticipated by Inkscape users since it first made an appearance in development releases – Mesh Gradients (also referred to as Gradient Meshes, depending on who you ask). To follow along, you’ll need a copy of Inkscape 0.92; see the previous article for some hints about installing it. There’s no doubt that the simple linear and radial gradients available with SVG 1.x are extremely limiting. Rather than add separate types for conical, spiral, square and other gradients, SVG 2 adds Mesh Gradients, which are flexible enough to cover all these cases and more – albeit at the expense of more manual tweaking to get the exact results you want. As with any type of gradient, you’ll first need an object to apply it to – I’ll begin with a simple square. With the target object selected, click on the Mesh Gradient icon in the toolbar: This will display the Mesh Gradients tool control bar (shown below).
To create a new mesh on your object, you first have to set up a few simple parameters. The first two icons (labelled “New:”) let you select between a Mesh Gradient and a Conical Gradient. In practice there isn’t a genuine conical gradient in SVG – the button just creates the convenient illusion of one using a mesh gradient. For now, ensure that the first button is selected. The next pair of buttons (“on:”) define whether to create the mesh on the fill or the stroke of your object – I’ll use Fill for these examples. Finally you need to decide how many rows and columns should be present in your mesh. Higher values will slow down rendering, but grant you finer control over the gradient. I’ll start with a simple 2×2 mesh, as that’s sufficient to explain the basics. As you move your cursor back over the canvas, the status bar informs you that you can “Drag or double click to create a mesh”. With a single object selected, both approaches give the same result, so I usually just double-click on the object. With more than one object selected, however, a double-click will apply the mesh to only one of them, with the others becoming de-selected. Click-dragging the mouse, on the other hand, applies separate meshes to each object. You don’t even have to drag over the objects themselves, so, if you’ve got a particularly busy drawing, you can simply drag over a blank bit of canvas around the periphery to have the same effect without any risk of accidentally affecting other elements.
Whichever approach you take, your object will now be filled with a grid of nodes and connecting lines, dividing the area into the number of rows and columns you selected in the tool control bar. Each node is given a color, alternating between the fill color and white, to give a result something like this: In this case there are nine nodes. With the Mesh Gradient tool active, you can click on an individual node to select it, a connecting line to select the nodes at each end, or you can drag over a number of nodes to perform a rubber-band selection. You can also use the Shift key to add nodes to the selection, or remove them from it. With one or more nodes selected, you can use the swatches at the bottom of the window, or the Fill & Stroke dialog, to assign a color to them. Setting each node to a different color immediately lets you create complex gradients that would have been extremely tedious to create with earlier releases of Inkscape: As well as giving each node a different color, it’s also possible to move them around by dragging with the mouse, allowing you to set the color at any point on your object, not just the regularly spaced ones that you’re initially provided with. Dragging the edge nodes inside the object leaves empty gaps around the edge; there’s no notion of repeating gradients here. Dragging those nodes outside simply cuts off the fill at the edges.
Halfway along the tool control bar you’ll find a toggle button for showing and hiding the nodes’ handles. With this active, you can use the handles to control the shape of the paths that join the nodes, and therefore fine-tune the precise shape of the gradients within the mesh. Long-time readers of these articles may remember that early instalments presented a variety of different ways to create a circle in Inkscape. Mesh Gradients add another to the armoury, although you’re more likely to end up with something circle-ish than a mathematically correct shape. While we’re in the vicinity of the Show/Hide Handles button, it’s worth mentioning the buttons to the right of it. First are a pair of buttons to show and hide the editing nodes for fill and stroke gradients respectively. Depending on your preferences, gradients can (to some extent) be modified while the Node tool is active, which makes it easy to tweak your gradients by just double-clicking on your object. The nodes and handles of the gradient, however, can interfere with the handles you might usually use to manipulate your object. In the case of a rectangle, for example, the default positions of the mesh nodes put them directly on top of the handles for resizing the rectangle or changing the radius of the corners. One solution is to double-click the Node tool to access its preferences, then uncheck the “Enable gradient editing” option so that there’s no longer any conflict between node and gradient editing. If you do want to be able to edit gradients with the Node tool, however, you can work around the co-located handle problem by switching to the Mesh Gradient tool, toggling the Show/Hide button(s) to turn off the visibility of the gradient nodes and handles, and then switching back to the Node tool to make your changes.
Moving on from those buttons there’s one with a warning symbol, intended to make it absolutely clear that the Mesh Gradient tool is still slightly experimental. Click on it and you’ll be presented with a dialog that tells you the SVG syntax could still change, and that “Web browser implementation is not guaranteed”. That’s quite the understatement! Finally on the toolbar is a drop-down menu to select the algorithm used to interpolate the colors between each node in the mesh. “Coons” mode uses linear interpolation to ramp from one color to the next, but this can result in visible banding at the boundaries between patches (a phenomenon known as “Mach Banding”). “Bicubic” mode uses a non-linear interpolation which results in smoother transitions. In the example below, note the visible banding in the middle of the green section on the left-hand image (Coons), compared with the smooth transition of the right-hand image (Bicubic). Now imagine, if you will, creating a mesh of one row by eight columns on a square object, then moving the bottom nodes upwards to give you a thin gradient strip running along the width of the shape. With a little manipulation, you can bend the strip into an arc, then even further into a donut. The top nodes become the outside of the mesh, and the bottom row of nodes becomes the inside. It would end up looking something like this: Now use the node handles to curve the outer edges, whilst also moving the inner nodes towards each other until they’re all co-located at the center of your shape. You’ve just turned your mesh into a conical gradient – something hitherto impossible to create with SVG.
It’s not a “true” conical gradient, of course. The XML markup is way more complex than would be necessary if SVG had native support. For a start, the center of the cone is defined not by a single node, but by eight of them stacked upon each other. If you want to move the point – or the bottom middle “node” (which is actually two co-located nodes) – you need to rubber-band select in order to ensure that all the nodes are moved at once. Otherwise your cone will quickly deconstruct and reveal the secret sauce behind it. The reason for showing you this is that it helps to explain what happens when you use the second button on the toolbar to create a conical gradient, rather than a mesh gradient. The result may look different – for a start it will actually be circular, rather than the rough approximation in my hand-constructed version – but in reality it’s still a mesh gradient, and if you want to manipulate it or move the nodes, you’ll need to treat it in the same way as the manual version by rubber-band selecting any co-located nodes. Don’t worry if you move a single node by mistake though; just CTRL-Z to undo your edit, then rubber-band and try again. There’s a block of four icons on the tool control bar that I haven’t covered yet – although don’t let that grouping fool you into thinking that they share related functionality. This is really just the “miscellaneous” bin of the toolbar, where odd buttons that don’t have any friends are bundled together.
The first of these icons lets you switch selected lines between straight and curved modes. Straight lines have no Bézier handles, but behave a little more predictably when you drag them around, so sometimes it’s easier to convert to a straight line, move the nodes, then convert back to Béziers for final tweaking. It’s how I produced the manual version of the conical gradient above. Note that you use the same button to switch back to Béziers – the second icon might look like it’s the right one for the task, but it’s not. Rather, the second button will change the length (but not the angle) of the Bézier handles of any selected nodes, in order to make the paths form an ellipse, if possible. This may seem like a rather arbitrary thing to do, but it does make it easier to smooth the transitions between different parts of your mesh, simplifying the creation of gradients like this: The third button is intended to save you a little work if you’re using mesh gradients to reproduce the tones of an existing image. Clicking it causes any selected nodes to take on the color of the object behind them in the z-order. Consider trying to create a vector representation of a bitmap image: you can drag the nodes around to position them over key points in the image, press CTRL-A to select all the nodes, then click the button to set them to the respective colors. In this example I’ve used this technique to “trace” a bitmap image of a red pepper: The mesh in this case was 10×10, but even then there aren’t enough nodes in some areas to capture the details – the green stalk at the top is perhaps the most obvious example. This is an unfortunate limitation of mesh gradients: there’s no way to subdivide individual patches in the mesh, to allow for fine detail where it’s needed, while retaining broad swashes of color elsewhere. The workaround is to stack several meshes on top of each other, but this then becomes harder to manage.
If you do need more detail it is possible to split a row or column in two, creating more patches to work with. With the Mesh Gradient tool active, double-click on the line connecting two nodes and an extra set of nodes and lines will be inserted. Remember, though, that the operation affects the entire row or column, not just a single patch, so potentially adds many more nodes than you actually need. Currently there is no way to delete a row or column, so it’s usually better to start with a slightly coarser mesh than you need and then split to add more nodes where you need to, rather than be stuck with an unnecessarily fine mesh that you can’t simplify. The last rogue button in the toolbar is used to address a small deficiency in the mesh gradients implementation: they don’t track changes to the bounding box of your object. This is easiest to demonstrate by creating a mesh gradient on a square, then switching to the Node tool to convert the square to a rectangle by dragging the handle in the bottom right. You’ll see that the mesh retains its previous dimensions. With the newly rectangularised (that’s a word, right?) object selected, switch to the Mesh Gradient tool and click on the final button in the miscellaneous bin. Lo and behold, the mesh is stretched to suit the new bounding box of the object.
That’s the new Mesh Gradient tool in a nutshell. Now go ahead and create SVG files filled with meshes, and put them online for Google to index! Of course you’ll face the catch-22 issue that browsers won’t know what to do with the new content in your files, so you might also want to post an exported bitmap image until such time as the browsers (hopefully) catch up. Alternatively you could try using the JavaScript polyfill written by Tavmjong Bah (the author of the mesh gradient code in Inkscape): http://tavmjong.free.fr/SVG/POLYFILL/MESH/mesh.html Mesh gradients are just one feature of SVG2 that is at risk if browser vendors can’t be persuaded to support it. The only way that SVG will continue to have a strong future is if people use it. Whether your SVG files use mesh gradients or not, post them online and encourage others to do the same. Image Credits https://commons.wikimedia.org/wiki/File:Red-Pepper.jpg
