Feature Request: Variable Stroke Width

Hi-

Stefan Goessner's recent post suggesting a "strokeWidthDashArray" has
reminded me of a feature I've longed for in SVG. Maybe there's some
technical reason it can't be done, but I thought I'd propose it anyway.

I've been writing an SVG graphics application for doing art, and I have
noticed what I think is a deficit in the Spec: variable-width strokes. In
drawing a line with a pencil or brush, 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.

Perhaps this has been discussed before, but I wasn't able to find it in the
archives, so I'll lay out my idea.

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
corners. 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).

I have put together a page that illustrates this idea at:
http://www.schepers.cc/differentstrokes.html

In addition to being more intuitve 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 I mentioned before, though, there may be some technical reason that this
is more complex than I thought. I'll welcome any feedback or reactions to
this idea.

Thanks for hearing me out-
-Doug Schepers

Received on Tuesday, 23 April 2002 07:49:02 UTC