RE: 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]