Что такое графика HTML?

В языке разметки гипертекста (HTML) существует несколько способов отображения и создания графики в документе HTML. Наиболее широко используемым типом HTML-графики являются изображения, которые размещаются непосредственно на HTML-странице и называются встроенными изображениями, хотя существуют и другие методы, такие как использование языка сценариев или скомпилированного веб-приложения, которые можно использовать для достижения тех же результатов. Для динамически генерируемой графики для диаграмм или графиков может использоваться масштабируемая векторная графика (SVG). Есть также некоторые базовые HTML-графики, которые поддерживаются языковой спецификацией и не требуют внешних файлов, таких как горизонтальные линии и маркеры в списке. Более сложная HTML-графика может быть достигнута с помощью языка сценариев, каскадных таблиц стилей (CSS) и элемента HTML-холста, предоставляя встроенную опцию для некоторых эффектов, которые ранее были возможны только через внешние объекты и плагины.

Безусловно, встроенная HTML-графика является наиболее используемым и простым способом размещения изображения в HTML-документе. Это в основном включает создание изображения в редакторе изображений, сохранение его в широко используемом формате файла, а затем указание имени и местоположения файла изображения в документе HTML с тегом IMG. Помимо простоты включения встроенной графики в документ, механизм рендеринга в большинстве веб-браузеров может легко размещать графику в более сложные макеты страниц без каких-либо артефактов форматирования. Одна сложность, которая может возникнуть с встроенным изображением, заключается в том, что размер изображения, возможно, придется масштабировать так, чтобы он соответствовал исключительно большим или маленьким дисплеям при просмотре, что потенциально может снизить качество изображения.

Масштабируемая векторная графика - более сложный стиль графики HTML. SVG-изображение рисуется путем определения форм, контуров и веса линий и отображается на лету, когда пользователь просматривает документ. Это делает SVG хорошим выбором для отображения динамических данных, таких как диаграммы или графики, но делает их очень непрактичными для использования в других типах графики, таких как создание фотореалистичных изображений. Для простой графики HTML и в ситуациях, когда внешний файл изображения не может быть загружен, SVG может быть приемлемым вариантом.

С развитием стандарта языка HTML версии 5 (HTML5) можно создавать динамическую графику HTML на базовом языке HTML. Это делается путем рисования непосредственно на специальной поверхности, известной как холст в документе HTML. Используя JavaScript® и CSS, этот метод может создавать анимацию или игры, которые могут реагировать на ввод пользователя или корректировать графику в зависимости от настроек веб-браузера или других данных. Однако создание графики HTML5 может быть сложной процедурой, которая может привести к появлению длинных блоков кода сценариев, которые могут выполняться очень медленно на некоторых компьютерах или устройствах.