Mesh Gradients

This page documents Inkscape's experimental 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.

Enable

• Use a development build compiled with CPPFLAGS="-DWITH_MESH"

Or

• Enable by adding Alt-M 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:

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.

Edit

• Node Types
  • Diamond: Corner
  • Circle: Bezier handles
  • Square: Tensor handles (see below on how to enable/disable).
• Double click on path to divide row/column by two at that point (there is no reverse operation yet).
• Undo not fully implemented.

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.)

Alt-C

Attempt to convert selected sides into elliptical arcs by changing the length of the Bezier handles.

Alt-G

Toggle on/off tensor points for selected patches. (Select all four corner nodes of a patch to select patch.)

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.

Alt-K

Sample colors underneath mesh at corner nodes. For nodes at edge of mesh, move sample point inside mesh. (Useful for vectorizing a photo.)

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).

Experimental smoothing is included in trunk. Smoothing is not part of the SVG 2 standard (yet). Two different types of smoothing are implemented:

• Cubic Hermite Splines
• Bicubic Interpolation

Cubic Hermite splines does the interpolation in one direction at a time. Bicubic interpolation does the interpolation in both directions at the same time adding in cross-derivative terms.

Smoothing is implemented 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.

Smoothing type:

• None
• Default: Same as Smooth7.
• Cubic Hermite Splines
  • Smooth1: Derivatives zero at patch boundaries.
  • Smooth2: Catmul-Rom calculation of derivatives. Along edge double first/last point.
  • Smooth3: Catmul-Rom calculation of derivatives. Along edge reflect around first/last point.
  • Smooth4: Catmul-Rom calculation of derivatives. Parabolic profile for edge patches.
  • Smooth5: Same as Smooth4 but attempt to ensure local minima/maxima remain on patch boundaries.
• Bicubic interpolation
  • Smooth6: Catmul-Rom calculation of derivatives. Along edge reflect around first/last point.
  • Smooth7: Catmul-Rom calculation of derivatives. Parabolic profile for edge patches. Attemtp to ensure local minima/maxima remain on patch boundaries.

Next step is to replace Catmul-Rom derivative calculations by finite difference methods.