W3C home > Mailing lists > Public > www-svg@w3.org > January 2013

Re: fancy lines

From: Doug Schepers <schepers@w3.org>
Date: Sun, 06 Jan 2013 03:22:57 -0500
Message-ID: <50E93461.8070201@w3.org>
To: David Dailey <ddailey@zoominternet.net>
CC: 'Brenton Chapin' <bzipitidoo@gmail.com>, www-svg@w3.org
Hi, folks-

To continue this thread, here are a few features of strokes that seem 
likely to be useful; it would be great to see some concrete proposals 
that address these.

Variable-stroke width:

Stroke gradients:
* along a stroke: 
* across a stroke (neon effect):

Pattern along a stroke:
* http://www.hpc.ncep.noaa.gov/html/fntcodes2.shtml
* http://www.balloontales.com/tips/dashed/index.html

Shaped strokes:
* http://indesignsecrets.com/follow-the-yellow-brick-road.php
* http://indesignsecrets.com/american-flag-stroke-style.php
* http://www.jhlabs.com/java/java2d/strokes/ZigzagStroke.jpg
* http://tpettit.best.vwh.net/adobe/zigzag_oval.gif
* http://tpettit.best.vwh.net/adobe/zigzag_squared2.gif
* http://images.crestock.com/4890000-4899999/4892123-xs.jpg

Compound styles:
* http://www.vektorgarten.de/img/tut/badge-change.gif
* http://www.yassinebentaieb.com/wp-content/uploads/2011/04/tut2_9.png

Distorted brush:
* http://www.flickr.com/photos/bravosixninerdelta/7641888492/
* http://image1.masterfile.com/em_w/04/09/56/400-04095653w.jpg
* http://image1.masterfile.com/em_w/04/09/56/400-04095650w.jpg
* http://qvectors.net/downloads/images/thumb/stroke_graphic_vector_thumb.jpg

Other types might include multiple strokes of different width or style 
(curvy, zigzag, dotted, dashed, etc.), multiple different strokes 
styles, multi-colored strokes, and so on.

Rik's brush proposal may address some of these.


On 1/5/13 6:45 PM, Doug Schepers wrote:
> Hi, David-
> On 1/5/13 6:17 PM, David Dailey wrote:
>> Actually, we do have a proposal. It is called <replicate>. See some
>> of Israel Eisenberg's examples.
> If you want to propose <replicate> as a versatile, comprehensive, and
> compact syntax for various stroke effects, work up some examples of
> stroke effects that you think are useful / attractive, and how you would
> accomplish them using <replicate>.
> My impression of <replicate> is that is has some cool effects, but that
> using it is rather idiosyncratic and only works for certain effects, but
> I'm open to being proven wrong.
> Show us how it addresses this specific use case, that would be a
> compelling argument for inclusion.
> Regards-
> -Doug
>> Cheers David
>> -----Original Message----- From: Doug Schepers
>> [mailto:schepers@w3.org] Sent: Saturday, January 05, 2013 2:30 PM To:
>> Brenton Chapin Cc: www-svg@w3.org Subject: Re: fancy lines
>> Hi, Brenton-
>> On 1/4/13 1:45 AM, Brenton Chapin wrote:
>>> Greetings list.  I dabble with SVG and am still trying to figure
>>> out what it can do.
>>> Stroke-dasharray allows the drawing of many kinds of dashed lines.
>>> Is there any way to draw such things as a double line, tapered
>>> line, or a wavy line, with a single use of a path or line element?
>>> The SVG documentation says patterns can be used for strokes, but I
>>> haven't been able to get that to work.  There's an example of a
>>> pattern used for a fill, but no example for a stroke.
>> Patterns on strokes in SVG 1.1 don't really do what you'd like them
>> to, just like gradients on strokes; they don't follow the shape of
>> the stroke, but just serve as a static background.
>> In SVG2, we do plan to provide new ways to stroke shapes, including
>> double lines or stroke-outside-shape, using "vector effects", and
>> maybe to modulate the stroke itself for tapered or wavy lines, though
>> we haven't yet got a solid syntax proposal for that (suggestions
>> welcome).
>>> Another idea was <tspan dy="-1"> and <tspan dy="1"> for a double
>>> line, except tspan only works on text.
>> You can also play with the <use> element here.
>>> Meantime, what does work for a double line is drawing a thin line
>>> in the background color on top of a thick line.
>> Yes, the <use> element makes this technique a bit easier [1].
>> Here's another place where an inverted clip-path would be handy, so
>> it would "cut through" the stroke shape to the underlying background,
>> rather than having to match the background (which is a bit brittle,
>> especially for transparent background). I hope to have that in SVG2.
>> [1] http://schepers.cc/svg/double-stroke2.svg
>> Regards- -Doug
Received on Sunday, 6 January 2013 08:23:14 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:54:40 UTC