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 certaines fonctionnalités de SVG 2 pour prouver qu'il y a une demande pour elles. Cependant, puisqu'on n'a pas de 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 était anticipé impatiemment par les utilisateurs d'Inkscape depuis la première fois où il est apparu dans les versions de développement - les Filets de dégradé (appelés aussi les Dégradés tramés, en fonction de la personne à qui vous posez la question). Pour poursuivre, vous aurez besoin d'un exemplaire 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 et radiaux 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 filets de dégradés, qui sont suffisamment flexibles pour couvrir tous ces cas et plus encore, au prix toutefois de quelques ajustements manuels pour obtenir le résultat exact que vous voulez. Comme avec n'importe quel type de dégradé, vous avez 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 Filet de dégradé de la barre de taches :
Ceci affichera la barre de contrôle de l'outil des Filets de dégradé (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 deux premières icônes (marquées « Créer ») vous permettent de choisir entre un filet de dégradé et 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 commode 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 où 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 assurent 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 « Cliquer-glisser ou double-cliquer pour créer une toile ». Avec un seul 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. À 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 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 d'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.
Quelle que soit l'approche que vous prenez, votre objet sera maintenant rempli avec une grille de nœuds et de lignes connectés, divisant la zone avec le nombre de lignes et de colonnes que vous avez sélectionné dans la barre de contrôle de l'outil. Une couleur est donnée à chaque nœud, en alternant entre la couleur de remplissage et le blanc, pour obtenir un résultat comme celui-ci :
Dans ce cas-ci, il y a neuf nœuds. L'outil de Filet de dégradé étant actif, vous pouvez cliquer, soit sur un nœud individuel pour le sélectionner, soit sur une ligne de liaison pour sélectionner les nœuds d'extrémité, ou vous pouvez faire un cliquer-glisser avec votre souris au-dessus d'un certain nombre de nœuds pour faire une sélection groupée. Vous pouvez aussi utiliser la touche Maj pour ajouter ou retirer des nœuds à la sélection. Un certain nombre de nœuds étant sélectionné, vous pouvez utiliser les nuanciers en bas de la fenêtre, ou le dialogue Fond et contour, pour leur assigner une couleur. En attribuant une couleur différente à chaque nœud, vous créez immédiatement des dégradés complexes, ce qui aurait été très pénible dans les versions précédentes d'Inkscape :
Tout comme vous pouvez donner une couleur différente à chaque nœud, il est possible de les déplacer en les tirant avec la souris, vous permettant de définir la couleur en tout endroit de votre objet, et pas seulement sur ceux régulièrement espacés qui ont été fournis initialement. En tirant les nœuds des côtés à l'intérieur de l'objet, des parties vides se créent le long des bords ; il n'y a pas de notion de dégradés répétitifs ici. Le glissement de ces nœuds en dehors de l'objet ne fait que couper le remplissage au bord.
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.
Au milieu de la barre de contrôle de l'outil, vous trouverez un bouton bi-stable pour afficher/masquer les poignées des nœuds. Quand il est actif, vous pouvez utiliser les poignées pour contrôler la forme des chemins reliant les nœuds et, ainsi, finement régler la forme précise des dégradés dans le filet. Les lecteurs de longue date de ces rubriques peuvent se souvenir que dans les premiers articles était présentée une variété de façons différentes de créer un cercle dans Inkscape. Les filets de dégradé en ajoutent une autre dans la panoplie, bien que ça se termine plus en « espèce de cercle » plutôt qu'en une forme mathématiquement correcte.
Pendant que nous en sommes au bouton Afficher/masquer les poignées, il est bon de mentionner les boutons à sa droite. En premier, nous trouvons une paire de boutons pour afficher et masquer les nœuds de modification des dégradés respectifs du remplissage et du contour. Suivant vos préférences, les dégradés peuvent (jusqu'à un certain point) être modifiés alors que l'outil de Nœuds est actif ; ceci rend facile l'ajustement de vos dégradés simplement en double-cliquant sur votre objet. Cependant, les nœuds et les poignées du dégradé peuvent interférer avec les poignées que vous pouvez utiliser habituellement pour manipuler votre objet. Dans le cas d'un rectangle, par exemple, les positions par défaut des nœuds du filet sont directement superposées aux poignées de redimensionnement du rectangle ou d'arrondi des angles. Une solution est de double-cliquer sur l'outil de Nœuds pour accéder à ses préférences, puis de décocher l'option « Activer l'édition de dégradé » de sorte qu'il n'y ait plus aucun conflit entre les modifications de nœuds et de dégradés. Cependant, si vous voulez être capable de modifier les dégradés avec l'outil Nœuds, vous pouvez contourner le problème des nœuds superposés en passant sur l'outil Filet de dégradés, puis en basculant le bouton Afficher les poignées pour masquer les nœuds de dégradés et les poignées, ensuite en retournantà l'outil Nœuds pour faire vos modifications.
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.
En partant de ces boutons, vous tombez sur un symbole d'avertissement, dont le but est de dire explicitement que le filet de dégradé est un outil encore un peu expérimental. Cliquez dessus et un texte sera affiché qui vous dit que la syntaxe SVG peut encore changer et que « le support par les navigateurs n'est pas garanti ». C'est peu dire !
Enfin, sur la barre d'outils, vous trouvez une liste déroulante pour sélectionner l'algorithme utilisé pour interpoler les couleurs entre chaque nœud du filet. le mode « Droit » utilise une interpolation linéaire pour transiter d'une couleur à l'autre, mais elle peut conduire à une bande visible aux limites entre les aplats (un phénomène connu sous le nom de « bandes de Mach »). Le mode « Bicubique » utilise une interpolation non-linéaire qui procure des transitions plus douces. Dans l'exemple ci-dessous, notez les bandes visibles au milieu de la section verte sur l'image de gauche (Droit) et comparez avec la transition douce de l'image de droite (Bicubique). Maintenant, imaginez, si vous le voulez bien, que vous créez un filet à une ligne et huit colonnes sur un objet carré, puis que vous déplacez les nœuds du bas vers le haut pour obtenir une fine bande dégradée le long de la largeur de votre forme. Avec une petite manipulation, vous pouvez courber la bande en arc, puis même la transformer en donut. Les nœuds du haut deviennent l'extérieur du filet et la rangée de nœuds du bas devient l'intérieur. Cela ressemblerait finalement à ceci :
Maintenant, utilisez les poignées des nœuds pour arrondir les bords extérieurs, tout en bougeant aussi les bords intérieurs pour les placer l'un sur l'autre au centre de votre forme. Vous venez de transformer votre filet en un dégradé conique - quelque chose d'impossible jusqu'ici à créer avec 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.
Ce n'est pas un vrai dégradé conique, bien sûr. Le balisage XML est beaucoup plus complexe que ce qui serait nécessaire si SVG avait un support natif. Premièrement, le centre du cône est défini non pas comme un simple nœud, mais comme la superposition de huit nœuds. Si vous voulez le déplacer - ou le « nœud » du milieu en bas (qui est en fait deux nœuds superposés) - vous devez faire une sélection de zone pour vous assurer que tous les nœuds bougeront ensemble. Sinon, votre cône sera rapidement déconstruit et la recette secrète sera dévoilée.
La raison pour laquelle je vous montre ça est que ça aide à expliquer ce qui arrive quand vous utilisez le second bouton de la barre d'outil pour créer un dégradé conique, plutôt qu'un filet de dégradé. Le résultat peut sembler différent - d'abord, il sera vraiment circulaire, plutôt que l'approximation grossière de ma version faite main - mais, en réalité, c'est encore un filet de dégradé, et, si vous voulez le manipuler ou déplacer les nœuds, vous devrez le traiter de la même manière que dans la version manuelle en sélectionnant une zone avec tous ses points superposés. N'ayez pas peur si malgré tout vous bougez par erreur un nœud unique ; faites juste Ctrl-Z pour annuler la modification, puis re-sélectionnez la zone et essayez à nouveau.
Il y a un bloc de quatre icônes sur la barre de contrôle de l'outil dont je n'ai pas encore parlé - ne vous laissez cependant pas abuser par le regroupement en pensant qu'il y a une fonction commune partagée. Ce n'est que le coin « Divers » de la barre d'outil, où les boutons spéciaux sans amis sont regroupés.
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.
La première de ces icônes vous permet de passer les lignes sélectionnées de droites à courbes. Les lignes droites n'ont pas de poignées de Bézier, mais se comportent de façon un peu plus prévisible quand vous les bougez ; aussi, il est parfois plus facile de passer en lignes droites, de déplacer les nœuds, puis de revenir à des courbes de Bézier pour l'ajustement final - la seconde icône semblerait pouvoir convenir pour cette action, mais ce n'est pas le cas.
Au lieu de ça, le second bouton changera la longueur (mais pas l'angle) des poignées de Bézier de tous les nœuds sélectionnés, de façon à forcer les chemins à former un ellipse, si possible. Cela pourrait sembler être une chose plutôt arbitraire à faire, mais rend plus facile l'adoucissement des transitions entre les différentes parties du filet, simplifiant la création de dégradés comme ceci :
Le troisième bouton vous permet d'économiser un peu de travail si vous utilisez les filets de dégradé pour reproduire les tonalités d'une image existante. En cliquant dessus, tous les nœuds pré-sélectionnés prennent la couleur de l'objet placé derrière eux dans l'axe z. Supposez que vous essayez de créer une représentation vectorielle d'une image bitmap : vous pouvez bouger les nœuds pour les positionner au-dessus des points clés de l'image, appuyer sur Ctrl-A pour les sélectionner tous, puis cliquer sur le bouton pour qu'ils prennent les couleurs respectives. Dans cet exemple, j'ai utilisé cette technique pour « décalquer » l'image bitmap d'un poivron rouge :
Dans ce cas, le filet était de 10×10, mais, même ainsi, il n'y a pas assez de noeuds dans certains coins pour capturer les détails - la queue verte au sommet en est l'exemple le plus évident. C'est la malheureuse limitation des filets de gradients : il n'y a aucune façon de subdiviser des taches individuelles de couleur dans le filet, pour pouvoir affiner un détail là où c'est nécessaire, tout en gardant de larges aplats ailleurs. La solution de remplacement est d'empiler plusieurs filets l'un sur l'autre, mais cela devient ensuite plus difficile à gérer.
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.
Si vous avez besoin de plus de détail, il est possible de diviser une ligne ou une colonne, créant ainsi plus d'éléments avec lesquels travailler. Avec l'outil Filet de dégradé activé, double-cliquez sur la ligne reliant deux noeuds et un ensemble de nœuds et de lignes supplémentaires sera inséré. Cependant, souvenez-vous que l'opération affecte toute la ligne ou la colonne, non pas un simple morceau ; ce qui ajoute potentiellement beaucoup plus de nœuds que vous n'en avez réellement besoin. Actuellement, il n'y a pas de moyen d'effacer une ligne ou une colonne ; aussi, il est préférable de commencer avec un filet un peu plus grossier que ce dont vous avez besoin ; et ensuite, divisez pour ajouter plus de nœuds là où vous le souhaitez, plutôt que d'être pris avec un filet trop fin sans nécessité, que vous ne pouvez pas simplifier.
Le dernier bouton solitaire de la barre d'outil est utilisé pour résoudre une petite déficience dans l'implémentation des filets de dégradé : ils ne traitent pas les modifications aux limites de la boîte englobante de l'objet. La façon la plus facile de le démontrer est de créer un filet de dégradé sur un carré, puis de passer à l'outil Nœuds pour convertir le carré en rectangle en tirant la poignée de l'angle en bas à droite. Vous verrez que le filet conserve ses dimensions précédentes.
Sélectionnez le nouvel objet rectangularisé (quel mot, n'est-ce pas ?), passez à l'outil Filet de dégradé et cliquez sur le dernier bouton de la zone des Divers. Surprise ! Le filet s'étire pour s'adapter à la nouvelle boîte englobante de l'objet.
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
C'est tout pour le nouvel outil Filet de dégradé, en bref. Maintenant, allez-y et créez des fichiers SVG pleins de filets et mettez-les en ligne pour que Google les indexe ! Bien sûr, vous aurez droit au problème « catch-22 » dû au fait que les navigateurs ne savent pas quoi faire du nouveau contenu de vos fichiers ; aussi, vous pourriez aussi poster une image exportée en bitmap jusqu'au moment où les navigateurs se mettront à niveau (espérons-le). Autre solution : vous pouvez essayer d'utiliser le polyfill en Javascript écrit par Tavmjong Bah (l'auteur du code du filet de dégradé dans Inkscape) : http://tavmjong.free.fr/SVG/POLYFILL/MESH/mesh.html
Les filets de dégradé ne sont qu'une fonctionnalité de SVG 2 qui est en danger si les fournisseurs de navigateurs ne sont pas persuadés de la prendre en charge. La seule façon pour SVG d'avoir un futur fort est que les gens l'utilisent. Que vos fichiers SVG utilisent les filets de dégradé ou non, postez-les en ligne et encouragez d'autres gens à faire de même.
Crédits image https://commons.wikimedia.org/wiki/File:Red-Pepper.jpg