1. SVG – Scaleable Vector Graphics DBI – Representation and Management of Data on the Internet

3. Representations of images Images can be represented as:  Bitmapped Graphics – storing the RGB values of each pixel in the image  Vector Graphics – storing the coordinates of each vectors and the colors in which they are rendered

4. Vector Graphics Vector files store images as a series of descriptions of simple shapes –The image is splited into lines, rectangles, circles etc. –A description of the positions and colors of all of these shapes on the page is given –The image is reconstructucted when the file is opened

5. Pro’s and Con’s Vector Graphics are good for –graph –Flowchart Vector Graphics are not good for –photoes of trees –paintings

6. Vector Graphics are Scaleable Vector graphics images are –Easy to resize –Easy to transform

8. Bitmaps The whole image is split into a grid of tiny squares, called pixels, and the colour for each pixel in the whole image is recorded This format allows extremely complex pictures to be described (such as photos) Becareful – it can produce extremely large file sizes

9. Bitmap Resolution Enlarging a bitmap image causes to losing resolution:

10. Transforming Images It is difficult to change a bitmap image Transforming a bitmap image to a vector graphics image: –Difficult Transforming a vector graphics image into a bitmap image –Easy

11. Compression In a bitmap there can be areas with many pixels that have the same color – a waste of space Saving space can be done be reducing the number of colors in the image:  2 bits – 32 bits per pixel Lossless vs. Lossy compressions

12. Low Compression High Compression Medium Compression

13. Non Rectangular Bitmaps

14. Bitmaps  Main formats for bitmaps:  GIF,  JPEG  BMP  Represented in a binary format  Image processing is done on server side and image is transferred as is to client

15. GIF Graphic Interchange Format 'GIF' (tm) is CompuServe's standard for defining generalized color raster images

16. GIF Signature Screen Descriptor Global Color Map Image Descriptor Local Color Map Rester Data Gif Terminator Repeated 1 to n times

17. Screen Descriptor Screen Width Screen Height M cr 0 pixel background 0 0 0 0 12345671234567 Raster width in pixels (LSB) first Raster height in pixels (LSB) first M = 1, Global color map follows Descriptor cr+1 = # bits of color resolution pixel+1 = # bits/pixel in image background=Color index of screen background

18. Global Color Map red intensity green intensity blue intensity red intensity green intensity blue intensity : Color index 0 Color index 1 :

19. Image Descriptor 0 0 1 0 1 1 0 0 Image left Image top Image width Image height 7 6 5 4 3 2 1 12345671234567 Image separator character: ‘, ’ Start of image from the left side Start of image from the top of the screen Width of image Height of image M I 0 0 0 pixel M=0 - Use global color map, ignore 'pixel' M=1 - Local color map follows, use 'pixel ‘ I=0 - Image formatted in Sequential order I=1 - Image formatted in Interlaced order pixel+1 - # bits per pixel for this image

20. JPEG Image compression standard developed by the Joint Photographic Experts Group Works best on natural images (scenes)

21. How Does JPEG Works (Compression) The image is divided into 8 by 8 pixel blocks The discrete cosine transform (DCT) of each block is calculated A quantizer rounds off the DCT coefficients according to the quantization matrix The coefficients are represented with a variable length code, and the result is written as a compressed data stream to an outputfile (*.jpg)

22. The Compression 8x8 pixel block Discrete Cosine Transform Quantizer Binary Encoder Output Data stream 01001…

23. The Discrete Cosine Transform Separate the image into parts (or spectral sub-bands) of differing importance The DCT is similar to the discrete Fourier transform: –it transforms a signal or image from the spatial domain to the frequency domain

24. The Transform The input image is N2 pixels wide by N1 pixels high A(i,j) is the intensity of the pixel in row i and column j B(k1,k2) is the DCT coefficient in row k1 and column k2 of the DCT matrix

25. Quantization Matrix The quantization matrix is the 8 by 8 matrix of step sizes (sometimes called quantums) – –one element for each DCT coefficient –it is usually symmetric – step sizes will be small in the upper left (low frequencies), and large in the upper right (high frequencies)

26. After quantization, it is not unusual for more than half of the DCT coefficients to equal zero Compression allows us not to store all the zeros

27. Decompression For decompression, –The quantized DCT coefficients are recovered from the compressed data stream by taking the inverse transforms –the image image is then decompressed and can be displayed

28. Lossless Compres sion Lossy Compres sion Max Colo urs Transpar ent Animat ion BMP 24-bit TGA 32-bit TIFF See Note24-bit GIF Yes256Yes JPEG Yes24-bit PNG Yes 48- bit See Note

29. Vector Graphics  Uses vectors and manipulation of vectors  transformations,  coordinate systems,  units and vector-based shapes  Rendering is done on the client side –  using local processing power  Can be represented in both binary and text formats  Can include Bitmap images

30. Other Graphics Formats SVG – Simple Vector Format DWF – Drawing Web Format Flash – Macromedia’s Vector Graphics VML – Vector Markup Language VRML – Virtual Reality Modeling Language

31. Vectors vs. Bitmaps For simple shapes and images vector graphics saves space Vectors are easy to transform Vectors are scaleable Vector representation can be textual (xml) instead of binary

32. SVG  SVG stands for Scalable Vector Graphics  In terms of graphics, scalable means not being limited to single, fixed units  SVG graphics is scalable to different display resolutions and color spaces  The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages  SVG graphics can be magnified to see fine detail, or to aid those with low vision

33. SVG Code Example

34. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG- 20001102/DTD/svg-20001102.dtd"> Four separate rectangles

35. Grouping with Two groups, each of two rectangles Allows Adding Style

36. Using a Namespace <svg width=”300px" height=”200px” xmlns = 'http://www.w3.org/2000/svg ’>

37. Images Insertion  The tag indicates that the contents of a complete file are to be rendered into a given rectangle within the current user coordinate system  The can refer to raster image files such as PNG or JPEG or to an SVG file  Main attributes: “x”, “y”, “width”, “height” and “xlink:href”

38. Adding Text  is used to specify text that is rendered with other graphical elements  This means that we can apply transformations, clippings, maskings, etc. to text  Fonts are as specified in CSS2

39. Text Example Example text01 - 'Hello, out there' in blue Hello, out there

40. Shapes and Lines For shapes and lines we use the tags: 

41. Animation  SVG supports the ability to change vector graphics over time  There are 2 main ways for animating SVG content:  Through SVG animation elements  By access to the SVG DOM

42.  Main animation elements in SVG:  ‘animate’, ‘set’, ‘animateMotion’, ‘animateColor’, ‘animateTransform’  Animation introduces the time dimension to the document  Time notion in SVG:  document begin – when ’s onload event was triggered  document end – when ’s resources have been released

43. Coordinate System  There are two coordinate systems in SVG:  Viewport coordinate system – positive integer numbers representing pixels.  User coordinate system – real numbers, this is the coordinate system as the user sees it.  Usually the origin of both coordinate systems are identical and each pixel in the viewport is mapped to one unit in user coordinate system.  The viewbox attribute can be used to change this mapping.

44. Transformations  A new user coordinate system can be established by specifying transformations in the form of a transform attribute on a group of graphical elements.  The transform attribute transforms all user space coordinates and lengths on the given element and all of its ancestors.  Transformations maybe nested and so have cummulative effect.

45. Transformation Matrix  2D transformations are represented using 3X3 matrices.  Common transformations: translate(x,y) - establish a new coordinate system whose origin is at (x,y). rotate(a) – rotates the coordinate system by a degrees around the origin. scale(a,b) – scales the coordinate system – x axis by a and y axis by b.

46. Transformations  Translation Matrix:  Rotation Matrix:  Scaling Matrix:

47. Applying Transformations  SVG allows both to apply transformations as translate, rotate, scale or to apply a detailed transformation matrix  Transformations in SVG are applied by the ‘transform’ element.

48. SMIL  SVG is a host language in terms of SMIL ( Synchronized Multimedia)  Animation and therefore introduces additional constraints and features as permitted by that specification  It also introduces new extensions compatible with SMIL