Graphics on the Web

What is W3C Doing?

Please see the W3C Graphics Activity statement to find out what W3C is currently doing and has already done in the area of Web Graphics, including SVG, WebCGM Profile, and PNG.

Formats

There is no limit in the Web specifications to the graphical formats that can be used on the Web. You just need a MIME type so that the format is labelled correctly for transfer across the Web, and so that a suitable viewer (if one exists) can be located at the other end.

In practice, certain formats are more widely understood than others; certain formats are more suited to one type of graphical data than another; so you should make an informed choice about what format to use.

Portable Network Graphics (PNG)

W3C Overview of PNG

PNG Group homepage

Joint Photographic Experts Group (JPEG)

W3C Overview of JPEG

ISO JPEG homepage

Graphics Interchange Format (GIF)

to be added

Scalable Vector Graphics (SVG)

W3C Overview of SVG

Web CGM Profile

W3C Overview of the WebCGM Profile

CGM Open website

Inclusion in XML

The XML specification does not prescribe or limit which graphics format you can use. It also does not provide a standard method to describe image inclusion. Work in progress at W3C on XLink and XPointer will add standard hyperlinking capabilities - including links to graphics - to XML. This work provides the same hyperlinking capabilities HTML users will be familiar with - simple, since ended links to embedded media and simple, single-ended hypermedia links - but also provides more advanced compound links, bidirectional links, and out of line links. This provides a standardised basis which XML languages can use for the actual linking part.

Scalable Vector Graphics (SVG)

SVG, a vector graphics format designed at W3C, written in XML and stylable with CSS, is starting to become a popular choice for including graphics in XML documents. It may be included either by linkage, or by textual inclusion in an XML document that uses a different namespace. Because SVG can itself include raster images such as JPEG and PNG, SVG can be used to add raster and mixed vector/raster graphics to XML documents. SVG uses XLink and XPointer to provide linking functionality.

SVG does not limit but does prescribe the formats that can be used. All conformant SVG implementations must support PNG and JPEG and SVG images. Other formats may also be supported by various implementations, but these two can be relied upon.

Background image, using CSS

Any XML element can (when displayed visually) be given a background image using Cascading Style Sheets (CSS). The background color can also be specified, and the image will composite onto the background color if it has transparent portions. This allows the same image to be re-used with different visuall presentations. The width and height of the image can be adjusted. It can repeat in the horizontal(x) direction, vertical (y) direction, both , or neither. The position of the image relative to the box taken up by the element can be adjusted.

CSS does not prescribe or limit which graphics format you can use.

Inclusion in HTML

The HTML specification does not prescribe or limit which graphics format you can use.

Graphics may be associated with an HTML document in five standard ways:

External link, using A

This allows any stand-alone viewer to be used, which can (but need not) be a different program to that used to display HTML. Useful for unusual image formats. Use the A element in HTML for this.

Inline image, using IMG, OBJECT or APPLET

There are three ways to include inline objects in HTML.

The IMG element is the most common method for using graphics in HTML pages. For faster display, the width and height of the image can be given as attributes. One attribute that is required is alt, used to give an alternate textual string for people browsing with images off, or who cannot see the images. The string cannot contain any markup. A longdesc attribute lets you point to a longer description - often in HTML - which can have markup and richer formatting.

The OBJECT element in HTML can contain other elements nested within it, unlike IMG which is empty. This means that several different formats can be offered, using nested OBJECT elements, with a final textual alternative (including markup, links, etc) right at the center. The outermost element which can be displayed will be used.

The APPLET element is used for embedding applets into the HTML page. These applets can do many things biut o\a common task is to use them to display images, particularly ones in unusual formats or which need to be presented under the control of a program for some other reason.

Background image, using CSS

Any HTML element can (when displayed visually) be given a background image using Cascading Style Sheets (CSS). The background color can also be specified, and the image will composite onto the background color if it has transparent portions. This allows the same image to be re-used with different visuall presentations. The width and height of the image can be adjusted. It can repeat in the horizontal(x) direction, vertical (y) direction, both , or neither. The position of the image relative to the box taken up by the element can be adjusted.

CSS does not prescribe or limit which graphics format you can use.


Chris
Created: 18 Jan 1995
Last updated: $Date: 2003/04/30 12:25:41 $
Valid XHTML 1.0! Valid CSS!