Uma introdução ao canvas e ao svg

Até agora, lidamos principalmente com conteúdo textual e imagens tradicionais (JPG, PNG, GIF). Mas e se você precisar desenhar gráficos, ilustrações interativas, animações complexas ou até mesmo jogos diretamente no navegador, sem depender de arquivos de imagem estáticos?

Para isso, o HTML5 nos oferece duas tecnologias poderosas: <canvas> e <svg>. Ambas permitem criar gráficos vetoriais e rasterizados diretamente no HTML, mas com abordagens e casos de uso bem diferentes.

A tag <canvas>: a tela de pintura do navegador

A tag <canvas> é como uma tela de pintura em branco no seu documento HTML. Por si só, ela não desenha nada. Para desenhar nela, você precisa usar JavaScript.

Como funciona:

1. Você define uma tag <canvas> com id, width e height.
2. Com JavaScript, você obtém o "contexto de renderização" do canvas (geralmente 2D).
3. Usa métodos do contexto para desenhar formas, linhas, texto, imagens e até mesmo animações.

Características principais:

• Gráficos Rasterizados (Bitmap): O <canvas> desenha pixels. Quando você desenha uma linha, ela é convertida em pixels. Se você ampliar o desenho, ele pode pixelizar (ficar borrado).
• Baseado em Pixels: Ideal para manipulação de pixels, como edição de imagens, jogos complexos, visualizações de dados com muitos pontos.
• Performance: Pode ser muito performático para animações e jogos, pois manipula diretamente os pixels.
• JavaScript Obrigatório: Não funciona sem JavaScript.

Exemplo básico:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Canvas</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    canvas { border: 1px solid #ccc; background-color: #f0f0f0; }
  </style>
</head>
<body>

  <h1>Desenho com Canvas</h1>

  <canvas id="minhaTela" width="400" height="200">
    Seu navegador não suporta a tag canvas.
  </canvas>

  <script>
    const canvas = document.getElementById('minhaTela');
    const ctx = canvas.getContext('2d'); // Obtém o contexto 2D

    // Desenha um retângulo
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 75); // x, y, largura, altura

    // Desenha um círculo
    ctx.beginPath(); // Inicia um novo caminho
    ctx.arc(250, 100, 40, 0, Math.PI * 2, true); // x, y, raio, angulo inicial, angulo final, sentido
    ctx.fillStyle = 'red';
    ctx.fill(); // Preenche o círculo

    // Desenha texto
    ctx.font = '20px Arial';
    ctx.fillStyle = 'green';
    ctx.fillText('Olá Canvas!', 10, 30);
  </script>

</body>
</html>

Casos de uso:

• Jogos 2D e 3D.
• Edição de imagens em tempo real.
• Visualização de dados complexos (gráficos dinâmicos).
• Animações de partículas.

A tag <svg>: gráficos vetoriais escaláveis

A tag <svg> (Scalable Vector Graphics) é uma linguagem baseada em XML para descrever gráficos vetoriais bidimensionais. Diferente do <canvas>, o SVG descreve formas usando XML, e essas formas são renderizadas pelo navegador.

Como funciona:

1. Você define uma tag <svg> com width e height.
2. Dentro da tag <svg>, você usa outras tags SVG (ex: <circle>, <rect>, <path>, <text>) para descrever as formas.
3. O navegador lê essas descrições e desenha o gráfico.

Características principais:

• Gráficos Vetoriais: O SVG descreve formas usando matemática (pontos, linhas, curvas). Isso significa que ele pode ser escalado para qualquer tamanho sem perder qualidade ou pixelizar.
• Baseado em XML: Cada elemento SVG é um elemento no DOM, o que significa que pode ser manipulado com CSS e JavaScript (assim como elementos HTML).
• SEO Amigável: O texto dentro do SVG é texto real, o que significa que é indexável por mecanismos de busca.
• Acessibilidade: Elementos SVG podem ter atributos de acessibilidade.
• Pode ser Inline ou Externo: Pode ser inserido diretamente no HTML ou referenciado como um arquivo .svg externo.

Exemplo básico:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de SVG</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    svg { border: 1px solid #ccc; background-color: #f0f0f0; }
    .circulo-svg {
      fill: purple;
      stroke: black;
      stroke-width: 2;
    }
    .retangulo-svg {
      fill: orange;
      stroke: darkred;
      stroke-width: 3;
    }
  </style>
</head>
<body>

  <h1>Desenho com SVG</h1>

  <svg width="400" height="200">
    <!-- Desenha um retângulo -->
    <rect x="50" y="50" width="100" height="75" class="retangulo-svg"></rect>

    <!-- Desenha um círculo -->
    <circle cx="250" cy="100" r="40" class="circulo-svg"></circle>

    <!-- Desenha texto -->
    <text x="10" y="30" font-family="Arial" font-size="20" fill="green">Olá SVG!</text>
  </svg>

</body>
</html>

Casos de uso:

• Ícones e logotipos (escaláveis para qualquer resolução).
• Gráficos e diagramas estáticos ou com animações simples.
• Ilustrações complexas que precisam ser nítidas em qualquer zoom.
• Mapas interativos.

Diferenças chave entre <canvas> e <svg>

Resumindo

• <canvas>:
  • Uma "tela de pintura" baseada em pixels.
  • Desenha gráficos rasterizados usando JavaScript.
  • Ideal para jogos, edição de imagens, animações complexas.
  • Pixeliza ao ser ampliado.
• <svg>:
  • Uma linguagem para descrever gráficos vetoriais usando XML.
  • Desenha formas que podem ser escaladas sem perda de qualidade.
  • Ideal para ícones, logotipos, gráficos, ilustrações.
  • Pode ser manipulado com CSS e JavaScript, e é SEO amigável.

A escolha entre <canvas> e <svg> depende do tipo de gráfico que você precisa criar e das suas necessidades de interatividade, escalabilidade e performance.