Mesh Gradients

This page documents Inkscape's implementation of SVG 2 mesh gradients. Please don't hesitate to improve this page (or even the mesh code!).

WARNING: Mesh SVG syntax is subject to change. Mesh support in browsers is not certain

For web use, one can replace a mesh by a bitmap using Edit->Create bitmap copy. For print, export to PDF supports meshes.

Undo should now work in trunk and the latest 0.92.x builds.

Enable

This feature is available by default from Inkscape 0.92 on.

For version 0.48.5, you need to either:

• build compiled with CPPFLAGS="-DWITH_MESH" or

• enable the hidden feature by adding Alt-M (or any other available) shortcut to inkscape/keys/default.xml (Preferences->Interface->Keyboard Shortcuts, search for 'mesh', add, save, replace old file with saved file).

Videos

• https://www.youtube.com/watch?v=c73D8-I21oU
• https://www.youtube.com/watch?v=mW5_m3Y_0y8

Create

To create a mesh:

Either:

1. Change to Mesh tool.
2. Select mesh type (normal, conical).
3. Select where the mesh should go (fill/stroke).
4. Select beginning number of rows and columns.
5. Select object to add mesh.
6. Click-drag inside object.

Or:

1. Select object to add mesh.
2. Select mesh icon in Fill and Stroke dialog (Fill or Stroke tab).
   • If an object does not have a mesh fill, a new default mesh will be created using the stored values from the Mesh-tool tool-bar.
   • Choose pre-existing mesh from drop-down menu.

Choose

One can reuse an existing mesh via selecting a mesh from the drop-down menu in the Fill and Stroke dialog when the mesh icon is selected. The mesh will be sized to the bounding box of the object (geometric box for fill, visual box for stroke). Note: A copy of the mesh is created.

Edit

• Node Types
  • Diamond: Corner
  • Circle: Bezier handles
  • Square: Tensor handles (see below on how to enable/disable).
• Click on node to select or deselect node (with Shift, add/remove from selection). With mesh tool, you can also box-select multiple nodes.
• Single click on path to select end nodes (with Shift, add to selection, with Ctrl, toggle selection). This is quite useful to select nodes hidden by other nodes (as with conical gradients).
• Double click on path to divide row/column by two at that point (there is no reverse operation yet).
• Undo should work in trunk and 0.92.
• Meshes do not resize automatically when a shape is resized. Meshes can be resized to the bounding box of a shape using the resize button in the Mesh-tool tool-bar (geometric box for fill, visual box for stroke).

Corner Operations

Ctrl-A

Select all corner nodes.

Alt-B

Toggle selected patch sides between linear and curve. (Select both corner nodes of side to select side.) (Also available via button in menu bar.)

Alt-C

Attempt to convert selected sides into elliptical arcs by changing the length of the Bezier handles. (Also available via button in menu bar.)

Alt-K

Sample colors underneath mesh at corner nodes. For nodes at edge of mesh, move sample point inside mesh. (Also available via button in menu bar. Useful for vectorizing a photo.)

Experimental features:

Alt-G

Toggle on/off tensor points for selected patches. (Select all four corner nodes of a patch to select patch.) Tensor points are not part of SVG 2 meshes.

Alt-J

Attempt to smooth color transition around a corner by changing length of Bezier handles. This needs lots of work to make it truly useful and is probably not so useful now there is bicubic smoothing.

Shift-I

Subdivide mesh between two selected nodes

Smoothing

Coons Mesh Patches use bilinear interpolation for the color profile. This leads to abrupt changes in the derivatives of the colors at patch boundaries which the human eye is very sensitive (see Mach Banding).

To smooth the boundaries, select "Bicubic" smoothing. This uses Bicubic Interpolation.

Smoothing is implemented currently in Inkscape by splitting each 'normal' patch into an eight by eight array of patches where the corner nodes of each sub-patch are set using interpolation and then rendering the sub-patches with normal mesh patches. There is some evidence that this is how smoothing is implemented in Illustrator and CorelDraw.

Syntax

The SVG 2 mesh syntax has evolved:

• <meshGradient> → <mesh> → <meshgradient>
• <meshRow> → <meshrow>
• <meshPatch> → <meshpatch>

The main change was made to avoid using CamelCase which would require browsers to manually adjust their parsers (which are normally case insensitive). <mesh> was changed to <meshgradient> in order that <mesh> can be used for a shape that automatically generates a path that takes the shape of the mesh gradient outline. The latest 0.92.x and trunk should be able to read meshes generated with older syntax. One can also manually update drawings by editing them in a plain text editor.