What Are HTML Graphics?

Article Details
  • Written By: Eugene P.
  • Edited By: Angela B.
  • Last Modified Date: 09 August 2019
  • Copyright Protected:
    Conjecture Corporation
  • Print this Article
Free Widgets for your Site/Blog
Researchers predict that by 2070, Facebook may contain more deceased people's profiles than living users' profiles.  more...

August 19 ,  1934 :  Adolf Hitler officially became the Fuhrer of Germany.  more...

In the HyperText Markup Language (HTML), there are a number of ways to display and create graphics in an HTML document. The most widely used type of HTML graphics are images that are placed directly in the HTML page, called inline images, although there are other methods — such as using a scripting language or compiled web application — that can be used to achieve the same results. For dynamically generated graphics for charts or graphs, scalable vector graphics (SVG) can be used. There also are some basic HTML graphics that are supported by the language specification and do not require external files such as horizontal lines and bullets in a list. More complex HTML graphics can be achieved through the use of a scripting language, cascading style sheets (CSS) and the HTML canvas element, giving a native option for some effects that previously were possible only through external objects and plug-ins.


By far, inline HTML graphics are the most used and the simplest way to place an image in an HTML document. This basically involves creating an image in an image editor, saving it to a commonly used file format, and then specifying the name and location of the image file in the HTML document with the IMG tag. Aside from the simplicity of incorporating an inline graphic in a document, the rendering engine in most web browsers can easily place the graphic into more complex page layouts without any formatting artifacts. One complication that can occur with an inline image is that the image size might need to be scaled to fit on exceptionally large or small displays when viewed, potentially reducing the quality of the image.

Scalable vector graphics are a more complex style of HTML graphics. An SVG image is drawn by defining shapes, paths and line weights and is drawn on the fly as the user is viewing the document. This makes SVG a good choice for displaying dynamic data such as charts or graphs, but it makes them very impractical to use for other types of graphics, such as constructing photorealistic images. For simple HTML graphics, and in situations in which an external image file cannot be loaded, SVG might be a viable option.

With the development of the HTML version 5 language standard (HTML5), dynamic HTML graphics are possible to create within the basic HTML language. This is done by drawing directly to a special surface known as the canvas in an HTML document. By using JavaScript® and CSS, this method can create animations or games that can respond to user input or adjust graphics depending on the settings of the web browser or other data. Creating an HTML5 graphic, however, can be a complex procedure that could result in long blocks of scripting code that might execute very slowly on some computers or devices.


You might also Like


Discuss this Article

Post your comments

Post Anonymously


forgot password?