O que são gráficos em HTML?
Na linguagem HyperText Markup Language (HTML), existem várias maneiras de exibir e criar gráficos em um documento HTML. O tipo de gráfico HTML mais amplamente usado são as imagens colocadas diretamente na página HTML, chamadas imagens embutidas, embora existam outros métodos - como usar uma linguagem de script ou aplicativo da Web compilado - que podem ser usados para obter os mesmos resultados. Para gráficos gerados dinamicamente para tabelas ou gráficos, gráficos vetoriais escaláveis (SVG) podem ser usados. Também existem alguns gráficos HTML básicos suportados pela especificação de idioma e não requerem arquivos externos, como linhas horizontais e marcadores em uma lista. Gráficos HTML mais complexos podem ser obtidos com o uso de uma linguagem de script, CSS (Cascading Style Sheets) e o elemento de tela HTML, fornecendo uma opção nativa para alguns efeitos que antes eram possíveis apenas através de objetos e plug-ins externos.
De longe, os gráficos HTML embutidos são a maneira mais usada e mais simples de colocar uma imagem em um documento HTML. Isso basicamente envolve a criação de uma imagem em um editor de imagens, salvando-a em um formato de arquivo comumente usado e depois especificando o nome e o local do arquivo de imagem no documento HTML com a tag IMG. Além da simplicidade de incorporar um gráfico embutido em um documento, o mecanismo de renderização na maioria dos navegadores da Web pode facilmente colocar o gráfico em layouts de página mais complexos, sem artefatos de formatação. Uma complicação que pode ocorrer com uma imagem embutida é que o tamanho da imagem pode precisar ser redimensionado para caber em telas excepcionalmente grandes ou pequenas quando visualizadas, reduzindo potencialmente a qualidade da imagem.
Gráficos vetoriais escaláveis são um estilo mais complexo de gráficos HTML. Uma imagem SVG é desenhada definindo formas, caminhos e pesos de linha e é desenhada em tempo real enquanto o usuário está visualizando o documento. Isso torna o SVG uma boa opção para exibir dados dinâmicos, como tabelas ou gráficos, mas os torna muito impraticáveis para outros tipos de gráficos, como a construção de imagens fotorrealistas. Para gráficos HTML simples e em situações em que um arquivo de imagem externo não pode ser carregado, o SVG pode ser uma opção viável.
Com o desenvolvimento do padrão da linguagem HTML versão 5 (HTML5), é possível criar gráficos HTML dinâmicos na linguagem HTML básica. Isso é feito desenhando diretamente em uma superfície especial conhecida como tela em um documento HTML. Usando JavaScript® e CSS, esse método pode criar animações ou jogos que podem responder à entrada do usuário ou ajustar gráficos, dependendo das configurações do navegador da web ou de outros dados. A criação de um gráfico HTML5, no entanto, pode ser um procedimento complexo que pode resultar em longos blocos de código de script que podem ser executados muito lentamente em alguns computadores ou dispositivos.