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).
Dans l'article précédent, j'ai parlé du danger très réel auquel la norme SVG 2 fait face : bien qu'elle contienne de nouvelles fonctionnalités très utiles, le manque d'implication des fournisseurs de navigateurs menace le futur de SVG en tant que norme indépendante. En tant qu'utilisateurs individuels, nous ne pouvons faire que peu de choses pour influencer l'issue, mais nous pouvons commencer à mettre en ligne des documents qui utilisent les fonctionnalités de SVG 2 pour prouver qu'il y a une demande pour elles. Cependant, réduits à des documents codés à la main, ceci nous limite aux fonctions qui sont supportées dans les outils d'auteurs - ce qui signifie, pratiquement, celles supportées par Inkscape.
La dernière fois, j'ai regardé l'addition non contestée de l'Ordre de Coloriage dans la spécif. SVG. Aujourd'hui, je vais me pencher sur un autre gros ajout - un qui a été anticipé impatiemment par les utilisateurs d'Inkscape depuis la première fois où il est apparu dans les versions de développement - les Dégradés tramés (qui fait référence aussi aux Trames dégradées, suivant à qui vous posez la question). Pour poursuivre, vous aurez besoin d'une copie d'Inkscape 0.92 ; voyez l'article précédent pour quelques conseils d'installation.
Il n'y a pas de doute que les simples dégradés linéaires disponibles dans SVG 1.x sont extrêmement limitants. Plutôt que d'ajouter des types séparés pour les dégradés coniques, spirales carrés et autres, SVG 2 ajoute les Dégradés tramés, qui sont suffisamment flexibles pour couvrir tous ces cas et d'autres - même au prix de quelques ajustements manuels pour obtenir le résultat exact que vous voulez. Comme avec n'importe quel type de dégradé, vous avez d'abord besoin d'un objet auquel l'appliquer - je commencerai par un simple carré. Une fois l'objet cible sélectionné, cliquez sur l'icône Gradient tramé de la barre de taches :
Ceci affichera la barre de contrôle de l'outil des Dégradés tramés (voir ci-dessous).
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.
Pour créer un nouveau filet sur votre objet, vous devez d'abord régler quelques paramètres simples. Les premières deux icônes (marquées « Créer ») vous permet de choisir entre un filet de dégradé ou un dégradé conique. En pratique, il n'y a pas de véritable dégradé conique dans SVG - le bouton en crée juste une illusion pratique en utilisant le filet de dégradé. Pour le moment, assurez-vous que le premier bouton est sélectionné. La paire de boutons suivante (« sur : »)définit si que le filet sera créé soit sur le remplissage soit sur le contour de votre objet - j'utiliserai le Remplissage pour ces exemples. Enfin, vous devez décider combien de lignes et de colonnes devront être présentes dans votre filet. De grandes valeurs ralentiront le rendu, mais vous assure un contrôle plus fin sur le dégradé. Je commencerai avec un simple filet de 2×2, car c'est suffisant pour expliquer les bases.
Quand vous ramenez votre curseur sur le canevas, la barre d'état vous informe que vous pouvez « Cliquez-glissez ou double-cliquez pour créer une toile ». Avec un seul objet objet sélectionné, les deux approches donnent le même résultat, aussi, habituellement, je double-clique sur l'objet. Cependant, si plus d'un objet sont sélectionnés, le double-clic ne s'appliquera qu'à un seul d'entre eux, tout en désélectionnant les autres. A l'inverse, un cliquer-glisser à la souris applique un filet indépendant à chaque objet. Vous n'avez même pas à à glisser sur les objets eux-mêmes ; aussi, si si vous avez un dessin particulièrement chargé, vous pouvez glisser simplement sur une partie vide du canevas à la périphérie pour obtenir le même effet, sans le risque de toucher accidentellement les autres éléments.
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
