Esta é a forma como a especificação DOM define um “DOM”:

O Document Object Model (DOM) é um Application Programming Interface (API) para HTML válido e documentos XML bem formatados. Ele define a estrutura lógica dos documentos e o modo como um documento é acessado e manipulado.

Em outras palavras, o DOM é uma forma padrão para permitir que as linguagens de programação interajam com documentos HTML / XML. O W3C fornece, o que é chamado de linguagem de vinculações, para o ECMAScript. Isto significa que as funcionalidades definidos na especificação DOM foram implementadas nessa linguagem.

ECMAScript é uma “uniformização” da língua (script) dos “homens das cavernas” – Netscape JavaScript e Microsoft JScript para que todos os browsers possam compreender instruções escritas usando o ECMAScript.

Agora, existem três grandes “dialetos” do ECMAScript: JavaScript (Firefox / Chrome / Safari), JScript (IE), e ActionScript (Adobe Flash / Flex). Estes são chamados dialetos como suporte a código escrito antes da normalização e fornecem alguns recursos não disponíveis no ECMAScript ou em outros dialetos.

Os navegadores fornecem uma implementação das interfaces do DOM que permite ECMAScript (ou dialetos suportados) interagirem com o DOM de um documento XML/HTML. Assim, a maioria dos browsers decentes, lançado conforme os padrões, dizem qual ECMAScript é suportado para cada versão do seu navegador.

O DOM de uma página HTML tem uma “árvore-como estrutura” quando visualizadas. É importante notar que o DOM não representa o conteúdo do HTML, mas representa apenas objetos através dos quais o conteúdo pode ser acessado. Esses objetos são modelados após a marcação que existe na página HTML. As relações, funções, comportamentos e atributos desses objetos são identificados pelo DOM.

Bom, é isso! Você normalmente não precisa de saber sobre interfaces DOM principalmente se você trabalhar com uma biblioteca JavaScript. Mas se você estiver interessado, Quirksmode (http://www.quirksmode.org) tem uma excelente introdução ao DOM.

O QUE É SVG?

SVG é uma linguagem para descrever gráficos bidimensionais e aplicações gráficas em XML. Alguns exemplos de SVG são: o logo da Wikipedia (http://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) e o “Hello World” do SVG chamado de “Tiger” (http://www.amplesdk.com/examples/svg/tiger). Veja o fonte desses dois arquivos SVG para ver como SVG parece.

Demo SVG:

<svg xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 100"
  width="200px" height="100px">
  <circle cx="50" cy="50" r="30"
  style="stroke:none; fill:#ff0000;"/>
  <g transform="translate(100, 20) scale(1.65)">
  <polygon points="36 25, 25 36, 11 36, 0 25,
  0 11, 11 0, 25 0, 36 11"
  style="stroke:none; fill:#0000ff;" />
  </g>
  <rect x="60" y="20" height="60" width="60"
  style="stroke:none; fill:#00ff00;
  fill-opacity: 0.5;" />
</svg>

O QUE É CANVAS?

A especificação do HTML 5 define da seguinte forma: “Elemento de tela que representa um processamento gráficos “bitmap” para gerar imagens, gráficos, jogos através de JavaScript”.

Vladimir Vukićević da Mozilla, em 2006, deu uma boa explicação sobre as diferenças entre o SVG e Canvas:

- SVG é baseado em XML. Isto significa que, cada elemento está disponível no DOM SVG (útil quando você deseja anexar os manipuladores de eventos javascript para um elemento). Canvas não é baseado em XML.

- Canvas é processado pixel por pixel. SVG é um monte de vetores e precisa ser manipulado como um grupo de formas. Uma analogia no mundo Photoshop seria, criar um retângulo usando a “ferramenta forma” contra usar o “PaintBrush”.

Demo Canvas:

E aqui está o JavaScript que o criou o desenho:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
  if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx. (); // the circle
  ctx.fillStyle = "#ff0000";
  ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  // move and resize the octagon
  ctx.translate(100, 20);
  ctx.scale(1.65, 1.65);
  ctx.fillStyle = "#0000ff";
  ctx.beginPath();
  ctx.moveTo(36, 25); ctx.lineTo(25, 36);
  ctx.lineTo(11, 36); ctx.lineTo(0, 25);
  ctx.lineTo(0, 11); ctx.lineTo(11, 0);
  ctx.lineTo(25, 0); ctx.lineTo(36, 11);
  ctx.closePath();
  ctx.fill();
  // restore graphics as they
  // were before move and resize
  ctx.restore();
  ctx.fillStyle = "#00ff00";
  ctx.globalAlpha = 0.5;
  ctx.beginPath();
  ctx.rect(60, 20, 60, 60);
  ctx.closePath();
  ctx.fill();
 }
}

QUEM VAI GANHAR?

Mesmo que sejam completamente diferentes na sua natureza e finalidade, há várias coisas que pode ser feito usando “Canvas” e “SVG”. A recente popularização do elemento “Canvas” parecem para algumas pessoas a morte do SVG. Mas pelo que notei está longe da verdade.

O “Canvas” é tão bom como uma imagem – mas ele não manipula pixel por pixel. Neste momento, elemento Canvas não suporta os “manipuladores” de eventos (por exemplo, ter um retângulo 20x60px dentro de um canvas que seja clicável). Já com o SVG isso é possível.

Canvas em seu estado “natural” não é acessível. O SVG, porém, é bastante acessível.

No entanto existe diferenças significativas de desempenho entre Canvas e SVG. O resultado do experimento descrito no link (http://www.borismus.com/canvas-vs-svg-performance) é que: Canvas é mais adequado para um “gráficos intensivos” onde o objeto são os redesenhos com freqüência (como um jogo), enquanto o SVG é melhor para aplicações que envolvem grandes áreas de processamento (como Google Maps).

POSSO USÁ-LOS AGORA?

Sim, pode. Existem muitas iniciativas para permitir que os navegadores que não suportam SVG ou Canvas tornarem-se “usáveis” por outros meios. O Google tem um impressionante projeto SVG Web (http://code.google.com/p/svgweb/) que usa o Flash para renderizar SVG em navegadores que não suportam SVG nativamente. Para Canvas, o Google tem uma biblioteca “explorecanvas” (http://code.google.com/p/explorercanvas/) que utiliza VML (ou Silverlight) para processar os elementos Canvas (basta incluir o arquivo excanvas.js, e ele deve funcionar) no Internet Explorer.

ENTÃO… QUEM GANHA?

Ambos. Estas é uma fase fantástica para SVG e Canvas. Finalmente temos uma alternativa natural para o “Flash” e animação de necessidade básica. Mantenha seus olhos abertos no “mailing list” do “W3C HTML Working Group” (http://lists.w3.org/Archives/Public/public-html/) para as últimas notícias.