VML, SVG and Canvas

Take a couple weeks off from blogging and it’s real hard to get back into it. I have been working toward a BETA at my day job, playing around with a web project at home and enjoying the end of year holidays as well.

Anyway, the web project is a web application that makes heavy use of graphics. Started building on IE with VML (Vector Markup Language). I gained experience using VML from my day job. Had no problems putting together a pretty good vector graphic editor, complete with HTML text inside shapes. The editor would be a core component in the web application. Then I started adding in support for Firefox. The plan was to abstract the VML/SVG differences and use as much common code as possible. JavaScript libraries like Prototype made lots of the work easy.

The big pain was the feature differences between VML and SVG. Here are some of the problems:

• VML was built as an extension to HTML. SVG is a separate specification. It took a little time to figure out how to get SVG inside an HTML document (called Inline SVG) to work correctly. Also, I can mix HTML and VML together easily in any combination. SVG requires the use of <foreignObject> to mix in HTML and Firefox does not enable <foreignObject> by default.
• Shapes in VML (<rect>, <ellipse>, etc.) support text child elements. When I reposition the shape, the text moves with it. It appears that shapes can’t hold text child elements until SVG 1.2, which supports <flowPara> child elements. For now, changes to the shape must be manually mirrored to the sibling text elements.
• Text in VML supports wordwrap. SVG does not and I can’t believe it. Again, SVG 1.2 supports <flowPara>, but I am not sure wordwrap is part of <flowPara>. How long will it take SVG 1.2 to get implemented in Firefox, Safari and Opera?
• VML supports the same level of CSS attributes as HTML. SVG does not support the same level. One attribute I could not use was ‘cursor’.

My biggest problems with SVG are text related. Maybe I just don’t know the right way to do it in SVG. I’m still learning.

And then there’s <canvas>. It has good support in Firefox, Safari and Opera (soon). Along comes Emil Eklund with an implementation of <canvas> in IE and now I have to consider switching to <canvas> as the lowest common denominator. My biggest problem with <canvas> is text (I see a theme here). I am not sure how to handle text with <canvas>.