Difference between revisions of "Mesh Gradients"

From Inkscape Wiki
Jump to navigation Jump to search
Line 1: Line 1:
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!).
+
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.'''
+
'''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 ==
 
== Enable ==
Line 21: Line 25:
 
To create a mesh:
 
To create a mesh:
  
 +
Either:
 
# Change to Mesh tool.
 
# Change to Mesh tool.
 
# Select mesh type (normal, conical).
 
# Select mesh type (normal, conical).
Line 27: Line 32:
 
# Select object to add mesh.
 
# Select object to add mesh.
 
# Click-drag inside object.
 
# Click-drag inside object.
 +
 +
Or:
 +
# Select object to add mesh.
 +
# 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 ==
 
== Edit ==
Line 35: Line 50:
 
** Square: Tensor handles (see below on how to enable/disable).
 
** 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).
 
* Double click on path to divide row/column by two at that point (there is no reverse operation yet).
* Undo not fully implemented.
+
* Undo should work in trunk an latest 0.92.x.
 +
* 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 ==
 
== Corner Operations ==
Line 41: Line 57:
 
;Ctrl-A: Select all corner nodes.
 
;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-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.)
  
;Alt-C: Attempt to convert selected sides into elliptical arcs by changing the length of the Bezier handles.
+
Experimental features:
  
;Alt-G: Toggle on/off tensor points for selected patches. (Select all four corner nodes of a patch to select patch.)
+
;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.
+
;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.
  
;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 ==
 
== Smoothing ==
Line 55: Line 74:
 
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 [https://en.wikipedia.org/wiki/Mach_bands Mach Banding]).
 
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 [https://en.wikipedia.org/wiki/Mach_bands 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:
+
To smooth the boundaries, select "Bicubic" smoothing. This uses
 
+
[https://en.wikipedia.org/wiki/Bicubic_interpolation Bicubic Interpolation].
* [https://en.wikipedia.org/wiki/Cubic_Hermite_spline Cubic Hermite Splines]
 
* [https://en.wikipedia.org/wiki/Bicubic_interpolation 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.
+
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.

Revision as of 14:08, 8 November 2016

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

  • 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

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).
  • Double click on path to divide row/column by two at that point (there is no reverse operation yet).
  • Undo should work in trunk an latest 0.92.x.
  • 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.


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.