Schepers.cc

Diff'rent Strokes

I've been writing an SVG graphics application for doing art, and I have noticed what I think is a deficit in the W3C Specification: variable-width strokes. In drawing a line with a pencil or brush (or with an increasingly inexpensive graphics tablet), an artist can make great utility of tapering a line. I realize that this can be simulated by the path element, but that seems an unnecessarily complex solution.

The Scalable Vector Graphics Spec is great, and I love the language. The people who made the Spec know far more about graphics than I imagine I ever will. So perhaps this has been discussed before and found unworkable, but I'll lay out my idea anyway.

I would like to have stroke-widths (that is to say, the width of the line that defines the outside of a shape) of variable size on a single shape.

Since stroke-width is a style characteristic, we'll need to keep within the style attribute for consistency; also for consistency, we should reuse any format conventions as much as possible. Therefore, I have modelled this on “stroke-dasharray”. Currently, “stroke-width” is a single number; I propose extending this to a list. Each entry in a list is the linewidth for a control point (details below).

I would expect the following behaviors for the different basic shapes:

• <polyline> and <polygon>
  The control points for the <polyline> and <polygon> elements are the coordinates pairs defined in the points attribute. If the number of arguments for “stroke-width” is greater than the number of control points, any additional arguments are ignored; vice versa, and the last argument applies to all remaining control points.
• <rect>
  The control points for a <rect> element are the coordinates of the four Floaters. In the case of rounded rectangles, the control point would be the midpoint of the curve. The number of arguments for “stroke-width” is handled as for <polyline> and <polygon>.


• <path>
  The control points for a <path> element are the vertices (i.e. those places at which the path changes); these are the locations on the path where <marker> elements are instantiated, so this builds on existing parameters (already implemented in most viewers). The number of arguments for “stroke-width” is handled as for <polyline> and <polygon>.


• <line>
  The primary control points for a <line> element are the coordinates of the endpoints. However, additional control points --specified by more than two arguments for stroke-width-- would be evenly placed along the length of the line. For example, for a horizontal line with a length of 30 and “stroke-width='2,10,5”, the line would start at “stroke-width” of 2, expand to 30 at its midpoint, and taper off to 5 at its terminus (x2,y2).
• <circle> and <ellipse>
  The control points for the <circle> and <ellipse> elements would be evenly distributed around their circumferences, as with a <line> element. The start point would be at the top --the coordinates (x=cx, y=cy-r). A circle with “stroke-width='2,10'” would be thin at the top and thick at the bottom; “stroke-width='2,10,2,10'” would show a circle with thin top and bottom and thick sides (like the “o” in a Times New Roman font).

In addition to being more intuitive for many people, this could significantly decrease file sizes for certain types of SVGs, and provide some effects that might be difficult to do with the current syntax, as with the simple examples above.

Obviously, these are meager offerings, and I don't purport to be an artist. But when I look at a lovely line-drawing, and admire the sweep of a curve or the subtlety of a tapered line, I've wondered to myself, “How could someone do that in SVG?” I know many artists, too, and when I've discussed SVG with them, many of them have asked about this feature, which has been sorely lacking in previous vector graphics formats. I'd like to think maybe this is a workable solution.

I have some other ideas, too, that complicate the idea. Various style properties could modify the stroke-width array, so as to allow the stroke to be different widths on either side of the definition line. But I'll not muddy the waters with that.

One thing I will mention is that I think this may have great potential if used with SVGFonts. I've been playing with them a bit lately, and intend to create a free SVGFont repository. The variable-width stroke seems a natural fit with character representation. I have recently seen an interesting paper online that suggests the same thing (in 1993... nothing new under the sun ;), using splines: “Variable width splines: a possible font representation?”.

Kevin Lindsey, SVG luminary, has run with his idea in a very promising and exciting way. He has made code modules to simulate different approaches to how this might be accomplished, and created a custom namespace for it. He has a put up a example page with illustrations at KevLinDev.

Kevin also noted that this might be covered under the SVG 1.1/1.2/2.0 Requirements, section 4.2.8.1:

SVG should support definable stroke styles. Possible examples of defined styles are wave strokes, strokes with multiple lines and the brushes that are supported by many illustration packages. [SVG 2.0]

We also discussed another interesting idea, peripherally related: Creature House's Skeletal Strokes. Rather than define only a particular set of instructions for stroke-width, one could use a shape as a framework for more complex shapes, aiding in animation and other effects. This would be similar to SVG's <textpath> and possibly <use> elements.

As I mentioned before, though, there may be some technical reason that this is more complex than I thought, despite Kevin's encouraging results. Still to be done is experimentation with polygons other than <rect>s, and with <line>s and <path>s. To facilitate this, I intend --with Kevin's generous permission-- to incorporate this into my soon-to-be-released online graphical SVG editor (SVG-Whiz!), so the SVG community and I can kick the tires. I'll welcome any feedback or reactions to this idea.

ⓢ