Loading ...
Sorry, an error occurred while loading the content.

suggestion: stroke-transform attribute

Expand Messages
  • th_w@ymail.com
    Hi all, I read in the archives that there were several threads on how to preserve uniform line width for distorted paths, which obviously isn t possible with
    Message 1 of 7 , Feb 20, 2009
    View Source
    • 0 Attachment
      Hi all,

      I read in the archives that there were several threads on how to
      preserve uniform line width for distorted paths, which obviously isn't
      possible with SVG. I would like to achieve something similar, namely
      distorted line widths (while the path needn't be distorted). In
      PostScript that's quite easy, like this:

      %!PS

      % Set up global graphics state
      50 50 translate
      5 setlinewidth

      % Build the path
      0 0 moveto
      0 100 100 100 100 0 curveto

      % Transform for stroking
      1 2 scale
      stroke

      showpage

      This draws an arch where the (horizontal) center is twice as thick as
      the (vertical) ends.

      Of course I can achieve a similar effect in SVG with an arch of half
      the height that I stretch vertically. For more complex paths and
      distortions, that becomes less trivial, and I believe it becomes
      entirely impossible with text, right? Or can I do something
      equivalent to this PostScript example:

      %!PS

      % Build a path from text outlines
      /Courier 24 selectfont
      50 50 moveto
      (Text Effect) false charpath

      % transform for stroking
      -50 rotate
      1 4 scale
      stroke

      showpage

      In my eyes, a stroke-transform attribute that is similar to the
      transform attribute, but only affects the way in which lines are
      stroked would be a nice thing to have. What do you think about this?

      I want to switch from PostScript to SVG and I thought that SVG could
      draw everything that PostScript can draw (and much more), but it
      appears there are still some areas in which the graphics model is
      inferior. Of course, in the example above one could convert the text
      into a path with some application, but I wouldn't consider this a good
      solution. It's not possible to do something like that when writing
      SVG by hand or generating it from an application that doesn't know how
      to convert glyphs into paths.

      However, it might be that I'm missing something...

      Thomas W.
    • Frank Bruder
      Hi Thomas, I find this subject interesting. Using a transformation to create a calligraphy sort of stroke is a technique I have used too. Look at the SVG at
      Message 2 of 7 , Feb 22, 2009
      View Source
      • 0 Attachment
        Hi Thomas,

        I find this subject interesting. Using a transformation to create a
        calligraphy sort of stroke is a technique I have used too. Look at
        the SVG at the top of my fonts page
        <http://frankbruder.fr.ohost.de/fonts.html>

        You are right in that currently this can not very well be done with
        text elements. SVG 1.2 Vector Effects would change this
        <http://www.w3.org/TR/2004/WD-SVG12-20041027/vectoreffects.html>

        Vector Effects could be applied like filters. For a calligraphy
        stroke vector effect one would need two transformations which are
        inverse to each other for the transform and transformPath attributes.
        For handcoding such a vector effect it would be useful if something
        like
        "inverse(" + <transform-list> + ")"
        could be used in a transform list to specify a transformation by its
        inverse.

        One disadvantage of Vector Effects is that they are not included in
        SVG Tiny. While some vector effect primitives might be rather
        advanced, I think that what would be needed for a calligraphy vector
        effect does not go beyond what SVG Tiny viewers are required to
        support anyways. I would think that a small subset of the Vector
        Effects Module could be included in SVG Tiny without affecting system
        requirements. Maybe it just wasn't considered that such a small
        subset could be useful.


        Regards
        Frank

        --- In svg-developers@yahoogroups.com, "th_w@..." <th_w@...> wrote:
        >
        > Hi all,
        >
        > I read in the archives that there were several threads on how to
        > preserve uniform line width for distorted paths, which obviously
        isn't
        > possible with SVG. I would like to achieve something similar,
        namely
        > distorted line widths (while the path needn't be distorted). In
        > PostScript that's quite easy, like this:
        >
        > %!PS
        >
        > % Set up global graphics state
        > 50 50 translate
        > 5 setlinewidth
        >
        > % Build the path
        > 0 0 moveto
        > 0 100 100 100 100 0 curveto
        >
        > % Transform for stroking
        > 1 2 scale
        > stroke
        >
        > showpage
        >
        > This draws an arch where the (horizontal) center is twice as thick
        as
        > the (vertical) ends.
        >
        > Of course I can achieve a similar effect in SVG with an arch of half
        > the height that I stretch vertically. For more complex paths and
        > distortions, that becomes less trivial, and I believe it becomes
        > entirely impossible with text, right? Or can I do something
        > equivalent to this PostScript example:
        >
        > %!PS
        >
        > % Build a path from text outlines
        > /Courier 24 selectfont
        > 50 50 moveto
        > (Text Effect) false charpath
        >
        > % transform for stroking
        > -50 rotate
        > 1 4 scale
        > stroke
        >
        > showpage
        >
        > In my eyes, a stroke-transform attribute that is similar to the
        > transform attribute, but only affects the way in which lines are
        > stroked would be a nice thing to have. What do you think about
        this?
        >
        > I want to switch from PostScript to SVG and I thought that SVG could
        > draw everything that PostScript can draw (and much more), but it
        > appears there are still some areas in which the graphics model is
        > inferior. Of course, in the example above one could convert the
        text
        > into a path with some application, but I wouldn't consider this a
        good
        > solution. It's not possible to do something like that when writing
        > SVG by hand or generating it from an application that doesn't know
        how
        > to convert glyphs into paths.
        >
        > However, it might be that I'm missing something...
        >
        > Thomas W.
        >
      • th_w@ymail.com
        ... That s a really interesting piece of SVG art. I didn t know that paths could be animated in this manner. ... That s great news! Thanks for pointing me to
        Message 3 of 7 , Feb 23, 2009
        View Source
        • 0 Attachment
          --- In svg-developers@yahoogroups.com, "Frank Bruder" <redurbf@...> wrote:
          >
          > I find this subject interesting. Using a transformation to create a
          > calligraphy sort of stroke is a technique I have used too. Look at
          > the SVG at the top of my fonts page
          > <http://frankbruder.fr.ohost.de/fonts.html>
          >

          That's a really interesting piece of SVG art. I didn't know that
          paths could be animated in this manner.

          > You are right in that currently this can not very well be done with
          > text elements. SVG 1.2 Vector Effects would change this
          > <http://www.w3.org/TR/2004/WD-SVG12-20041027/vectoreffects.html>
          >

          That's great news! Thanks for pointing me to this.

          >
          > One disadvantage of Vector Effects is that they are not included in
          > SVG Tiny. While some vector effect primitives might be rather
          > advanced, I think that what would be needed for a calligraphy vector
          > effect does not go beyond what SVG Tiny viewers are required to
          > support anyways. I would think that a small subset of the Vector
          > Effects Module could be included in SVG Tiny without affecting system
          > requirements. Maybe it just wasn't considered that such a small
          > subset could be useful.
          >

          In my eyes it would be very useful if SVG (tiny) could faithfully map
          all PostScript level 2 EPS graphics, so I think it is a really good
          idea to include this in SVG tiny. I mean, the feature discussed here
          is part of good old (25 years!) PostScript Level 1. If printers back
          then could do it, it shouldn't be too much of a problem for any of
          today's SVG implementations, should it?

          Thomas W.
        • Frank Bruder
          I see now that Vector Effects are not completely excluded from SVG Tiny. The value vector-effect= non-scaling-stroke is allowed
          Message 4 of 7 , Mar 6, 2009
          View Source
          • 0 Attachment
            I see now that Vector Effects are not completely excluded from SVG Tiny. The value vector-effect="non-scaling-stroke" is allowed
            <http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke>
            The reqirements this puts on the user agent are no less than what would be needed for a stroke-tansform effect like the one we were discussing. But there seems to be no way to use non-scaling-stroke for this purpose. The stroke outline is always transformed to the screen coordinate system before stroking, whereas what the stroke-transform effect would need is that some transformations are applied before and some after painting the stroke.

            I was hoping there would be some way to have a non-scaling-stroke regarding some transforms but then overwrite it on an element further up in the DOM tree to apply more transformations to the stroke. As far as I can tell, this doesn't seem to be possible, which is unfortunate, because non-scaling-stroke already works in Opera. We'll have to wait for full Vector Effects support, apparently. However, the inclusion of non-scaling-stroke in SVG Tiny makes it clear that stroke-transforms are not too resource intensive for mobile devices.

            I think the following vector effect primitives form a useful subset which could be implemented in mobile devices without much problems.

            veStrokePath,
            veAffine,
            veJoin,
            veFill,
            veStroke, and
            vePath



            --- In svg-developers@yahoogroups.com, "th_w@..." <th_w@...> wrote:
            >
            > --- In svg-developers@yahoogroups.com, "Frank Bruder" <redurbf@> wrote:
            > >
            > > I find this subject interesting. Using a transformation to create a
            > > calligraphy sort of stroke is a technique I have used too. Look at
            > > the SVG at the top of my fonts page
            > > <http://frankbruder.fr.ohost.de/fonts.html>
            > >
            >
            > That's a really interesting piece of SVG art. I didn't know that
            > paths could be animated in this manner.
            >
            > > You are right in that currently this can not very well be done with
            > > text elements. SVG 1.2 Vector Effects would change this
            > > <http://www.w3.org/TR/2004/WD-SVG12-20041027/vectoreffects.html>
            > >
            >
            > That's great news! Thanks for pointing me to this.
            >
            > >
            > > One disadvantage of Vector Effects is that they are not included in
            > > SVG Tiny. While some vector effect primitives might be rather
            > > advanced, I think that what would be needed for a calligraphy vector
            > > effect does not go beyond what SVG Tiny viewers are required to
            > > support anyways. I would think that a small subset of the Vector
            > > Effects Module could be included in SVG Tiny without affecting system
            > > requirements. Maybe it just wasn't considered that such a small
            > > subset could be useful.
            > >
            >
            > In my eyes it would be very useful if SVG (tiny) could faithfully map
            > all PostScript level 2 EPS graphics, so I think it is a really good
            > idea to include this in SVG tiny. I mean, the feature discussed here
            > is part of good old (25 years!) PostScript Level 1. If printers back
            > then could do it, it shouldn't be too much of a problem for any of
            > today's SVG implementations, should it?
            >
            > Thomas W.
            >
          • Helder Magalhães
            Hi Frank, ... You might want to take a look at a proposal [1] by Doug from a few years ago. I haven t investigated in order to check whether this is already
            Message 5 of 7 , Apr 20 1:36 AM
            View Source
            • 0 Attachment
              Hi Frank,

              > I find this subject interesting. Using a transformation to create a
              > calligraphy sort of stroke is a technique I have used too. Look at
              > the SVG at the top of my fonts page
              > <http://frankbruder.fr.ohost.de/fonts.html>

              You might want to take a look at a proposal [1] by Doug from a few years ago. I haven't investigated in order to check whether this is already possible using the SVG 1.2T vector effects, but it sounds interesting and pretty related to calligraphy-like stroke effects. ;-)

              Regards,
              Helder Magalhães

              [1] http://svg-whiz.com/experiments.html#variableStrokeWidth
            • Frank Bruder
              See also: and possible discussion following at the svg mailing list of the w3c. Didn t spawn a
              Message 6 of 7 , Apr 23 6:05 PM
              View Source
              • 0 Attachment
                See also:
                <http://lists.w3.org/Archives/Public/www-svg/2009Apr/0070.html>
                and possible discussion following at the svg mailing list of the w3c.
                Didn't spawn a discussion yet, but that's where you need to advocate more vector effects and equivalents to all PostScript commands for SVGTiny.

                --- In svg-developers@yahoogroups.com, "th_w@..." <th_w@...> wrote:
                >
                > Hi all,
                >
                > I read in the archives that there were several threads on how to
                > preserve uniform line width for distorted paths, which obviously isn't
                > possible with SVG. I would like to achieve something similar, namely
                > distorted line widths (while the path needn't be distorted). In
                > PostScript that's quite easy, like this:
                >
                > %!PS
                >
                > % Set up global graphics state
                > 50 50 translate
                > 5 setlinewidth
                >
                > % Build the path
                > 0 0 moveto
                > 0 100 100 100 100 0 curveto
                >
                > % Transform for stroking
                > 1 2 scale
                > stroke
                >
                > showpage
                >
                > This draws an arch where the (horizontal) center is twice as thick as
                > the (vertical) ends.
                >
                > Of course I can achieve a similar effect in SVG with an arch of half
                > the height that I stretch vertically. For more complex paths and
                > distortions, that becomes less trivial, and I believe it becomes
                > entirely impossible with text, right? Or can I do something
                > equivalent to this PostScript example:
                >
                > %!PS
                >
                > % Build a path from text outlines
                > /Courier 24 selectfont
                > 50 50 moveto
                > (Text Effect) false charpath
                >
                > % transform for stroking
                > -50 rotate
                > 1 4 scale
                > stroke
                >
                > showpage
                >
                > In my eyes, a stroke-transform attribute that is similar to the
                > transform attribute, but only affects the way in which lines are
                > stroked would be a nice thing to have. What do you think about this?
                >
                > I want to switch from PostScript to SVG and I thought that SVG could
                > draw everything that PostScript can draw (and much more), but it
                > appears there are still some areas in which the graphics model is
                > inferior. Of course, in the example above one could convert the text
                > into a path with some application, but I wouldn't consider this a good
                > solution. It's not possible to do something like that when writing
                > SVG by hand or generating it from an application that doesn't know how
                > to convert glyphs into paths.
                >
                > However, it might be that I'm missing something...
                >
                > Thomas W.
                >
              • Frank Bruder
                There was a related discussion here more recently. It starts at We came up with some ideas
                Message 7 of 7 , Apr 23 6:13 PM
                View Source
                • 0 Attachment
                  There was a related discussion here more recently. It starts at
                  <http://tech.groups.yahoo.com/group/svg-developers/message/60518>

                  We came up with some ideas for more than just piecewise linear variation of the stroke-width.

                  --- In svg-developers@yahoogroups.com, Helder Magalhães <helder.magalhaes@...> wrote:
                  >
                  > Hi Frank,
                  >
                  > > I find this subject interesting. Using a transformation to create a
                  > > calligraphy sort of stroke is a technique I have used too. Look at
                  > > the SVG at the top of my fonts page
                  > > <http://frankbruder.fr.ohost.de/fonts.html>
                  >
                  > You might want to take a look at a proposal [1] by Doug from a few years ago. I haven't investigated in order to check whether this is already possible using the SVG 1.2T vector effects, but it sounds interesting and pretty related to calligraphy-like stroke effects. ;-)
                  >
                  > Regards,
                  > Helder Magalhães
                  >
                  > [1] http://svg-whiz.com/experiments.html#variableStrokeWidth
                  >
                Your message has been successfully submitted and would be delivered to recipients shortly.