SVG Advanced Gradient Requirements

W3C Working Draft 9 December 2011

This version:
Latest version:
Anthony Grasso, Canon Inc. <anthony.grasso@cisra.canon.com.au>
Cyril Concolato, Canon Inc. <cyril.concolato@cisra.canon.com.au>


This document lists the design principles and requirements for the creation of an SVG specification related to Advanced Gradients.

Status of this Document

This is a W3C Working Draft for review by W3C Members and other interested parties. It is a draft document and may be updated, replaced or made obsolete by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C Recommendations and other technical documents, including Working Drafts and Notes, can be found at http://www.w3.org/TR/.

This is the first release of the SVG Advanced Gradient Requirements. It is expected that this document will progress through a number of working drafts, including "Last Call", before being published in final form.

This document was developed by the Scalable Vector Graphics (SVG) working group as part of the W3C Graphics Activity. The authors of this document are the SVG Working Group members.

Feedback on this document should be sent to the public mailing list of the SVG Working Group (list archives). To subscribe, send an email to www-svg-request@w3.org with the word subscribe in the subject line.

The latest information regarding patent disclosures related to this document is available on the Web. As of this publication, the SVG Working Group are not aware of any royalty-bearing patents they believe to be essential to SVG.

This section represents the status of this document at the time this version was published. It will become out dated if and when a new version is published. The latest status is maintained at the W3C.


1 Introduction

The SVG specification is a W3C recommendation that describes two-dimensional graphics in XML. There are currently two core SVG Recommendations; SVG 1.1 and SVG Tiny 1.2. SVG 1.1 was initially designed as a document format for print and web content publication, and as such supports many common graphical features for print and screen display. Similarly, SVG Tiny 1.2 was designed primarily for display of content for the web on mobile devices, and as such supports a smaller subset of graphical features. Industry, developer and community feedback has suggested a desire to extend some of the features available in SVG, in particular the gradient paint servers available to authors.

Currently the SVG 1.1 specification defines two types of gradient paint servers; Linear and Radial. Both gradient types allow a content author to define colour stops along a single gradient vector which produces a blend fill that may be used to paint graphical objects and text. Such gradients whilst being able to produce vibrant colours, are limited to a straight line and are thus unable to produce complex gradient effects. There exists a need to define a gradient fill that allows designers to produce more complex life-like blends.

In response, the SVG Working Group has begun an investigation to develop a module to extend the gradient fill capabilities currently available in SVG. The current feeling within the SVG Working Group is that the advanced gradients will be a set of content requirements and conformance criteria that allow new gradient types to be defined to fill an object. It is very likely that there will be a set of new language features proposed which are required for the module. It is expected then, that some of these new features will be become part of the core SVG language and other modules that are built from SVG.

2 Terminology

The following key words and phrases used throughout this document are defined here for clarity. The terms Must, Should, and May are used to specify the extent to which an item is a requirement for the SVG working group in defining SVG. These recommendations should not be mistaken as a guide to implementers.

  1. 'Must' means that the item is an absolute requirement.
  2. 'Should' means that there may exist valid reasons in particular circumstances to ignore the item, but the full implications must be understood and carefully weighed before choosing a different course.
  3. 'May' means that item will be considered, but further examination is needed to determine if the item should be treated as a requirement.
  4. 'SVG' refers to SVG in general without reference to any version or profile.
  5. 'SVG 1.0' refers to the original SVG specification.
  6. 'SVG 1.1' refers to the 2nd edition version of the specification following the original version of SVG 1.0.
  7. 'SVG 2' refers to the next core release of SVG.
  8. 'SVG Advanced Gradients' refers to SVG Advanced Gradients, an SVG specification for Advanced Gradients.

3 Usage Scenarios

Advanced gradients specify colour variation in an image which blends smoothly to colours defined either along a curved path or at points distributed over two dimensions. The following usage scenarios illustrate some of the ways in which SVG Advanced Gradients might be used for various applications.

Pseudo 3D Advanced gradients could be used to produce advanced lighting effects that follow odd shaped surfaces produce pseudo 3D effects.

Naturalistic Images Advanced gradients could be used to produce a compact representation of realistic images such as skin tone.

Artistic Effects Advanced gradients could be used to produce fills that follow curved contours.

Compact representation A key reason for using advanced gradient technologies is to produce an increased range of gradient effects, where the file size of an image containing those gradient effects is much smaller than the file size of a similar bitmap image.

4 Special Considerations for Advanced Gradients

Memory and processor requirements Due to the complex effects that advanced gradients can produce, the feature may require significant memory and processing resources.

Implementation commitments Advanced gradients will provide the ability for the author to produce colour rich complex gradient fills. To support advanced gradients, implementations may need to add new algorithms to produce the correct gradient results. It is expected that specific details of the rendering algorithm will need to be defined; this may include the necessary steps an implementation will need to perform to implement the algorithm. Advanced gradients must be consistent with SVG's rendering and animation model to allow ease of integration with existing SVG implementations.

Ease of authoring To ensure consistency with SVG, advanced gradients should consider adopting existing SVG gradient features where applicable and extending the existing SVG gradient syntax where applicable. Additionally, the syntax structure of advanced gradients should be defined such that the content can be read and hand-authored with relative ease.

5 Requirements

  1. General
    1. SVG Advanced Gradients must be a separate module to the core profiles SVG Tiny 1.2 and SVG Full 1.1.
    2. Conformance criteria for SVG Advanced Gradients must be produced. The criteria should be separated into sections relevant to particular application types (e.g. SVG files/document fragments, SVG generators, SVG viewers, etc.)
    3. Software or documents must pass the relevant criteria to be able to claim conformance to the particular application type.
    4. A conformance test suite must be developed for SVG Advanced Gradients. The test suite must be made publicly available. Conformance test suites for other uses of SVG Advanced Gradients (e.g. prepress guidelines) may be developed.
    5. A specification referencing SVG Advanced Gradients must declare if animations applies when an 'advanced gradient' chain is in its scope.
    6. The SVG Advanced Gradients algorithm must be suitable for implementation in both software and hardware.
    7. The appearance of rendered SVG Advanced Gradients should be essentially independent of rendering resolution / zoom.
  2. Designer
    1. SVG Advanced Gradients must allow the ability to control how the colour diffuses or spreads out.
    2. SVG Advanced Gradients must allow the ability to define colour values at points.
    3. SVG Advanced Gradients should allow smooth color interpolation across points.
    4. SVG Advanced Gradients must allow the ability to control colour transparency in the same way colour can be controlled.
    5. SVG Advanced Gradients should use edges as the visual representation for authoring, for efficiency of graphical editing operations by designers.
  3. Scripting
    1. A dynamic SVG Advanced Gradient viewer must support the SVG Advanced Gradient scripting feature set.
  4. Animation
    1. A dynamic SVG Advanced Gradient viewer must support animation of all properties listed as animatable.
  5. Syntax
    1. SVG Advanced Gradients must use a syntax that is compact.
    2. SVG Advanced Gradients must use a syntax that can be easily authored by hand.
    3. SVG Advanced Gradients must extend the existing SVG Gradient syntax where applicable.
  6. Existing Specifications
    1. SVG Advanced Gradients must make use of existing SVG Gradient features where applicable.
    2. SVG Advanced Gradients must strive to achieve and maintain CSS compatibility where possible.

6 Existing Technologies

6.1 Types of Advanced Gradients

Free-Form Gouraud-shaded Triangle Meshes
Defines a shading area entirely of triangles. Mesh points are triangle vertices. Each vertex can be individually assigned a colour. Each new triangle added requires only one new point and one new colour. Commonly used to represent shaded three-dimensional shapes.
Lattice-Form Gouraud-shaded Triangle Meshes
Triangles are organised into rows. The rows do not need to be geometrically linear. Similar to Free-Form Gouraud-shaded Triangle Meshes.
Coons Patch Meshes
The shading area is covered by quadrilateral patches, each defined by four cubic Bézier curves. Each of the four corner points of a Coons patch can be individually assigned a colour. The Bézier curves can be individually manipulated using control points. There are twelve control points per patch, three for each patch vertex.
Tensor-product Patch Meshes
Coons patch meshes with an additional four internal control points per patch giving a total of sixteen control points. Like Coons patches each of the four corner points can be individually assigned a colour. Coons Patches are a special case of Tensor-product Patch Meshes where the four internal points are defined by the boundary curves.
Tensor-product Patch Meshes with color derivatives
Tensor-product Patch Meshes with 8 additional values per color component (2 values per patch corner) enabling 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. See related paper.
Diffusion Curves
Defined by Bézier curves which may or may not connect to each other. Each curve contains colour points at either end on both sides at a minimum. Additional colour points may be placed along the curve on either side of the curve. The smoothness variation between either side of the curve can be varied using a blur control value.

6.2 Authoring Tools

Adobe Illustrator

The Gradient Mesh tool in Adobe Illustrator allows an author to create gradients inside any shape. Gradient Meshes are maintained in the document and saved in a vector form allowing them to remain scalable and editable throughout the design process. The tool allows an author to lay patches on an object using a grid (mesh). When a mesh is applied to an object, the object is converted to a mesh object. Illustrator allows mesh lines to be added and removed. When a new mesh point is added to an already existing mesh line, a perpendicular line is added which joins the perimeters of the object and crosses the existing mesh line. When a new mesh point is added to an object patch, both vertical and horizontal mesh lines that join the perimeters of the object are created. Where mesh lines cross with other mesh lines or object perimeters, new mesh points are created. When new mesh lines are created new patches are formed as well.


The Mesh Fill in CorelDraw is very similar to the Gradient Mesh tool in Adobe Illustrator. The Mesh Fill allows an author to apply patches to objects or a single path. Similar to Adobe Illustrator, the Mesh Fill feature allows an author to define patches using a grid. Placing a grid on an object converts the object to a mesh fill object. CorelDraw allows vertical or horizontal grid lines to be added or removed. Nodes are placed where grid lines join or intersect.

7 References

SVG 1.1
Scalable Vector Graphics (SVG) 1.1 Specification, Jon Ferraiolo, Jun Fujisawa, Dean Jackson, editors, W3C, 14 January 2003 (Recommendation). See http://www.w3.org/TR/SVG11/
SVG 1.1/1.2/2 Requirements
SVG 1.1/1.2/2.0 Requirements Document, Dean Jackson, editor, W3C, 22 April 2002. See http://www.w3.org/TR/SVG2Reqs/
Mobile SVG Profiles
Mobile SVG Profiles: SVG Tiny and SVG Basic, Tolga Capin, editor, W3C, 14 January 2003 (Recommendation). See http://www.w3.org/TR/SVGMobile
Coons Patch Mesh Gradients in SVG
Coons Patches Mesh Gradients in SVG, Tavmjong Bah, editor, November 2010. See http://tavmjong.free.fr/SVG/MESH/Mesh.html
Adobe Tutorials (website)
Achieve photorealism with Gradient Mesh, Adobe Systems Incorporated, 2011. See http://www.adobe.com/designcenter/tutorials/gradientmesh/
Corel (website)
Mastering CorelDraw's Mesh Fills, Steve Bain, author, 2006. See http://www.corel.com/servlet/Satellite?pagename=Corel2/Products/Content&pid=1047022690654&cid=1047022730336
Microsoft Paper (website)
Image Vectorization using Optimized Gradient Meshes, Jian Sun, Lin Liang, Fang Wen, and Heung-Yeung Shum, July 2007. See http://research.microsoft.com/apps/pubs/default.aspx?id=69442

7 Author List

The authors of this specification are the participants of the W3C SVG Working Group.