Graphics on the WebGraphics on the WebGraphics on the WebGraphics on the Web

CS575CS575

Spring 2006Spring 2006

Dr.AbbotDr.Abbot

Student: Andre LivStudent: Andre Liv

Graphics Electronic images/pictures made

up of thousands of tiny colored dots called "pixels."

Color "depth" Pixels• 1 bit – Black & white (0 or 255)• 8 bit – Color or Gray Scale• 24 bits – RGB (8 bits/color)• Most browsers displays 256 colors

Web formats• JPEG• GIF• PNG• SVG• WebCGM• And more (tiff, bmp, ppm ….)

Which format?

• Quality• Size• Type of graphics

Examples

JPEGJoint Photographic Experts Group

– 16,777,215 colors– photographic images – Transparency none– Lossy / lossless compression– 1990, Eric Hamilton– ISO/CCITT

Compression method• DCT for “lossy’’ compression• Predictive for “lossless’’

compression

DCT Encoder

DCT Decoder

Predictive method

GIFGraphics Interchange Format

– Bob Berry and team at Compuserve – 1987, updated in 1989 – images with fewer, flatter colors (256 colors)– Transparency (one color may optionally be

100% transparent)– Interlaced GIF– Lossless compression (LZW)

GIF Spec

Continued..

PNGSame as GIF but• Alpha channel • Gamma correction• 2 dimensional Interlacing capabilities• Compress better than GIF• Use Huffman coding • Supported by new Web Browsers only

SVGScalable Vector Graphics• vector-based graphics for the Web • applications in XML• text-based graphics language • high-quality graphics on the Web (animation)

Advantages of SVG• SVG files can be read and modified by a large range of tools

(e.g. notepad) • SVG files are smaller and more compressible than JPEG and

GIF images • SVG images are scalable • SVG images can be printed with high quality at any resolution • SVG images are zoomable. Any part of the image can be

zoomed without degradation • Text in SVG is selectable and searchable (excellent for

making maps) • SVG works with Java technology • SVG is an open standard • SVG files are pure XML

SVG file<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-

width="2" fill="red"/></svg>

Simple Animated SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="rotateSquare"> <rect fill="#AFBCC7" stroke="#646464" stroke-width="5px" x="100px" y="100px" width="100px" height="100px">

<animateTransformattributeType="XML"attributeName="transform"type="rotate"from="0,150,150" to="360,150,150"begin="0s" dur="5s"repeatCount="indefinite"/>

</rect></g></svg>

• http://people.w3.org/maxf/ChessGML/immortal.svg• http://www.leweyg.com/anied/basics.svg• http://www.leweyg.com/anied/fight.svg• http://www.carto.net/papers/svg/samples/

GIF 89a• Same features as GIF 87a• Support multiple images

WEB 3D?