HTML5 Mestre dos Mestres • Aula Suprema 35

Canvas e SVG

Canvas é pixel dinâmico controlado por JavaScript. SVG é vetor semântico baseado em XML. O Mestre escolhe pela natureza do desenho: renderização bruta ou escalabilidade acessível.

Ir para o Desafio Mestre Aula 34 Voltar ao Módulo
NARRAÇÃO MESTRE

Narrador Mestre

Ouça a aula, revise blocos e estude com foco.

Pronto para narrar. As vozes disponíveis dependem do navegador e do sistema.

Abertura de impacto

A web também desenha, calcula e renderiza

Interfaces modernas não vivem apenas de texto e imagens prontas. Dashboards, jogos, mapas, ícones, animações, diagramas e visualizações de dados exigem domínio sobre renderização gráfica nativa.

Promessa da aula:

Você vai entender quando usar a força bruta dos pixels do canvas e quando usar a precisão escalável e semântica do svg.

Pixels dinâmicos

Canvas explicado em profundidade

O canvas é uma superfície de desenho baseada em pixels. Ele reserva uma área, mas não desenha nada sozinho. O JavaScript é o pincel que acessa o contexto 2D e pinta cada forma.

Seu navegador não suporta Canvas. Dados do gráfico: T1 = 40%, T2 = 70%, T3 = 55%, T4 = 90%.
Gráfico Canvas demonstrativo: barras desenhadas por JavaScript em uma superfície de pixels.
<canvas id="meuQuadro" width="500" height="260">
  Seu navegador não suporta Canvas. Veja uma versão textual do gráfico.
</canvas>

<script>
  const canvas = document.getElementById("meuQuadro");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "#38bdf8";
  ctx.fillRect(40, 40, 120, 80);
</script>
  • width/height no HTML: definem a resolução real do desenho.
  • CSS: altera a aparência externa; pode distorcer se usado sem entender a resolução interna.
  • Fallback: conteúdo textual entre <canvas> e </canvas>.
  • Acessibilidade: Canvas não é automaticamente acessível.
Erro comum:

Usar Canvas para texto importante, logotipo ou gráfico sem alternativa textual. Para leitores de tela, o desenho é uma caixa preta.

Vetores semânticos

SVG explicado em profundidade

SVG significa Scalable Vector Graphics. Ele descreve formas com XML e matemática. Cada círculo, linha ou caminho pode existir no DOM, ser estilizado, manipulado e descrito para acessibilidade.

Exemplo de SVG com formas básicas Um retângulo, um círculo, uma linha, um caminho triangular e um texto dentro de um SVG. SVG Mestre
SVG inline com viewBox, circle, rect, line, path e text.
<svg viewBox="0 0 100 100" role="img" aria-labelledby="titulo desc">
  <title id="titulo">Ícone de progresso</title>
  <desc id="desc">Círculo azul com seta indicando avanço.</desc>
  <circle cx="50" cy="50" r="40" fill="blue" />
  <path d="M 35 50 L 50 65 L 70 35" stroke="white" fill="none" />
</svg>
Erro comum:

SVG sem viewBox perde a principal vantagem: escalabilidade responsiva.

Decisão técnica

Canvas vs SVG: pixel versus vetor

Canvas não mantém objetos individuais no DOM: ele pinta pixels. SVG mantém elementos individuais: cada forma pode ser selecionada, estilizada e descrita.

Comparação técnica entre Canvas e SVG
Critério Canvas SVG
Natureza Pixels e bitmap Vetores e XML
Performance Melhor para muitos pixels em movimento Melhor para gráficos vetoriais e estáticos
Acessibilidade Exige alternativa textual externa Pode usar title, desc e ARIA
Escalabilidade Pode borrar ao ampliar Escala sem perder qualidade
Uso ideal Jogos, partículas, simulações e pintura digital Logos, ícones, diagramas, gráficos simples e mapas clicáveis
  • Jogo simples: Canvas.
  • Logo: SVG.
  • Gráfico interativo simples: SVG.
  • Pintura digital: Canvas.
  • Ícone responsivo: SVG.
  • Mapa vetorial clicável: SVG.
Acessibilidade gráfica

Gráfico sem descrição é barreira

Quando um gráfico transmite informação, ele precisa de alternativa textual. No Canvas, isso pode ser uma tabela ou resumo. No SVG, use title, desc e estrutura acessível.

Tabela de fallback: HTML = 90%, CSS = 70%, JavaScript = 45%.
Canvas com fallback textual descrevendo os dados caso a renderização não esteja disponível.
Gráfico vetorial de progresso Três barras indicam domínio alto em HTML, médio em CSS e inicial em JavaScript. Progresso
SVG informativo com title e desc para tecnologias assistivas.

Ícones decorativos devem ser silenciados: 

<svg aria-hidden="true" width="16" height="16">
  <path d="..."></path>
</svg>
  • Não use Canvas para logotipo simples.
  • Não use SVG para milhares de partículas animadas.
  • Não dependa apenas de cor para transmitir informação.
  • Explique gráficos importantes em texto.
  • Use figure e figcaption para contexto.
  • Use aria-hidden="true" em SVG decorativo.
Desafio Mestre

Página de Gráficos com Canvas e SVG

Missão: criar o arquivo graficos-canvas-svg.html provando domínio sobre pixels, vetores, fallback, descrição textual e escolha técnica correta.

Requisitos obrigatórios

  • Arquivo graficos-canvas-svg.html.
  • Doctype HTML5 e html lang="pt-BR".
  • Head completo com charset, viewport, title e meta description.
  • Body com header, nav, main, section, article, aside e footer.
  • H1 com “Página de Gráficos com Canvas e SVG”.
  • Section introdutória explicando Canvas e SVG.
  • Nav interno com links para pelo menos 4 seções.
  • Pelo menos 4 sections com h2.
  • Pelo menos um canvas com width e height.
  • Texto de fallback dentro do canvas.
  • Explicação clara de que Canvas precisa de JavaScript para desenhar.
  • Exemplo conceitual de script usando getContext("2d").
  • Pelo menos um SVG inline com viewBox.
  • SVG contendo circle, rect, line, path e text.
  • Pelo menos um SVG informativo com title e desc.
  • Pelo menos um SVG decorativo com aria-hidden="true".
  • Pelo menos uma figure envolvendo canvas com figcaption.
  • Pelo menos uma figure envolvendo SVG com figcaption.
  • Explicação clara da diferença entre Canvas e SVG.
  • Tabela comparando performance, acessibilidade, escalabilidade e uso ideal.
  • Lista com pelo menos 12 boas práticas para Canvas e SVG.
  • Checklist de acessibilidade gráfica.
Erros que reprovam:
  • Canvas sem fallback.
  • SVG sem viewBox.
  • Gráfico informativo sem descrição textual.
  • Usar Canvas para logo simples.
  • Usar SVG para milhares de partículas dinâmicas.
  • Depender apenas de cor para transmitir dados.
Quiz com gabarito

15 perguntas para provar domínio

  1. O que significa SVG? Scalable Vector Graphics.
  2. Qual tecnologia é baseada em pixels? Canvas.
  3. Qual atributo do SVG define o sistema de coordenadas? viewBox.
  4. Canvas funciona sem JavaScript? Não.
  5. Qual tecnologia mantém elementos no DOM? SVG.
  6. Dimensão padrão do Canvas sem atributos? 300x150 pixels.
  7. SVG perde qualidade ao ampliar? Não.
  8. Onde fica o fallback do Canvas? Entre as tags canvas.
  9. Qual tag SVG cria caminho complexo? path.
  10. Para que serve getContext("2d")? Obter a API de desenho 2D do Canvas.
  11. Melhor para jogos com muitos objetos? Canvas.
  12. Melhor para logotipos? SVG.
  13. Texto dentro de SVG pode ser indexável? Sim.
  14. Como esconder SVG decorativo? aria-hidden="true".
  15. Qual arquivo do desafio? graficos-canvas-svg.html.
GitHub

Registre sua página de gráficos

git status
git add .
git commit -m "aula-35: cria pagina de graficos com canvas e svg"
git push
  • git status: vê o novo arquivo de gráficos.
  • git add .: adiciona o desafio ao stage.
  • git commit: registra seu domínio sobre pixels e vetores.
  • git push: envia a evidência para o portfólio remoto.
Resumo Mestre

Canvas é performance e pixels. SVG é semântica e vetores.

Use Canvas para o dinâmico, intenso e baseado em pixels. Use SVG para o escalável, semântico, manipulável e acessível. A escolha correta é o que transforma desenho em arquitetura visual.

Nota final: 10/10 Supremo.

Esta aula está no nível Mestre dos Mestres porque exige domínio da natureza técnica da renderização web: DOM, pixels, vetores, fallback, acessibilidade, SEO, performance e decisão de arquitetura.

Voltar ao Módulo HTML5 Voltar ao Topo