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

Text warping using svg

Expand Messages
  • Devon Yoo
    Hi, I am currently building up text warp tool using ordinary bitmap(rgb) object. An example of text warp is here:
    Message 1 of 4 , Feb 6, 2014
    • 0 Attachment

      Hi,

       

      I am currently building up text warp tool using ordinary bitmap(rgb) object. An example of text warp is here: http://i72.photobucket.com/albums/i189/paulsoulsby/textbend.png

       

      As you might know already, working on bitmap causes lots troubles related to high res and image distortions. So I am looking for a way to warp texts using svg .

       

      I found it I can resize text vertically and horizontally in different scale using matrix:

       

      <text transform="matrix(0.45914843678474426,0,0,2.1637930870056152,56.1,-451.55)" style="font-size:100px;font-family:Arial Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizontal:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">

          <tspan x="101.95" y="460.45" style="font-size:100px;font-family:Arial Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizontal:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">SAMPLE TEXT</tspan>

      </text>

       

      But matrix transform is just vertical and horizontal scaling. What I need to do is having n by m grids and shift its intersections and perform separate transform per each section in the grids. Please see this: http://mesh.brown.edu/engn1610/img/A3-pwbl.png

       

      Is there a way to do this using svg?

       

      Thanks in advance

       

      Devon

    • David Dailey
      Hi Devon, Not only does using bitmaps cause the troubles you mention, but as argued at [1] it also makes the text inaccessible to screen readers and search
      Message 2 of 4 , Feb 6, 2014
      • 0 Attachment
        Hi Devon,



        Not only does using bitmaps cause the troubles you mention, but as argued at
        [1] it also makes the text inaccessible to screen readers and search
        engines. I think the SVG community owes it to the world to make sure we get
        text warping into SVG!



        In the paper at [1], there are some examples of using SVG filters, as well
        as <replicate> to warp text, while keeping it scalable and accessible. There
        was also discussion within the SVG Working Group [2] of having various
        warping options other than the affine transforms currently in SVG and the
        perspective transforms entering the web world through the CSS
        cannibalization of SVG (sorry if that is the wrong word, English is my
        native language). I think the mesh gradients being discussed might lead
        naturally to mesh transforms, though one might have to use feDisplacement
        for that (which is a bit unvectory). I had hoped that we might at least have
        two control curves for text - one below and one above, which would handle
        the dually-aligned example of yours. I think that may have been postponed
        until SVG3.0 though, since 2.0 is sorta like SVG 1.1++ with hooks for CSS
        and HTML5.



        Some very cool script-based warping of SVG has been done by Israel Eisenberg
        some of whose work can be seen at [3].



        Cheers

        David



        [1] http://cs.sru.edu/~ddailey/svg/GeometricAccessibility.html

        [2] http://lists.w3.org/Archives/Public/www-svg/2011Jul/0020.html

        [3] http://owl3d.com/svg/tests/boundText/



        From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
        On Behalf Of Devon Yoo
        Sent: Thursday, February 06, 2014 1:40 PM
        To: svg-developers@yahoogroups.com
        Subject: [svg-developers] Text warping using svg





        Hi,



        I am currently building up text warp tool using ordinary bitmap(rgb) object.
        An example of text warp is here:
        http://i72.photobucket.com/albums/i189/paulsoulsby/textbend.png



        As you might know already, working on bitmap causes lots troubles related to
        high res and image distortions. So I am looking for a way to warp texts
        using svg .



        I found it I can resize text vertically and horizontally in different scale
        using matrix:



        <text
        transform="matrix(0.45914843678474426,0,0,2.1637930870056152,56.1,-451.55)"
        style="font-size:100px;font-family:Arial
        Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizont
        al:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">

        <tspan x="101.95" y="460.45" style="font-size:100px;font-family:Arial
        Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizont
        al:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">SAMPLE
        TEXT</tspan>

        </text>



        But matrix transform is just vertical and horizontal scaling. What I need to
        do is having n by m grids and shift its intersections and perform separate
        transform per each section in the grids. Please see this:
        http://mesh.brown.edu/engn1610/img/A3-pwbl.png



        Is there a way to do this using svg?



        Thanks in advance



        Devon





        [Non-text portions of this message have been removed]
      • Devon Yoo
        Hi David, Thank you for your reply and sharing useful links. As for feDisplacement, I don t think I can insert runtime-made backgrounds and patterns into svg
        Message 3 of 4 , Feb 6, 2014
        • 0 Attachment

          Hi David,

           

          Thank you for your reply and sharing useful links.

           

          As for feDisplacement, I don’t think I can insert runtime-made backgrounds and patterns into svg code efficiently without making actual image files. And, in the third link you gave me, texts seem to be just in a form of path array so I don’t think they are accessible to search engines. Do you know a good way to convert text to path depending on fonts and sizes?

           

          Regards,

           

          Devon

           

          From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com] On Behalf Of David Dailey
          Sent: Thursday, February 06, 2014 12:06 PM
          To: svg-developers@yahoogroups.com
          Subject: RE: [svg-developers] Text warping using svg

           

           

          Hi Devon,

          Not only does using bitmaps cause the troubles you mention, but as argued at
          [1] it also makes the text inaccessible to screen readers and search
          engines. I think the SVG community owes it to the world to make sure we get
          text warping into SVG!

          In the paper at [1], there are some examples of using SVG filters, as well
          as <replicate> to warp text, while keeping it scalable and accessible. There
          was also discussion within the SVG Working Group [2] of having various
          warping options other than the affine transforms currently in SVG and the
          perspective transforms entering the web world through the CSS
          cannibalization of SVG (sorry if that is the wrong word, English is my
          native language). I think the mesh gradients being discussed might lead
          naturally to mesh transforms, though one might have to use feDisplacement
          for that (which is a bit unvectory). I had hoped that we might at least have
          two control curves for text - one below and one above, which would handle
          the dually-aligned example of yours. I think that may have been postponed
          until SVG3.0 though, since 2.0 is sorta like SVG 1.1++ with hooks for CSS
          and HTML5.

          Some very cool script-based warping of SVG has been done by Israel Eisenberg
          some of whose work can be seen at [3].

          Cheers

          David

          [1] http://cs.sru.edu/~ddailey/svg/GeometricAccessibility.html

          [2] http://lists.w3.org/Archives/Public/www-svg/2011Jul/0020.html

          [3] http://owl3d.com/svg/tests/boundText/

          From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
          On Behalf Of Devon Yoo
          Sent: Thursday, February 06, 2014 1:40 PM
          To: svg-developers@yahoogroups.com
          Subject: [svg-developers] Text warping using svg

          Hi,

          I am currently building up text warp tool using ordinary bitmap(rgb) object.
          An example of text warp is here:
          http://i72.photobucket.com/albums/i189/paulsoulsby/textbend.png

          As you might know already, working on bitmap causes lots troubles related to
          high res and image distortions. So I am looking for a way to warp texts
          using svg .

          I found it I can resize text vertically and horizontally in different scale
          using matrix:

          <text
          transform="matrix(0.45914843678474426,0,0,2.1637930870056152,56.1,-451.55)"
          style="font-size:100px;font-family:Arial
          Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizont
          al:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">

          <tspan x="101.95" y="460.45" style="font-size:100px;font-family:Arial
          Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizont
          al:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">SAMPLE
          TEXT</tspan>

          </text>

          But matrix transform is just vertical and horizontal scaling. What I need to
          do is having n by m grids and shift its intersections and perform separate
          transform per each section in the grids. Please see this:
          http://mesh.brown.edu/engn1610/img/A3-pwbl.png

          Is there a way to do this using svg?

          Thanks in advance

          Devon

          [Non-text portions of this message have been removed]

        • David Dailey
          On Thursday, February 06, 2014 3:26 PM ... Certainly ... and patterns into svg code efficiently without making actual image files. Well, I m not sure that
          Message 4 of 4 , Feb 11, 2014
          • 0 Attachment
            On Thursday, February 06, 2014 3:26 PM

            Devon Yoo wrote:

            >Thank you for your reply and sharing useful links.

            Certainly

            >As for feDisplacement, I don't think I can insert runtime-made backgrounds
            and patterns into svg code efficiently without making actual image files.

            Well, I'm not sure that putting runtime made SVG into an feDisplacement
            should cause any real troubles. I'm sure I must have examples somewhere of
            doing something like that, but the browsers that do support feDisplacement
            are doing it pretty fast these days (except some of them seem to fuss about
            enableBackground, fearing perhaps that it like SVG fonts or SMIL might cause
            the earth to spin out of orbit) . The hassle of course is that the
            displacement ends up returning pixels rather than vectors - and what we'd
            really like for text warping is vectors.

            >And, in the third link you gave me, texts seem to be just in a form of path
            array so I don't think they are accessible to search engines.

            Yes, those examples from Israel Eisenberg were meant more as a proof of
            concept that script could be used to distort path data as per the dual-curve
            alignment premise that I had proposed. That is, if we had a method of
            converting text to path data, then we could write the JavaScript to do the
            distortion. I'm sort of interested in doing this anyhow, though it seems
            that the SVG WG has given up on accessibility for fonts in dropping SVG
            fonts and requiring blobs or something instead - perhaps there is another
            interpretation, but the discussion always seems to devolve into complexities
            that I as an outsider don't quite follow.

            >Do you know a good way to convert text to path depending on fonts and
            sizes?

            In the call for input to SVG 2.0, some of us did request such a method to be
            built into the spec, and there was some apparent agreement initially. I
            don't know what became of that though.

            The SVG WG just published a new draft at
            http://www.w3.org/TR/2014/WD-SVG2-20140211/ and perhaps one could find the
            issue mentioned in there.

            Good luck

            David





            From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
            On Behalf Of David Dailey
            Sent: Thursday, February 06, 2014 12:06 PM
            To: svg-developers@yahoogroups.com
            Subject: RE: [svg-developers] Text warping using svg





            Hi Devon,

            Not only does using bitmaps cause the troubles you mention, but as argued at
            [1] it also makes the text inaccessible to screen readers and search
            engines. I think the SVG community owes it to the world to make sure we get
            text warping into SVG!

            In the paper at [1], there are some examples of using SVG filters, as well
            as <replicate> to warp text, while keeping it scalable and accessible. There
            was also discussion within the SVG Working Group [2] of having various
            warping options other than the affine transforms currently in SVG and the
            perspective transforms entering the web world through the CSS
            cannibalization of SVG (sorry if that is the wrong word, English is my
            native language). I think the mesh gradients being discussed might lead
            naturally to mesh transforms, though one might have to use feDisplacement
            for that (which is a bit unvectory). I had hoped that we might at least have
            two control curves for text - one below and one above, which would handle
            the dually-aligned example of yours. I think that may have been postponed
            until SVG3.0 though, since 2.0 is sorta like SVG 1.1++ with hooks for CSS
            and HTML5.

            Some very cool script-based warping of SVG has been done by Israel Eisenberg
            some of whose work can be seen at [3].

            Cheers

            David

            [1] http://cs.sru.edu/~ddailey/svg/GeometricAccessibility.html

            [2] http://lists.w3.org/Archives/Public/www-svg/2011Jul/0020.html

            [3] http://owl3d.com/svg/tests/boundText/

            From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
            On Behalf Of Devon Yoo
            Sent: Thursday, February 06, 2014 1:40 PM
            To: svg-developers@yahoogroups.com
            Subject: [svg-developers] Text warping using svg

            Hi,

            I am currently building up text warp tool using ordinary bitmap(rgb) object.
            An example of text warp is here:
            http://i72.photobucket.com/albums/i189/paulsoulsby/textbend.png

            As you might know already, working on bitmap causes lots troubles related to
            high res and image distortions. So I am looking for a way to warp texts
            using svg .

            I found it I can resize text vertically and horizontally in different scale
            using matrix:

            <text
            transform="matrix(0.45914843678474426,0,0,2.1637930870056152,56.1,-451.55)"
            style="font-size:100px;font-family:Arial
            Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizont
            al:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">

            <tspan x="101.95" y="460.45" style="font-size:100px;font-family:Arial
            Black;font-weight:normal;fill:#0057FF;opacity:0.5;glyph-orientation-horizont
            al:0;glyph-orientation-vertical:0;text-align:start;line-height:1.25;">SAMPLE
            TEXT</tspan>

            </text>

            But matrix transform is just vertical and horizontal scaling. What I need to
            do is having n by m grids and shift its intersections and perform separate
            transform per each section in the grids. Please see this:
            http://mesh.brown.edu/engn1610/img/A3-pwbl.png

            Is there a way to do this using svg?

            Thanks in advance

            Devon

            [Non-text portions of this message have been removed]





            [Non-text portions of this message have been removed]
          Your message has been successfully submitted and would be delivered to recipients shortly.