w3.org › w3.org - www-svg

fancy lines

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

11 messages Options

Brenton Chapin

fancy lines

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.

Another idea was <tspan dy="-1"> and <tspan dy="1"> for a double line, except tspan only works on text.

Meantime, what does work for a double line is drawing a thin line in the background color on top of a thick line.

--
http://brentonchapin.dyndns.info

Tavmjong Bah-2

Re: fancy lines

On Fri, 2013-01-04 at 00:45 -0600, 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?

Not at the moment, hopefully in SVG 2.

> 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 can be used for strokes but they probably won't do what you
want to do since the pattern will not be warped to follow the path.

> Another idea was <tspan dy="-1"> and <tspan dy="1"> for a double line,
> except tspan only works on text.
>
> Meantime, what does work for a double line is drawing a thin line in
> the background color on top of a thick line.

This is the best way at the moment. If you define a path without any
styling and then reference it with the <use> element multiple times, you
can build up more complex paths that will automatically adapt if the
referenced path is changed. This is essentially what is described in the
context of Inkscape at the bottom of:

http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Attributes-Stroke.html#Attributes-Stroke-Complex

Inkscape also has a number of ways of putting patterns along a path
which can give you a tapered or wavy line by replacing a simple path
with a more complex path.

Tav

Dr. Olaf Hoffmann

Re: fancy lines

In reply to this post by Brenton Chapin

Hello,

in previous discussions about implementations and underlying libraries
it turned out, that stroke-dasharray is only defined in SVG to be a pattern
along the stroke, but unfortunately it is not implemented as such a pattern,
just something like subpaths, what restricts the usability of stroke-dasharray
dramatically and increases the number or reasons for bugs and annoying
behaviour in viewers. And there are more problems with stroke-dasharray,
if one has corners and spikes in the path or more than one subpath.
Therefore in practice stroke-dasharray today is only for very basic use
cases, if one does not care about details.

On the other hand, if you apply a pattern defined by a pattern element
to a stroke, it works in the same way as for fill - therefore the pattern
is not warped along the pace of the stroke - if you assumed this - it has
the same alignment as for a filled area.
Example with pattern for fill and stroke:
http://upload.wikimedia.org/wikibooks/de/1/13/SVGpattern01.svg

If you need only a fragment of the stroke perpendicular to the pace
of the stroke, you can get arbitrary fragments using clipping and masking,
using the same path data (or the inverse path data, switching
inside/outside) with different stroke-width as mask or clip-path.

Maybe in the future, new marker features from the SVG2 draft
may provide more useful methods to get some pattern along the
stroke:
http://www.w3.org/TR/SVG2/painting.html#RepeatingMarkers

Olaf

Doug Schepers-3

Re: fancy lines

In reply to this post by Brenton Chapin

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

Rik Cabanier-2

Re: fancy lines

In reply to this post by Brenton Chapin

A couple of weeks ago, I asked if there was ever a request for border brushes. [1]

Basically, you draw a pattern cell and this cell is distorted along the curve. The cell is either stretched or tiled (like CSS border images)

In your case, the cell would contain a double line or one wave.

Rik

1: http://lists.w3.org/Archives/Public/www-svg/2012Dec/0043.html

On Thu, Jan 3, 2013 at 10:45 PM, Brenton Chapin <[hidden email]> 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.

Another idea was <tspan dy="-1"> and <tspan dy="1"> for a double line, except tspan only works on text.

Meantime, what does work for a double line is drawing a thin line in the background color on top of a thick line.

--
http://brentonchapin.dyndns.info

David Dailey

RE: fancy lines

In reply to this post by Doug Schepers-3

Actually, we do have a proposal. It is called <replicate>. See some of Israel Eisenberg's examples.

Cheers
David

-----Original Message-----
From: Doug Schepers [mailto:[hidden email]]
Sent: Saturday, January 05, 2013 2:30 PM
To: Brenton Chapin
Cc: [hidden email]
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

Doug Schepers-3

Re: fancy lines

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:[hidden email]] Sent: Saturday, January 05, 2013 2:30 PM To:
> Brenton Chapin Cc: [hidden email] 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
>
>
>
>

Doug Schepers-3

Re: fancy lines

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:
*
http://vector.tutsplus.com/tutorials/tools-tips/illustrator-cs5-variable-width-stroke-tool-gestural-sketches-and-digital-inking/
*
http://dsmy2muqb7t4m.cloudfront.net/tuts/000-2011/403-variable-width-2/variable_width_part2_0.jpg
*
http://www.adobe.com/products/illustrator/features._sl_id-contentfilter_sl_types%2Bof%2Bwork_sl_for%2Bdesign.html
*
http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/12.png
*
http://us.123rf.com/400wm/400/400/cobaltmoon/cobaltmoon0705/cobaltmoon070500002/979444-grey-brush-stroke-cat-on-black-background.jpg

Stroke gradients:
* along a stroke:
http://images.macworld.com/images/article/2012/06/gradient20strokes-283463.png
* across a stroke (neon effect):
**
http://images.macworld.com/images/article/2012/06/gradient20strokes20glitch-283458.png
**
http://www.astutegraphics.com/blog/how-to-apply-a-gradient-fill-to-strokes-in-adobe-illustrator-cs5-and-earlier/

Pattern along a stroke:
*
http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/14.png
*
http://www.technicalcommunicationcenter.com/wp-content/uploads/2009/03/ink-4.jpg
*
http://coreldraw.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.ImageFileViewer/CommunityServer.Discussions.Components.Files.22/8015.BlendTires.gif_2D00_680x1000.png
* http://www.hpc.ncep.noaa.gov/html/fntcodes2.shtml
*
http://blogs.roanoke.com/weatherjournal/files/2011/10/weathermapSunAM1031.gif
*
http://www.dnr.state.oh.us/LinkClick.aspx?fileticket=N6dtCPYOd5I%3d&tabid=21033
*
http://2.bp.blogspot.com/_u1JniawTeJ4/TM-FjXM-RvI/AAAAAAAAAGs/2gthrP-2yXQ/s1600/map-symbol-legend.jpg
*
http://web.williams.edu/Biology/Faculty_Staff/hwilliams/Orienteering/legend.html
* http://www.balloontales.com/tips/dashed/index.html
*
http://www.reneepearson.com/rpblog/wordpress/wp-content/uploads/2012/05/coyle-scalloped-border.png

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
*
http://blog.rolandtoth.hu/post/33156150031/fake-indesign-zig-zag-stroke-style

Distorted brush:
* http://www.flickr.com/photos/bravosixninerdelta/7641888492/
*
http://www.masterfile.com/stock-photography/image/400-04913735/vector-set-of-grunge-curves-strokes-dry-brush-effect
* 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.

Regards-
-Doug

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:[hidden email]] Sent: Saturday, January 05, 2013 2:30 PM To:
>> Brenton Chapin Cc: [hidden email] 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
>>
>>
>>
>>
>
>

Dirk Schulze-3

Re: fancy lines

Awesome list! We should have a session on the F2F about these kind of strokes. Your separation is reasonable. The "pattern along a path" is mainly the "brush" proposal from Rik.

We would need to check how some of these new "paint servers" could be used to fill a shape. We never made an distinction between fill and stroke in the past.

Greetings,
Dirk

Sent from my iPhone

On Jan 6, 2013, at 12:24 AM, "Doug Schepers" <[hidden email]> wrote:

> 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:
> *
> http://vector.tutsplus.com/tutorials/tools-tips/illustrator-cs5-variable-width-stroke-tool-gestural-sketches-and-digital-inking/
> *
> http://dsmy2muqb7t4m.cloudfront.net/tuts/000-2011/403-variable-width-2/variable_width_part2_0.jpg
> *
> http://www.adobe.com/products/illustrator/features._sl_id-contentfilter_sl_types%2Bof%2Bwork_sl_for%2Bdesign.html
> *
> http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/12.png
> *
> http://us.123rf.com/400wm/400/400/cobaltmoon/cobaltmoon0705/cobaltmoon070500002/979444-grey-brush-stroke-cat-on-black-background.jpg
>
> Stroke gradients:
> * along a stroke:
> http://images.macworld.com/images/article/2012/06/gradient20strokes-283463.png
> * across a stroke (neon effect):
> **
> http://images.macworld.com/images/article/2012/06/gradient20strokes20glitch-283458.png
> **
> http://www.astutegraphics.com/blog/how-to-apply-a-gradient-fill-to-strokes-in-adobe-illustrator-cs5-and-earlier/
>
> Pattern along a stroke:
> *
> http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/14.png
> *
> http://www.technicalcommunicationcenter.com/wp-content/uploads/2009/03/ink-4.jpg
> *
> http://coreldraw.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.ImageFileViewer/CommunityServer.Discussions.Components.Files.22/8015.BlendTires.gif_2D00_680x1000.png
> * http://www.hpc.ncep.noaa.gov/html/fntcodes2.shtml
> *
> http://blogs.roanoke.com/weatherjournal/files/2011/10/weathermapSunAM1031.gif
> *
> http://www.dnr.state.oh.us/LinkClick.aspx?fileticket=N6dtCPYOd5I%3d&tabid=21033
> *
> http://2.bp.blogspot.com/_u1JniawTeJ4/TM-FjXM-RvI/AAAAAAAAAGs/2gthrP-2yXQ/s1600/map-symbol-legend.jpg
> *
> http://web.williams.edu/Biology/Faculty_Staff/hwilliams/Orienteering/legend.html
> * http://www.balloontales.com/tips/dashed/index.html
> *
> http://www.reneepearson.com/rpblog/wordpress/wp-content/uploads/2012/05/coyle-scalloped-border.png
>
> 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
> *
> http://blog.rolandtoth.hu/post/33156150031/fake-indesign-zig-zag-stroke-style
>
> Distorted brush:
> * http://www.flickr.com/photos/bravosixninerdelta/7641888492/
> *
> http://www.masterfile.com/stock-photography/image/400-04913735/vector-set-of-grunge-curves-strokes-dry-brush-effect
> * 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.
>
> Regards-
> -Doug
>
> 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:[hidden email]] Sent: Saturday, January 05, 2013 2:30 PM To:
>>> Brenton Chapin Cc: [hidden email] 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
>>>
>>>
>>>
>>>
>>
>>
>
>
>

Brian Birtles-2

Re: fancy lines

(2013/01/07 0:27), Dirk Schulze wrote:
> Awesome list! We should have a session on the F2F about these kind of strokes.

Added:
http://www.w3.org/Graphics/SVG/WG/wiki/F2F/Sydney_2013/Agenda_proposals

Rik Cabanier-2

Re: fancy lines

In reply to this post by Dirk Schulze-3

On Sun, Jan 6, 2013 at 7:27 AM, Dirk Schulze <[hidden email]> wrote:

Awesome list! We should have a session on the F2F about these kind of strokes. Your separation is reasonable. The "pattern along a path" is mainly the "brush" proposal from Rik.

Yes,

the more simple border effects can be done with the border brush I proposed.

Variable width strokes is something that we can add too. I would be worried if this can be implemented reliably since it is a fairly hard problem. If there's interest, I can see how we defined them internally so we can extrapolate markup. (It looks like we define a set of stroke widths along the path)

The 'bristle' brush examples would be really hard to implement or create markup for. They are also very slow and memory intensive so maybe best tackled later.

We would need to check how some of these new "paint servers" could be used to fill a shape. We never made an distinction between fill and stroke in the past.

They're still strokes so none of the fill rules changes.

The path is filled like before but when the stroke is calculated on the path, you get all these fancy effects.

Greetings,
Dirk

Sent from my iPhone

On Jan 6, 2013, at 12:24 AM, "Doug Schepers" <[hidden email]> wrote:

> 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:
> *
> http://vector.tutsplus.com/tutorials/tools-tips/illustrator-cs5-variable-width-stroke-tool-gestural-sketches-and-digital-inking/
> *
> http://dsmy2muqb7t4m.cloudfront.net/tuts/000-2011/403-variable-width-2/variable_width_part2_0.jpg
> *
> http://www.adobe.com/products/illustrator/features._sl_id-contentfilter_sl_types%2Bof%2Bwork_sl_for%2Bdesign.html
> *
> http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/12.png
> *
> http://us.123rf.com/400wm/400/400/cobaltmoon/cobaltmoon0705/cobaltmoon070500002/979444-grey-brush-stroke-cat-on-black-background.jpg
>
> Stroke gradients:
> * along a stroke:
> http://images.macworld.com/images/article/2012/06/gradient20strokes-283463.png
> * across a stroke (neon effect):
> **
> http://images.macworld.com/images/article/2012/06/gradient20strokes20glitch-283458.png
> **
> http://www.astutegraphics.com/blog/how-to-apply-a-gradient-fill-to-strokes-in-adobe-illustrator-cs5-and-earlier/
>
> Pattern along a stroke:
> *
> http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/14.png
> *
> http://www.technicalcommunicationcenter.com/wp-content/uploads/2009/03/ink-4.jpg
> *
> http://coreldraw.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.ImageFileViewer/CommunityServer.Discussions.Components.Files.22/8015.BlendTires.gif_2D00_680x1000.png
> * http://www.hpc.ncep.noaa.gov/html/fntcodes2.shtml
> *
> http://blogs.roanoke.com/weatherjournal/files/2011/10/weathermapSunAM1031.gif
> *
> http://www.dnr.state.oh.us/LinkClick.aspx?fileticket=N6dtCPYOd5I%3d&tabid=21033
> *
> http://2.bp.blogspot.com/_u1JniawTeJ4/TM-FjXM-RvI/AAAAAAAAAGs/2gthrP-2yXQ/s1600/map-symbol-legend.jpg
> *
> http://web.williams.edu/Biology/Faculty_Staff/hwilliams/Orienteering/legend.html
> * http://www.balloontales.com/tips/dashed/index.html
> *
> http://www.reneepearson.com/rpblog/wordpress/wp-content/uploads/2012/05/coyle-scalloped-border.png
>
> 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
> *
> http://blog.rolandtoth.hu/post/33156150031/fake-indesign-zig-zag-stroke-style
>
> Distorted brush:
> * http://www.flickr.com/photos/bravosixninerdelta/7641888492/
> *
> http://www.masterfile.com/stock-photography/image/400-04913735/vector-set-of-grunge-curves-strokes-dry-brush-effect
> * 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.
>
> Regards-
> -Doug
>
> 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:[hidden email]] Sent: Saturday, January 05, 2013 2:30 PM To:
>>> Brenton Chapin Cc: [hidden email] 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
>>>
>>>
>>>
>>>
>>
>>
>
>
>