CiSRA Comments on Mesh Gradients in SVG

Author: Cyril Concolato

Introduction

As part of the requirements phase for SVG 2, the SVG WG is producing a document called: SVG Advanced Gradient Requirements. At the same time, the SVG WG has resolved on having "Mesh Gradients" in SVG 2. Tav has proposed a syntax based on Coons patches and here.

CiSRA believes that there is a need for some clarifications within the group and some modifications to the requirements document.

On the smoothness of gradients

"Gradient meshes" is understood at large as being what Adobe Illustrator (or to some extent Corel Draw) produces. As simple Google search should convince you. An interesting feature of Illustrator, when working with gradient meshes, is that it produces a smooth interpolation of the color across mesh points. The image below shows a mesh where all the outside mesh points are assigned the color 'black' and the center point is assigned the color 'white'.

In constrast, if we create the same mesh in Inkscape/Cairo, the result is different, as shown on the image below. In particular, the color is smoothly interpolated between the mesh points but not across. This is due to the nature of Coons patches mesh gradients, that use a bilinear interpolation of colors. It is not possible to represent what Illustrator displays with a mesh made of 4 Coons patches. Actually, Illustrator, when exporting to PDF will generate many patches to approximate the effect. It will also generate additional data to enable further editing of the gradient.

In some cases, Coons patch mesh gradients can produce smooth interpolation of colors across mesh points. For instance in Tav's example below, the sphere (center-top) example is smooth because the mesh is made up of degenerate Coons patches in each of which 2 of the patch vertices map to the same image point (the sphere light point) and because of the fact that all the other patch vertices have the same (red) color. The bilinear interpolation then produces smooth-curved, constant-color contours around the sphere light point. The problem highlighted above (lack of smooth interpolation across patch boundaries) can be seen on the conical gradients (e.g. see the cyan, magenta and yellow radial lines on the colored conical gradient and the light and dark radial lines on the monochrome conical gradient).

On the definition of Gradient Meshes

As Tav indicates it and as written in the requirements document, there are several types of gradient meshes:

Free-form Gourand-shaded triangle meshes. (Three control points, three colors; each new triangle requires one new point and one new color.)
Lattice-form Gourand-shaded triangle meshes. (Pseudo-rectangles with two triangles in each rectangle, organized by rows.)
Coons patch meshes. Quadrilateral defined by four cubic Bézier curves. (Twelve control points, four colors.)
Tensor-product patch meshes. Coons patch + four internal control points.

A good overview of Gradient Mesh technology is provided in the paper "Image Vectorization using Optimized Gradient Meshes" by Jian Sun, Lin Liang, Fang Wen, and Heung-Yeung Shum (Microsoft, 2007). They indicate that for each patch 8 additional values per color component (2 values per patch corner) are needed to enable smooth color interpolation across mesh points. These values are the color derivatives along the u and v axis. Illustrator and CorelDraw seem to compute them based on a cubic spline interpolation of the colors.

Proposed modifications to the requirements document

Following the above remarks, we propose the following changes:

clarify the resolution: SVG 2 will have Coons patch meshes. Decision on whether or not generic tensor-product patches with color derivatives can be made in the future.
add the following requirement: "2.3 SVG Advanced Gradients must/should allow smooth color interpolation across points"
add "Tensor-product patches with color derivatives" in the list of existing technologies enabling smooth interpolation of color across patch points.