RE: Text warping using svg

 


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: [email protected] [mailto:[email protected]]
On Behalf Of David Dailey
Sent: Thursday, February 06, 2014 12:06 PM
To: [email protected]
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: [email protected] [mailto:[email protected]]
On Behalf Of Devon Yoo
Sent: Thursday, February 06, 2014 1:40 PM
To: [email protected]
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]