Ce sunt graficele HTML?

În HyperText Markup Language (HTML), există o serie de moduri de a afișa și de a crea elemente grafice într-un document HTML. Cel mai utilizat tip de grafică HTML sunt imaginile care sunt plasate direct în pagina HTML, numite imagini inline, deși există și alte metode – cum ar fi utilizarea unui limbaj de scripting sau a unei aplicații web compilate – care pot fi folosite pentru a obține aceleași rezultate. Pentru graficele generate dinamic pentru diagrame sau grafice, se pot folosi grafice vectoriale scalabile (SVG). Există, de asemenea, câteva elemente grafice HTML de bază care sunt acceptate de specificația limbii și nu necesită fișiere externe, cum ar fi linii orizontale și marcatori într-o listă. Grafice HTML mai complexe pot fi realizate prin utilizarea unui limbaj de scripting, a foilor de stil în cascadă (CSS) și a elementului HTML canvas, oferind o opțiune nativă pentru unele efecte care anterior erau posibile numai prin obiecte și pluginuri externe.

De departe, grafica HTML inline este cea mai utilizată și cea mai simplă modalitate de a plasa o imagine într-un document HTML. Practic, aceasta implică crearea unei imagini într-un editor de imagini, salvarea acesteia într-un format de fișier utilizat în mod obișnuit și apoi specificarea numelui și locației fișierului imagine în documentul HTML cu eticheta IMG. Pe lângă simplitatea încorporării unui grafic în linie într-un document, motorul de randare din majoritatea browserelor web poate plasa cu ușurință graficul în machete de pagină mai complexe, fără artefacte de formatare. O complicație care poate apărea în cazul unei imagini în linie este că dimensiunea imaginii ar putea fi nevoită să fie scalată pentru a se potrivi pe ecrane excepțional de mari sau mici atunci când este vizualizată, ceea ce poate reduce calitatea imaginii.

Grafica vectorială scalabilă este un stil mai complex de grafică HTML. O imagine SVG este desenată prin definirea formelor, căilor și greutăților liniilor și este desenată din mers pe măsură ce utilizatorul vizualizează documentul. Acest lucru face ca SVG să fie o alegere bună pentru afișarea datelor dinamice, cum ar fi diagrame sau grafice, dar le face foarte imposibil de utilizat pentru alte tipuri de grafică, cum ar fi construirea de imagini fotorealiste. Pentru grafica HTML simplă și în situațiile în care un fișier imagine extern nu poate fi încărcat, SVG ar putea fi o opțiune viabilă.

Odată cu dezvoltarea standardului de limbă HTML versiunea 5 (HTML5), este posibil să se creeze grafice HTML dinamice în limbajul HTML de bază. Acest lucru se face desenând direct pe o suprafață specială cunoscută sub numele de pânză dintr-un document HTML. Prin utilizarea JavaScript® și CSS, această metodă poate crea animații sau jocuri care pot răspunde la intrarea utilizatorului sau pot ajusta grafica în funcție de setările browserului web sau de alte date. Crearea unei grafice HTML5, totuși, poate fi o procedură complexă care ar putea duce la blocuri lungi de cod de scriptare care s-ar putea executa foarte lent pe unele computere sau dispozitive.