1 / 48

SVG – Scaleable Vector Graphics

SVG – Scaleable Vector Graphics. DBI – Representation and Management of Data on the Internet. Representations of images. Images can be represented as: Bitmapped Graphics – storing the RGB values of each pixel in the image

toyah
Download Presentation

SVG – Scaleable Vector Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. 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

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

  5. Vector Graphics are Scaleable • Vector graphics images are • Easy to resize • Easy to transform

  6. 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

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

  8. 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

  9. 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

  10. Low Compression High Compression Medium Compression

  11. Non Rectangular Bitmaps

  12. 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

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

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

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

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

  17. 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 Image Descriptor 7 6 5 4 3 2 1 Image separator character: ‘,’ 1 2 3 4 5 6 7 0 0 1 0 1 1 0 0 Start of image from the left side Image left Start of image from the top of the screen Image top Image width Width of image Height of image Image height M I 0 0 0 pixel

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

  19. 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)

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

  21. 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

  22. 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

  23. 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)

  24. 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

  25. 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

  26. LosslessCompression LossyCompression Max Colours Transparent Animation BMP 24-bit TGA 32-bit TIFF See Note 24-bit GIF Yes 256 Yes Yes JPEG Yes 24-bit PNG Yes  48-bit See Note

  27. 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

  28. 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

  29. 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

  30. 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

  31. SVG Code Example <?xml version="1.0 ”standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width=”300px" height=”200px"> <desc> <!-- put a description here --> </desc> <g> <!-- your graphic here --> </g> </svg>

  32. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="5cm" height="4cm"> <desc> Four separate rectangles </desc> <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/> <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/> <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/> <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/> </svg>

  33. Allows Adding Style Grouping with <g> <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="5cm" height="5cm"> <desc>Two groups, each of two rectangles </desc> <g id="group1" style="fill:red"> <rect x="1cm" y="1cm" width="1cm" height="1cm" /> <rect x="3cm" y="1cm" width="1cm" height="1cm" /> </g> <g id="group2" style="fill:blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm" /> <rect x="3cm" y="3cm" width="1cm" height="1cm" /> </g> </svg>

  34. Using a Namespace <?xml version="1.0 ”standalone="no"?> <svg width=”300px" height=”200px” xmlns = 'http://www.w3.org/2000/svg ’> <desc> <!-- put a description here --> </desc> <g> <!-- your graphic here --> </g> </svg>

  35. Images Insertion • The <image> tag indicates that the contents of a complete file are to be rendered into a given rectangle within the current user coordinate system • The <image> 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”

  36. Adding Text • <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

  37. Text Example <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="10cm" height="3cm"> <desc>Example text01 - 'Hello, out there' in blue</desc> <text x="2.5cm" y="1.5cm" style="font-family:Verdana; font-size:16pt; fill:blue"> Hello, out there </text> </svg>

  38. Shapes and Lines • For shapes and lines we use the tags: • <rect> • <circle> • <ellipse> • <line> • <polyline> • <polygon>

  39. 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

  40. 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 <svg>’s onload event was triggered • document end – when <svg>’s resources have been released

  41. 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.

  42. 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.

  43. 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.

  44. Transformations • Translation Matrix: • Rotation Matrix: • Scaling Matrix:

  45. 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.

  46. 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

More Related