The current SVG standard 1.1 provides elements to define linear and radial gradients which allow to fill a region with a smooth transition of colors along a specified vector. In comparison to the PostScript language, these gradient variants are rather limited. PostScript supports seven different types of gradients including function-based shadings, Gouraud-shaded triangle meshes, and tensor-product patch meshes. Therefore, it’s not possible to map complex gradient definitions present in EPS files or PostScript specials to native SVG 1.1 constructs.
In order to realize these gradients in SVG, dvisvgm approximates them by filling the specified area with small monochromatic segments like in the following tensor-product and triangular patch examples with 10 and 30 segments per row, respectively:
The number of segments can be changed with option --grad-segments which defaults to 20. Increasing
the number leads to better, more realistic results but also increases the size of the SVG file as each
segment must be represented by a separate path element.
As you can see in the above examples, there are small visible white gaps between adjacent segments
although they touch seamlessly. This effect results from the anti-aliasing applied by the SVG renderer
to produce smooth segment contours which usually takes the background color into account. Option
--grad-overlap allows to remove the gaps. It tells dvisvgm to create bigger, overlapping segments
that extent into the region of their right and bottom neighbors. Since the latter are drawn on top of
the overlapping parts, the visible size of all segments keeps unchanged. The results look like these:
The recent version of dvisvgm supports the following types of PostScript gradient/shading types:
- free-form Gouraud-shaded triangle meshes (type 4)
- lattice-form Gouraud-shaded triangle meshes (type 5)
- Coons patch meshes (type 6)
- tensor-product patch meshes (type 7)