Vad är HTML-grafik?

I HyperText Markup Language (HTML) finns det ett antal sätt att visa och skapa grafik i ett HTML-dokument. Den mest använda typen av HTML-grafik är bilder som placeras direkt på HTML-sidan, kallade inline-bilder, även om det finns andra metoder – som att använda ett skriptspråk eller en kompilerad webbapplikation – som kan användas för att uppnå samma resultat. För dynamiskt genererad grafik för diagram eller grafer kan skalbar vektorgrafik (SVG) användas. Det finns också en del grundläggande HTML-grafik som stöds av språkspecifikationen och som inte kräver externa filer som horisontella linjer och punkter i en lista. Mer komplex HTML-grafik kan uppnås genom att använda ett skriptspråk, cascading style sheets (CSS) och HTML-canvas-elementet, vilket ger ett inbyggt alternativ för vissa effekter som tidigare endast var möjliga genom externa objekt och plugin-program.

Överlägset, inline HTML-grafik är det mest använda och det enklaste sättet att placera en bild i ett HTML-dokument. Detta innebär i princip att skapa en bild i en bildredigerare, spara den i ett vanligt filformat och sedan specificera namnet och platsen för bildfilen i HTML-dokumentet med IMG-taggen. Bortsett från enkelheten med att införliva en inline-grafik i ett dokument, kan renderingsmotorn i de flesta webbläsare enkelt placera grafiken i mer komplexa sidlayouter utan några formateringsartefakter. En komplikation som kan uppstå med en inline-bild är att bildstorleken kan behöva skalas för att passa på exceptionellt stora eller små skärmar när den visas, vilket potentiellt minskar bildens kvalitet.

Skalbar vektorgrafik är en mer komplex stil av HTML-grafik. En SVG-bild ritas genom att definiera former, banor och linjevikter och ritas i farten när användaren tittar på dokumentet. Detta gör SVG till ett bra val för att visa dynamisk data som diagram eller grafer, men det gör dem väldigt opraktiska att använda för andra typer av grafik, som att konstruera fotorealistiska bilder. För enkel HTML-grafik, och i situationer där en extern bildfil inte kan laddas, kan SVG vara ett genomförbart alternativ.

Med utvecklingen av språkstandarden HTML version 5 (HTML5) är dynamisk HTML-grafik möjlig att skapa inom det grundläggande HTML-språket. Detta görs genom att rita direkt till en speciell yta som kallas duken i ett HTML-dokument. Genom att använda JavaScript® och CSS kan denna metod skapa animationer eller spel som kan svara på användarinmatning eller justera grafik beroende på webbläsarens inställningar eller annan data. Att skapa en HTML5-grafik kan dock vara en komplex procedur som kan resultera i långa block av skriptkod som kan köras mycket långsamt på vissa datorer eller enheter.