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.
Get startedWikibuy compensates us when you install Wikibuy using the links we provided.