Re: SVG Font Blog Post Question

Hi Jason

2011/4/29 Jason Feldman <jason@sosponsored.com>

> I have been doing quite a bit of research on SVG fonts and utilizing them
> in a design tool to create custom apparel online for a new project called
> SOsponsored and came across your blog post.  I don't know if you'd be
> interested in sharing some insight in regard to SVG format, but here is my
> issue.


Nice project you have :) I will be glade to share my knowledge with you.


>
> We have created a complete design tool that allows users to select any of
> our SVG clipart images and add them to their shirt.  Once added, the
> user also has the option to Add text, manipulate the text (arc, skew, etc)
> and add an outline or stroke.  At the moment the text is output is .PNG and
> is not a Vector based file.
>

Ok, so I assume you use the HTML5 Canvas tag to perform such operations in
the browser. Am I right ?


> Do you know how you'd integrate SVG into the word art text editor so that
> the file output is true vector SVG while stll offering arc, shape, outlines?
>

Sure, but it depend a lot on the way you want to manage the file output all
along your production chain. Anyway here are some ideas. The main problem
here is that using SVG font is impossible at the editing stage because
Firefox nor IE support such a font format. Yet, your use case can be solved
by using WOFF or TTF Fonts (I assume you do not target old IE version which
only support EOT fonts and do not support SVG at all!). Indeed all browsers
supports TTF fonts and they can be linked with any SVG document by using the
CSS @font-face properties. In my opinion, this is the best approach for your
editing tool. It's perfectly doable to apply any SVG effect to a TTF font
(transformation, text along a path, outlines or stroke).

Now, the tricky part is: "Can you carry that TTF font all along your
production chain with your SVG file?". If the answer is "yes", fine, go on
;) If the answer is "no" that could become messy. You should find a way to
turn your font into SVG Paths. Of course, if your back-end know how to deal
with SVG fonts, you just have to transform your TTF font into an SVG font
and it's fine (for example,
fontsquirrel.com<http://www.fontsquirrel.com/fontface/generator>offer
a nice online tool to perform such an operation). If you can not use
any SVG fonts... well, you have to use tools that will turn your font into
arbitrary paths. I know that some software such as Adobe Illustrator or
Inkscape can do it but I do not know any command line tools or server side
tools that can do it but I'm sure it's doable.


> Your input is greatly appreciated!
>

Your welcome ;)
I hope that short answer will help you. Feel free to ask me any question if
you want some more accurate answers.
Let me know when your project will be live, I would be glad to see it
working :)

By the way, I'm pretty sure this sort of question or experience input will
be greatly appreciate by the W3C SVG Working Group. Feel free to send them
any question or inputs on that subject (www-svg@w3.org). Some of the guys on
that mailing list are a lot smarter than I am. Especially, your use case is
interresting because there is a big debate about the interest of using SVG
fonts in the browser. I think it's important to point that sometimes, things
that are produced inside a browser can be used outside the web. In my
opinion, having a support for SVG fonts in all browsers could help to build
some more coherent production chain from the browser to the outside. At that
point, Mozilla (and Microsoft) do not want to implement SVG fonts because
they do not see any valid use case for them and they think that the WOFF
fonts are good enough. Your use case is a stone in the garden of
interoperability between the web and the outside world (which do not
necessarily support WOFF fonts).

Best regards
-- 
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>