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:

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

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.

Is this page a mess?
Web Standards shift like wind
Please upgrade browsers