RE: Text warping using svg

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