October 23rd, 2007

I've moved on from SVG to the Canvas element, and am still suffering whiplash at the downward steepness of the step. Leaving aside that one can defeat canvas easily just by turning off script, about the best documentation I found on the element is Mozilla's implementation. The specification is buried within the HTML5 work, which if you think on it, defeats every last bit of argument about not including SVG because it's "presentational".

About the only negative associated with SVG is how to include it in the pages–the specification, itself, is really nice. Once all of the features are supported in the main browsers, you're going to see some amazing stuff.

You don't realize how nice SVG is, until you look at the Canvas element. For instance, I created an SVG example on how quadratic bèzier curves work in SVG. The canvas element also supports the same type of curves, so I went to re-create the example. I hit a wall immediately. Why? Two words:

"dashed lines"

No, there is no way of adding either dashes or dots or combination to lines in canvas. You can use a custom function and create tiny little lines using lineTo and/or one of the curve functions, but there's no way to actually just specify the dash-dot pattern to use, and forget about it. My canvas demonstration of quadratic bèzier curves ended up looking a tad bit different.

I went searching on HTML5, the canvas element, and dashed line support and found a couple of discussions about supporting dashed lines in canvas. The official word is: not trivial to implement, no one really wants them.

Considering that one of the first implementations on the canvas element I created uses dashed lines, I beg to differ on the 'no one really wants' assumption. Sure, I can use a custom function, such as the one I'm using to emulate a rounded corner rectangle, but I can't help thinking this isn't the most efficient approach. The user agent should be able to optimize for dashes in line drawing if these are part of the specification, but there is no real optimization for functions that create hundreds of little dashes based on rotate, curve, line, move.

While researching the missing 'dashes', I ended up being more caught up in the discussions associated with the canvas element. It wasn't until looking for dashed line that it hit me: why was there such deeply presentational discussions associated with a version of HTML that's specific to semantics, only? Especially when you consider that in the recent discussions about support for SVG in HTML5 there was pushback for supporting SVG within HTML5 because SVG is 'presentational'. In fact, Jacques just wrote, the following on this topic:

The subject came up in a discussion over at Sam’s blog about SVG-in-HTML5. Some people were arguing that, even if it were technically possible, it would be undesirable to sully HTML5 with the inclusion of foreign dialects, like MathML or SVG. The latter, in particular, was in some quarters considered too “presentational.”

This annoyed me sufficiently that I gave the following example:

Say I wish to discuss irreducible representations of SU(3). I think it should be perfectly acceptable to point out that: Rank-2 Symmetric Tensor Representation Fundamental Representation = Adjoint Representation Rank-3 Symmetric Tensor Representation

No, I don't understand what Jacques wrote, either, but the SVG shows properly.

Of course, the issues associated with SVG (and MathML and RDF/XML, if it comes to that) go beyond just the presentation. SVG is a well-defined markup based on XML, which requires precise handling on the part of the user agent and the agent generating or creating the SVG. HTML5, on the other hand, is meant to be a less rigorous environment, where the lack of precise application of markup is handled with greater indulgence.

Lack of precise application of semantic markup, I should say, as there are new semantic attributes, values, and elements being added to the spec. One assumes this is so that search engines, such as Google, can better process the web page 'semantics'. In fact, much of the semantics associated with HTML5 seems to be specific to search engine optimization.

I can understand some of the 'foreign markup' implementation concerns about SVG. What I can't understand is why the HTML5 group hasn't split the canvas element off into a separate specification–not if presentational purity is a goal of the specification. Just because it's easier to include the canvas element in HTML5, doesn't mean it should be included, if the underlying purpose of HTML5 is to provide an interim, better behaved, but more forgiving, semantic web page markup. According to the HTML5 spec:

This specification is limited to providing a semantic-level markup language and associated semantic-level scripting APIs for authoring accessible pages on the Web ranging from static documents to dynamic applications.

The scope of this specification does not include addressing presentation concerns (although default rendering rules for Web browsers are included at the end of this specification).

The scope of this specification does not include documenting every HTML or DOM feature supported by Web browsers. Browsers support many features that are considered to be very bad for accessibility or that are otherwise inappropriate. For example, the blink element is clearly presentational and authors wishing to cause text to blink should instead use CSS.

Blink is presentational, while dashed lines are not? I suppose one could also push line patterns off on CSS, but then why would one not also push stroke style and fill pattern, as well as such esoteric items as maximum miter height?

Comments
1

… but the SVG shows properly.

Not just SVG, … SVG in MathML (in XHTML).

Albeit, visually, it looks the same as the version I left as a comment at Sam's site (sans MathML), the one you're quoting is actually a proper MathML equation.

Someone ought to have complained that the first version was insufficiently semantic …

2
Shelley - 4:41 pm 10/23/2007

"Someone ought to have complained that the first version was insufficiently semantic …"

I don't know what you mean, Jacques.

3

The first version consisted of some Unicode characters juxtaposed with some SVG. In the ("Presentational") MathML version, those characters are wrapped in <mo> elements.

Admittedly, for a really simple equation such as this one, the MathML doesn't add much in the way of semantics. But it adds some. And for more complicated equations, it adds a lot.

Still, if one is going to be a stickler about SVG being insufficiently semantic, that would have been something to pounce upon.

Now, of course, the window of opportunity has closed. Why, even the SVG is wrapped in the MathML <semantics> element. Which, surely, means that even if it wasn't semantic before, it must be now! ;-)

4
Shelley - 4:59 pm 10/23/2007

I was teasing you a bit, but thanks for the longer answer.

I agree with you on the semantics. Regardless, the answer is confusing — why is canvas 'semantic' but MathML or SVG not?

Be interesting to see if any of this goes somewhere with HTML5. In the meantime, thank goodness for XHTML 1.1.

5

I was teasing you a bit…

I figured that, but I couldn't resist pointing out the deliciously unsemantic use of the <semantics> element.

Be interesting to see if any of this goes somewhere with HTML5.

Yes. I'm not holding my breath, though.

Instead, my plan is to do for MTOS what you're doing for WordPress: produce an XHTML-safe version for the masses.

6
James - 5:55 pm 10/23/2007

I've been writing some Python documentation in TeX recently, and the template came with a bunch of macro commands tailored to the task at hand. A real domain-specific language, if I'm not misusing the term the same way Ruby afficionados do. Of course it is then compiled to HTML, and TeX has its own flaws, being turing complete and a stream document format, like OOXML is apparently, instead of being structured like ODF.

I can't help but feel there's a similarity about using DSLs (if you'll allow the Rails usage) to generate simpler, but widely understood output from semantic input. How to give access to the semantic source is then the question, and client-side XSLT comes to mind. Maybe it'd be worth specifying a less horrible way to write transformations that's transformed into XSLT for use by the client. Almost a template system, but client-side and faster than JavaScript templates (have you tried FreeBase?). Needs more thought, particularly with client behaviour like Feed View overrides XSLT stylesheet defined in XML document (no Atom based client-XSL tranformed content for you!) and varying performance.

I tried to copy the TeX logo SVG into this comment, but was unsuccessful even after removing most of the metadata like namespace declarations and RDF(!). Also, the Preview stays yellow after a markup error is fixed. The attraction of Canvas is you could have a box for me to draw in, because of course SVG can't do that. CanvasSVG is cute.

7
anon - 6:26 pm 10/23/2007

In http://burningbird.net/newbook/ch0712.svg should not, for instance:
<desc>Representation between curve control point and end points, dashed red</desc>
<path d="M100,200 L 300,100 L 500,200" fill="none" stroke-dasharray="5,5" stroke="red" />

be instead:
<path d="M100,200 L 300,100 L 500,200" fill="none" stroke-dasharray="5,5" stroke="red">
<desc>Representation between curve control point and end points, dashed red</desc>
</path>

As it stands, the annotations are given as multiple descriptions for the parent grouping element, rather than being associated with the paths, as would seem the intention.

It is strongly recommended that at most one 'desc' and at most one 'title' element appear as a child of any particular element, and that these elements appear before any other child elements…

8
Shelley - 6:46 pm 10/23/2007

Thanks for the note, I'll fix it.

9
anon - 6:51 pm 10/23/2007

Bikesheddy I know, but I figure before-it-gets-in-print is at least the right time for nitpicking.

Agree with everything you've posted about HTML5 and Canvas over the past few weeks, by the way.

10
Shelley - 10:19 pm 10/23/2007

It's good to know, and I would rather fix before rather than after print. Thanks for other comments, too.

James, you have a good point, and no, I haven't implemented SVG for comments yet. I may not: I don't allow images. Links, yes, but not actual images.

CanvasSVG — interesting concept.

11

Shelley, you seem to take opinions on HTML5 you find on the Web as somehow as representative of the WHATWG/HTMLWG community. I think that's unfair. SVG in HTML is not supported because it's unclear how it should be done and probably because there has not been much interest in thus far. I think the same goes for MathML. (Both are supported by XHTML5 of course, but that doesn't help much, unless your name is Sam Ruby.)

As for esoteric features in <canvas>. Those are probably part of the original Safari API. Only a limited amount of features has been added since then and given that there have been quite some interoperability issues it would be unwise to add another set of features (dashed lines and text) and move the HTML5 <canvas> feature to version 3. Hopefully with the next set of browser releases interoperability has improved enough for this to be considered again.

12
Philip Taylor - 8:02 am 10/24/2007

As another minor point, you should call beginPath before drawing each curve, or should call stroke only once – stroke doesn't destroy the current path (because you might want to use it again), which means you're building up a longer and longer path, and the first subpath is being stroked four times (which makes it look a bit odd).

13
Shelley - 9:31 am 10/24/2007

Anne, when it's Ian Hickson, who is leading the HTML5 effort, making the statement, I assume that he probably has a handle on what is or is not happening with HTML5. I don't necessarily believe all members of the group agree, and in fact have pointed out where people disagree.

As for SVG, this is a case where the WhatWG could actually learn from the W3C. The W3C is accused of pie in the sky at times, but one thing it does with a lot of its specifications is make an attempt to incorporate what will be, as much as what is. By that I mean that it looks ahead at what is the probable state of browsers/web what have you at a future time and try to incorporate functionality that may not be useable now, but will be, some day. Somewhat like Mozilla did with its infrastructure work.

SVG is only now starting to take off because of popular browser support. The only browser holding us back in regards to SVG is IE, but then IE holds us back in every other way, so this isn't anything new.

The biggest problem with SVG, though, is how to incorporate into web pages. Right now, it's through elements like object or embed, or integrated into the page but only if you're using XHTML, which provides a challenge of its own.

So those working on HTML5 have a couple of options: they can assume SVG won't take off, won't account for it in the spec, SVG does take off, and HTML5 is limited in usefulness. Or the group can incorporate SVG and take the risk that SVG may or may not take off in the future, but it's better to be prepared than not and why risk the viability of something you've worked on for years?

Right now, I look at the HTML5 specification, at least the one at WhatWG, which I assume is the 'official' spec, and what I see is a specification that looks to be focused more on search engine optimization than taking us into the next generation of the web. But, my own opinion, others have their own.

Regardless, it makes no sense to have Canvas being integrated as part of the HTML5 specification, if HTML5 is semantic, not presentational. The same for the data storage and scripted event stuff–none of that is either markup, layout, or semantic. It's confusing. Again, own opinion, and others obviously differ.

As for dashed lines being 'esoteric', you know, I think that's the first time I've heard dashed lines called esoteric.

14

I take it you have not read the review comments regarding SVG from Web browser implementors on www-svg. Or several blogs talking about how the Last Call phase went there some time ago.

With much interest above I meant much interest in embedding SVG in HTML. I'm sure that if browser vendors start to experiment with that HTML 5 will be updated.

Also, I didn't called dashed lines esoteric. I referred to miter height you mentioned in your post and explained why they're part of the API now.

Oh, and HTML 5 contains more than markup features. It was called Web Applications 1.0 before, which is probably more accurate given what it contains, but it doesn't really matter that much.

15
Shelley - 12:46 pm 10/24/2007

First, Paul, I thought I had a beginPath before each path iteration, and I'm aware that stroke doesn't end the path. I'll look at the code to see what I missed. Thanks.

Links, Anne?

What are you saying in your reply? That my arguments are invalid, or irrelevant because I'm making them other than within an 'approved' list, or some 'approved' time frame?

I has assumed that HTML5 had been become more tightly focused. I have to wonder–who is your audience? Never mind, I'll look at your site. Or is this documented at the W3C now?

16
Shelley - 3:07 pm 10/24/2007

Never mind, Anne, I realize you were responding to my note about interest in SVG in HTML in the future.

But, I would still like the links, if they're handy.

17

These should probably get you started: SVG12: brief clarification on formal objections, SVG Tiny 1.2 in Candidate Wreckommendation stage, and What's Wrong With The SVG Working Group.

As for the audience of HTML 5, I think it's pretty broad. Primary audience consists probably of document authors, application authors, Web browsers, and conformance checkers (and needs of users trump all those).

18

Shelley, I have proposed a few times to publish canvas as a separate specification. First of all, I think it would speed up the process. Because the canvas API is basically done. Plus it could be reused by other technologies. For example, it is perfectly possible to imagine that an SVG 2.0 could use the canvas API for sprite drawing, like in games where there is a mix of vector and bitmap.

And just an information: You are saying why the group has not… The group has not yet decided anything with regards to the content of HTML 5. The document is still an editor draft without any first Working Draft published.

Oh and I have forgotten the official spec doesn't exist yet. The HTML 5 editor's draft is available on the W3C Web site and is exactly the same document than the one posted on the Opera, Apple, Mozilla Web site. Just the style sheet is changed.

19
Shelley - 7:43 pm 10/29/2007

Karl, frankly, it's a little confusing figuring out what's happening with HTML5. But, yeah, it doesn't make sense to keep Canvas in the spec.

SVG and Canvas complement each other, as you note. But both should be defined as specs outside of, well, what HTML5 is.

20
karl dubost, W3C - 11:07 pm 10/29/2007

I will be happy to clear up any misunderstandings or confusion. :) You can ask me, in an email if you prefer and make it public.

Thanks to all those who have contributed to the discussion. Comments are now closed, but you can contact the author of the post directly.