This paper will focus upon recent investigations into the possibility of extending the SVG spec to include a <replicate> tag for the purposes of extending functionality into three primary areas: 1. richer classes of gradients, 2. extensions to new classes of patterns and 3. new types of 2.5 dimensional objects. The <replicate> tag (and allied tags like <replicateTransform> and <replicateMotion>) are seen as having a similar relationship to 2D space that <animate> and its cousins from the SMIL family have to time. That is, <replicate> can be used to perform declarative construction of clusters of related shapes.
The paper will present experiments and suggestions concerning plausible syntax, a proof-of-concept involving the implementation in JavaScript of some of these ideas, lots of visual examples to illustrate the power of such a construct, and speculation about how <replicate> might be implemented and how it might combine with other aspects of SVG like gradients, groups, animation, the DOM, and with other instances of <replicate> as in nesting.
Various discussions concerning extension of the class of gradients available to SVG have taken place over the years both within the SVG WG, at conferences, in discussion lists and in private conversations. A variety of approaches have been outlined varying from experiments with gradients that are neither linear nor radial, to proposed gradients that would behave like contour maps, to diffusion curves. All share a frustration with the current limited set and with the difficulty of extending those (even via script) to richer classes. Much of the current proposal is based on analogy to how SMIL allows declarative animation of objects over time. Let us allow declarative replication of objects over space.
SMIL enables objects to change attributes like opacity, color, size, shape and location over time. Suppose instead of changing the attributes of a single object, we were to superimpose freeze frames of those changes atop one another in the drawing space, This is what <replicate> is intended for. While we may vary several attributes at once of the same object using SMIL, and each of these attributes may have its own timing frequency, spatial replication requires drawing an object at certain intervals, hence requiring a synchronization and flattening of the temporal diversity. That is, while we might replicate and interpolate several attributes of any object as multiple snapshots of it are taken, all attributes will be present during each of those snapshots. Hence, rather than borrowing syntax from animate that would suggest:
<object>
<replicate attributeName="P" spatialfrequency="7" values="x,y,z"/>
<replicate attributeName="Q" spatialfrequency="12" values="a,b,c"/>
</object>
as it is done with the <animate> tag, the spatialfrequecy or repeatCount of snapshots will remain constant for all attributes being varied by the author. That is, the syntax of the examples, I have explored follows the following paradigm (resembling that of filters somewhat) instead:
<object>
<replicate repeatCount="12">
<replicateAttribute attributeName="P" values="x,y,z"/>
<replicateAttribute attributeName="Q" values="a,b,c"/>
</replicate>
</object>
That is, all attributes will be present during each snapshot made of the object.
I will present examples of replications of objects by varying their x and y positions, changing their colors, their sizes and shapes and show results of investigations of how these types of variations can interact with gradients, patterns, animations and filters.
Already, I have accumulated a good amount of evidence that this class of declarative drawing would indeed add considerable diverseness and richness to SVG. It will also be argued that because of the direct parallels to SMIL, a) many browsers will already have some of the relevant code base developed b) authors conversant with SMIL will find its acquisition easy c) that code written using such tags will be remarkable concise and succinct, and d) that development time for rich, complex and useful graphics may be shortened as a result.
Links:
