HTML SVG
Antes, o mini projeto pedia um site pessoal pequeno. Esta lição inicia uma pista opcional de gráficos. SVG permite ao HTML desenhar ícones e formas nítidas com matemática, não píxeis. Âmbito prático: como pôr SVG na página — não um curso completo de design.
Por que SVG num curso HTML
Imagens raster ficam desfocadas ao ampliar. SVG descreve caminhos e formas — o logo mantém-se nítido. Principiantes veem SVG como ícone de cabeçalho ou distintivo. Saber em linha vs ficheiro mantém páginas leves e acessíveis.
Resposta direta
1) Em linha: árvore svg no HTML. 2) Ficheiro: guarde .svg e carregue com img + alt. 3) Prefira em linha para CSS/JS ou nome preciso. 4) Prefira img para logos estáticos. 5) Nomeie gráficos com significado. 6) Este curso só cobre incorporação.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
SVG em linha minúsculo
SVG em linha é só marcação. Um círculo com viewBox e nome acessível mostra o trabalho HTML: o browser desenha; você controla tamanho e significado.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
Ler a demo em linha
- svg é a raiz
- width/height caixa de layout; viewBox coordenadas
- circle é uma forma filha
- role=img mais aria-label nomeia o gráfico
- redimensionar mantém nitidez
- o mini projeto usou img para fotos; aqui a «imagem» pode ser marcação
SVG como ficheiro de imagem
Se logo.svg existe, trate como media: src e alt útil. Os caminhos devem coincidir com a pasta.
<img src="images/logo.svg" alt="Site logo" width="120">
Ler o padrão de ficheiro
- src aponta para .svg
- alt leva o nome acessível
- width controla o tamanho; vetores escalam limpo
- CSS estiliza a caixa img mais facilmente que cada caminho em linha
- Reutilize um ficheiro em várias páginas
- A seguir canvas desenha com píxeis JS — outra ferramenta
Escolher em linha vs ficheiro
- Ícone a colorir com CSS: muitas vezes em linha
- Logo de marca estático: img
- Fotos: formatos raster
- Ilustração enorme em linha: prefira ficheiro
- Gráfico com significado: nomeie sempre
- Authoring SVG profundo: caminho posterior
Prática — SVG na página
- Cole o círculo; confirme o render.
- Mude width/height — continua nítido.
- Carregue .svg com img+alt.
- Remova aria-label/alt um momento.
- Ícone em linha junto a um título na cópia do mini projeto.
- Frase: SVG é marcação ou ficheiro vetorial — não substitui fotos.
- Antevisão: canvas desenha com script.
Erros fáceis
- Esquecer nomes acessíveis
- Colar árvores SVG enormes em linha
- Usar SVG para fotos
- Omitir viewBox
- Confundir SVG com canvas
- Tratar a intro como curso de ilustração
- Largar hábitos a11y do mini projeto
Resumo
- SVG desenha formas e ícones independentes da resolução
- Em linha com svg ou ficheiro com img
- Nomeie gráficos com significado
- Vetores escalam; fotos ficam raster
- O mini projeto foi o build; aqui começa o gráfico opcional
- Seguinte: canvas em HTML
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo