¿Qué son los gráficos HTML?

En el lenguaje de marcado de hipertexto (HTML), hay varias formas de mostrar y crear gráficos en un documento HTML. El tipo de gráficos HTML más utilizado son las imágenes que se colocan directamente en la página HTML, llamadas imágenes en línea, aunque existen otros métodos, como el uso de un lenguaje de secuencias de comandos o una aplicación web compilada, que se pueden utilizar para lograr los mismos resultados. Para gráficos generados dinámicamente para cuadros o gráficos, se pueden usar gráficos vectoriales escalables (SVG). También hay algunos gráficos HTML básicos que son compatibles con la especificación del lenguaje y no requieren archivos externos como líneas horizontales y viñetas en una lista. Se pueden lograr gráficos HTML más complejos mediante el uso de un lenguaje de secuencias de comandos, hojas de estilo en cascada (CSS) y el elemento de lienzo HTML, lo que brinda una opción nativa para algunos efectos que anteriormente solo eran posibles a través de objetos externos y complementos.

Con mucho, los gráficos HTML en línea son la forma más utilizada y más simple de colocar una imagen en un documento HTML. Básicamente, esto implica crear una imagen en un editor de imágenes, guardarla en un formato de archivo de uso común y luego especificar el nombre y la ubicación del archivo de imagen en el documento HTML con la etiqueta IMG. Además de la simplicidad de incorporar un gráfico en línea en un documento, el motor de representación en la mayoría de los navegadores web puede colocar fácilmente el gráfico en diseños de página más complejos sin ningún artefacto de formato. Una complicación que puede ocurrir con una imagen en línea es que es posible que el tamaño de la imagen deba ajustarse para ajustarse a pantallas excepcionalmente grandes o pequeñas cuando se visualizan, lo que podría reducir la calidad de la imagen.

Los gráficos vectoriales escalables son un estilo más complejo de gráficos HTML. Una imagen SVG se dibuja definiendo formas, trazados y grosores de línea y se dibuja sobre la marcha mientras el usuario está viendo el documento. Esto hace que SVG sea una buena opción para mostrar datos dinámicos, como cuadros o gráficos, pero los hace muy poco prácticos para otros tipos de gráficos, como la construcción de imágenes fotorrealistas. Para gráficos HTML simples, y en situaciones en las que no se puede cargar un archivo de imagen externo, SVG podría ser una opción viable.

Con el desarrollo del estándar de lenguaje HTML versión 5 (HTML5), es posible crear gráficos HTML dinámicos dentro del lenguaje HTML básico. Esto se hace dibujando directamente en una superficie especial conocida como el lienzo en un documento HTML. Mediante el uso de JavaScript® y CSS, este método puede crear animaciones o juegos que pueden responder a la entrada del usuario o ajustar gráficos dependiendo de la configuración del navegador web u otros datos. Sin embargo, crear un gráfico HTML5 puede ser un procedimiento complejo que podría dar como resultado largos bloques de código de secuencias de comandos que podrían ejecutarse muy lentamente en algunas computadoras o dispositivos.