ViewBox e coordenadas

viewBox define o sistema interno. width/height do SVG definem o tamanho na tela. São ideias diferentes.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• viewBox tem quantos números?
• Se o viewBox dobra de tamanho, o desenho parece?
• preserveAspectRatio entra quando?

Dois mundos

O exemplo usa viewBox 0 0 100 50 com largura 480 na tela. Os números internos são “lógicos”.

Erro comum: achar que cx=“75” são pixels da tela.

Afastar

Mude para viewBox="0 0 200 100" e veja o desenho encolher visualmente.

<svg width="480" height="240" viewBox="0 0 100 50">

Pare e experimente. Preveja o “zoom out”.

Enquadrar cartazes

Ilustrações do laboratório mantêm viewBox estável para não quebrar layout.

Não publique exercícios com dados reais. Conteúdo fictício de Recife.

Como o exemplo desta etapa funciona

A referência desta etapa reúne index.html, styles.css. Abra o resultado pronto, localize o trecho que produz viewbox e coordenadas e só então compare com inicio. Os dois diretórios são independentes: você pode errar, restaurar e repetir sem buscar arquivos de outro capítulo.

Leitura do resultado

Observe primeiro o que permanece parado e o que responde a uma ação. Depois altere um único número, cor, coordenada ou condição. Antes de recarregar, escreva o efeito esperado. Essa previsão separa uma mudança compreendida de uma tentativa ao acaso.

Diagnóstico guiado

Se a cena sumir, confira a primeira mensagem do Console e o caminho dos arquivos. Em SVG, revise viewBox, atributos e ordem das formas. Em p5.js, confirme a biblioteca local e se setup e draw foram escritos corretamente. Em Canvas ou WebGL, verifique o contexto e os limites numéricos antes de mudar outra coisa.

Critério de avanço

Avance quando conseguir descrever a cena, modificar um parâmetro com previsão e restaurar a referência sem copiar arquivos de uma etapa posterior.

Atividades

1. Quatro números do viewBox?
2. width do SVG é o viewBox?
3. Para que serve enquadrar?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. min-x min-y largura altura.

Atividade 2. Não — tamanho de exibição.

Atividade 3. Controlar o que aparece e a escala.

Exemplo deste capítulo: pacote de exemplos/06-viewbox/.

O arquivo completo

Referência do exemplo 06-viewbox, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ViewBox — Laboratório da Luz</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <a class="skip" href="#conteudo">Ir ao conteúdo</a>
  <header>
    <p class="tag">Laboratório da Luz · Recife</p>
    <h1>ViewBox</h1>
  </header>
  <main id="conteudo">
<p class="dica">viewBox="0 0 100 50" define o sistema de coordenadas interno. O tamanho na tela é outro.</p>
<div class="stage" style="background:#fff"><svg width="480" height="240" viewBox="0 0 100 50" style="border:2px solid #1b6b6e;background:#fff">
  <rect x="5" y="5" width="40" height="40" fill="#c45c26"/>
  <circle cx="75" cy="25" r="18" fill="#1b6b6e"/>
</svg></div>
<p>Experimente mudar o viewBox para <code>0 0 200 100</code> e veja o desenho “afastar”.</p>
  </main>
  <footer>
    <p>Conteúdo fictício para estudo local. Não publique dados reais.</p>
  </footer>

</body>
</html>