SVG, the sorry state of vectors on the Web
Everyone knowing me knows I am a Flashhater since day one. I saw flash as a dying species when it first came out as the arcane nonstandard scripting language (why not use javascript or python?) never appealed to me, neither did the "plug in to the web" approach instead of an "open standard" open code open everything approach. Also I did not like the interface mentality of macromedia (and a recent look at firework cs3 has gotten me those flashbacks) so I never felt good working in Director or Flash or any other macromedia app - except for freehand (which I used before it was a macromedia product - Aldus anyone?).
But I do like vectors and especially do I like fonts - especially crazy nonstandard fraktur fonts. So the ability to include fonts into Flash files and make a layout that playes exactly as the author intended on all computers is an appealing one. My hatred for Flash has trumped the need for alternate fonts and true vectors to this day and will likely into the long long future.
Then about a couple of years ago (1999) Adobe System proposed a standard to the W3C - so did Microsoft to break the Flash supriority on the web with an open standard - both standards fused in t one and became SVG. SVG sounded good back then and still does - true open documented XML document format, truly open source of the generated files, and backed by the W3C - easy to generate with just a text editor if you are so inclined. I was dancing on my chair back then when I remember correctly.
There was two major problems - no easy way to generate content (other then a text editor) and no browser compatibility.
Adobe themselves tried to eliminate the first problem by putting out the ill fated program "flame" or whatever it was called. It sucked - it sucked hard - and it wasnīt for the mac. Then there was years and years of silence until there was an obscure "export to svg" menue point in illustrator in CS1 (I think)
On the browser side it didnīt look better - Adobe did offer an SVG plugin - but this eliminated one of the biggest superiorities over flash. Neither first incarnation of Firefox could play SVGs neither did Safari do a good job using SVGs (so it did at least recognized it in some sort or form without putting out horrendous errors all over the place) - Internetz Exploder I have no idea but my guess that it does not even know what an SVG is to this date without the adobe plugin.
Then Adobe bought Macromedia and one of the biggest reason for the takeover was Flash. Adobe must have seen that not being able to deliver platform/client independent interactive vector graphics with embedded fonts would sooner or later give them a big disadvantage and that making such a technology from scratch is not as easy as it sounds - especially with the browser developers trying to get the basic W3C standards to work first before implementing something flashy as SVG.
As my heart jumped at the introduction of SVG my heart plummeted when I heard about the Adobe takeover. I thought that thats it and flash is taking on the world without anyone stopping it. Flickr and PooTube just have aggravated these fears - I was waiting for adobe trying to make Flash a W3C standard or something along the line - yet something else and surprising was happening all of the sudden. Firefox and Safari started to add build in SVG support - unusable at first but nevertheless progress. Also Illustrators SVG Export became more and more sophisticated and - CLEAN.
Then we entered the post AppleIntel Adobe CS3 Microsoft Silverlight (why they did not choose SVG I can not figure out) world. A world where Safari has full SVG 1.1 support Firefox claims it has 1.0 support and Adobe Illustrator CS3 outputs clean sufficient SVGs.
Thats the day I jumped into it to see the true power of it unfolding before my eyes. I stumbled into it accidently. All I wanted to do is making a form that I use very often in Indesign more "interactive". The form in question is a template to fold you DVD cover out of a single piece of paper without glue and be able to print on the front and back side. Its one of these great origami secrets :)
Well that form has one big problem - all text and graphics are printed out at an roughly 35.3 degree angle.
First obvious choice was to make it a PDF form. After trying it out with Acrobat 8 and whatnot of small utilities I gave up because - you can can only rotate form fields in a PDF 90, 180, 270 degrees - no 35.3.
Ok I was about to give it up but I really want this form that I use so often with an easy interface without opening Indesign everytime I burn a DVD.
Next I was thinking about a database solution - Filemaker in special. Obviously I tried to angle a field there right in the beginning just to find out that there as well you can not do so either.
I did not have a solution in my head anymore. CSS? hmmmm no. CSS3- hmmm is supposed to have a rotation value but the support is rather sketchy even if you are developing for just one browser (which would be sufficient for this form as only I wanted to use it and I use Safari all day all night).
I tried to get the idea out of my head - unsuccesfully. Then I remembered SVG and briefly looked into the documentation of Illustrator CS3 and found lots of good things about - I thought that is worth a try.
I layouted the piece and exported through the "Save for Web and devices" dialog. The first thing I saw made me smile "Include Font - for used Glyphs only - or for all Glyphs or none or commenly used Glyphs". YEY fonts!!!!
Then I looked at the code - XHTML :) I was feeling all home right from the beginning.
But how do I make it interactive? I decided to go a PHP, Javascript route.
Then is when it became apparent that even all looks rosy it isnīt. There is virtually no documentional howtos on SVG on the net. The W3C documentation is so geeky that its over my head and the few howtos available where either extremely old and didnīt work or just didnīt work. I delved into it.
Four long days later I figured it out - scrapped the Javascript route and went a pure PHP route - after I found out how to integrate PHP into SVGs and after I figured out how to manipulate the DOM tree in an SVG with Javascript that sits outside the embedded SVG. In short: it was a pain!
The coordinate system in SVG is not easely understood and I had to print out 40 pages to make the resulting SVG print out correctly (only on Safari3final I might add - it does not work on any other browser) because safari scales stuff so it fits on a page - which was counterintuitive with this document. The code is intermangled and inside to outside javascript integration is not robust in Safari. Dom updates are not as straight forward as in plain vanilla XHTML. Deleting parts of the dom tree and reintroducing it also did work only after extensive fiddling (the main reason I went with pure PHP).
But the biggest biggest problem was the handling of text - how can any standard that displays text in any sort or form NOT support a line break! Yes you heard right - for having multiline text you can NOT use something of the < br > sort - you have to calculate the linespacing yourself and make new lines through < tspans > with a "y" value that specifies where you next line of text is! HOW INSANE!
In the end though I am impressed at the output because I could include a font in the document and now have a nicely working form to print out my DVD labels. And changing Layouted text on the fly through a webinterface is something novel and great.
I surely hope SVG is making progress now that its at last almost usable - but I do not expect it to gain widespread adoption until the linebreak issue is resolved - its a HUGE showstopper.
One big question that came to my mind was a copyright issue. Fonts are to design what RIAAsongs are to the ear - its a copyright regime fighting hard against the users since day one.
So if I use my owned copy of Solex and embedd it into an SVG do I break the licensing?
Why? - you might ask - Flash has done this for years - Yes, - I reply - but in Flash you do not have the easy option to extract the font from the files - in SVG every vector of the font is being readable in plain text - you can even change vectores around if you want to - its just a matter of time until someone writes an easy to use "font translator" plugin that can read the SVG and generate a TrueType font out of it. Fontshops galore will have want to have a say in this I am sure!
Overall the future for open vectors with embedded fonts on the web does look brighter after this year and death to flash and all :P
Next project regarding SVG for me will be to try to embed video in it.