ODIN Blog

As use of HTML5 is spreading, canvas and SVG (Scalable Vector Graphics) are being more widely used to create images within a web page. They are both supported by all major browsers (except Internet Explorer 8 and below) and are open alternatives to Flash for animation and graphic interaction. Why do we need two image-creation methods, however, and when should either be used?

What is SVG?

• Has been a W3C standard for several years.
  
• XML-based language using tags to create image objects.
  
• Resize as much as you want without losing quality.
  
• Every element is available within the SVG DOM so you can attach JavaScript events to them.
  
• Editing a single object or group of objects is easy.
  
• Slows down with a large number of objects.
  
• SVG is accessible - text is selectable just like regular text. Accessibility software needs to catch up, however.
  

What is canvas?

• At the time of writing, part of the HTML5 specification.
  
• Pixel-based images using JavaScript to edit pixels.
  
• Images become pixellated when enlarged.
  
• Everything is drawn with pixels. To change anything in the image you have to edit the pixels.
  
• Redrawing the pixels in the canvas area is fast.
  
• Slows down with a large drawing area.
  
• Canvas is not accessible (as of late 2009) - text is unreadable by e.g. screen readers and search engines.
  

So what are canvas and SVG best suited for?
Because of its speed of manipulation, canvas is best when fast rendering and redrawing is needed, e.g. animations and games, such as in this example: http://www.benjoffe.com/code/demos/canvascape/

SVG is better suited for large-scale rendering and interactivity, e.g. maps and user interfaces, such as in this slideshow demo: http://people.mozilla.com/~vladimir/demos/photos.svg

It should also be noted that it's not necessarily a choice of using one or the other. If required, there's a happy middle ground where SVG and canvas can be layered together to make the most of their respective strengths.

N.B. To work around Internet Explorer's lack of support, please look at explorercanvas for canvas capability and Raphael for cross-browser vector graphics.

Further reading: SVG vs. Canvas on Trivial Drawing Application

I was privileged to be invited to come and present at London Web Standards, and honoured that the tickets sold out within 45 minutes of being available. So, no pressure then ...

Assisted by the lovely Henny who advanced my slides and alt-tabbed from slideshow to demo, I sneezed and snuffled my way through a presentation called HTML5 and Friends (PDF, 723K).

The resources that I demoed were

• Canvas Paint
• canvas first-person shooter
• canvas first-person gifter
• the excanvas library to port canvas to Internet Explorer
• Filament Group's jQuerty plugin using canvas for graphing data tables
• Raphaël JavaScript Library to make SVG that also works in Internet Explorer
• SVG Web is a JavaScript library which provides SVG support on Internet Explorer (alpha code: not ready for production)
• My HTML5 forms demo, including range, date, regex validation
• modernizr - a small HTML5 capability detection library

You can also download Opera 10 which I was using to demo.

Opera Developer Network has some beginner's canvas tutorials available:

1. HTML 5 canvas - the basics
2. Creating an HTML 5 canvas painting application
3. Creating pseudo 3D games with HTML 5 canvas and raycasting
4. Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2

For the second half of the talk, I built an HTML5 page through the magic of live coding (with lavish prizes!).

Consequently there are no slides to publish, but I have an article called Designing a blog with HTML that covers the same ground. (Two articles on my personal blog cover it in much more detail: Redesigning with HTML 5 and WAI-ARIA and Marking up a blog with HTML 5 (part 2).)

The shocking looseness of HTML5's validation rules is discussed in an article I wrote called HTML 5 + XML = XHTML 5. The main take-home should be that, although you can mix quoted or unquoted attributes, upper and lower case freely (even in the same page), you shouldn't: if you do, you'll make your code an unreadable and therefore unmaintainable mess. Choose one coding convention that works for you and stick to it.

Some other useful resources:

• HTML5 validator
• HTML5 outliner
• the author's version of the HTML5 specification (much shorter than the main version and generated from the same source, but without all the parsing rules and algorithms for browser manufacturers and other implementors)
• HTML5 Doctor (I'm a co-curator of this site)
• SVG vs. Canvas on Trivial Drawing Application: a comparison of canvas and SVG

Thanks to all who attended and asked great questions. I'm sorry that I had to charge off before the bar shut (not like me at all!) but my son was sick so I needed to get the last train home.

I was privileged to be invited to speak on HTML5 at Future of Web Apps London last week. My talk was called HTML5: The Future of Web Applications (PDF 636K). It's a newly written talk that concentrates on the apps side of the language, rather than the markup side that I usually show. That seemed appropriate given the apps-focus of the show, and the HTML5 editor's assertion that HTML5 is

extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.

The video is now available, as is a transcript.

The resources that I demoed were

• Eye-candy canvas
• canvas first-person shooter
• canvas first-person gifter
• the excanvas library to port canvas to Internet Explorer
• Filament Group's jQuerty plugin using canvas for graphing data tables
• Raphaël JavaScript Library to make SVG that also works in Internet Explorer
• SVG Web is a JavaScript library which provides SVG support on Internet Explorer (alpha code: not ready for production)
• My HTML5 forms demo, including range, date, placeholder, regex validation (try in Opera and Chrome)
• modernizr - a small HTML5 capability detection library
• HTML5demos.com - Remy Sharp's demos of geolocation, offline storage and web database and many others
• Video demos

You might also want to check out

• SVG vs. Canvas on Trivial Drawing Application: a comparison of canvas and SVG
• HTML5 Authors spec
• A video of Dean Edwards demoing his unreleased JavaScript library that detects and plugs the holes in current browsers' HTML5 support

Opera Developer Network has some beginner's canvas tutorials available:

1. HTML 5 canvas - the basics
2. Creating an HTML 5 canvas painting application
3. Creating pseudo 3D games with HTML 5 canvas and raycasting
4. Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2

Early the next morning, I was woken by the organisers asking me to do a second talk. As I had no time to prepare, I coded an HTML5 page live. Five minutes before going on stage, my laptop died; thanks so much to the guys on the Microsoft stand who lent me a replacement Windows machine, installed the necessary software and got my lappie running again!

Consequently there are no slides to publish, but I have an article called Designing a blog with HTML that covers the same ground. (Two articles on this blog cover it in much more detail: Redesigning with HTML 5 and WAI-ARIA and Marking up a blog with HTML 5 (part 2).)

Some other useful resources:

• HTML5 validator
• HTML5 outliner
• HTML5 Doctor (I'm a co-curator of this site)

You can also download Opera 10 which I was using to demo.

There is a snippet of an interview with me about HTML5 and mobile by Natali del Conte.

Finally, thanks to all those who came along and gave me great feedback. I was literally hoarse from chatting in the breaks, in the pub and everywhere else about HTML5. The biggest gripe (apart from those appalled by the fact that you can use XML syntax or not, as you wish) was the stylability of the new form elements and their error messages. I'd love to hear your feedback on this.