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 Vector Graphics – storing the coordinates of

each vectors and the colors in which they are rendered

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

Pro’s and Con’s

• Vector Graphics are good for– graph – Flowchart

• Vector Graphics are not good for – photoes of trees – paintings

Vector Graphics are Scaleable

• Vector graphics images are– Easy to resize– Easy to transform

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

Bitmap Resolution

• Enlarging a bitmap image causes to losing resolution:

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

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

Low Compression

HighCompression

MediumCompression

Non Rectangular Bitmaps

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

GIF

• Graphic Interchange Format

• 'GIF' (tm) is CompuServe's standard for defining generalized color raster images

GIF Signature

Screen Descriptor

Global Color Map

Image Descriptor

Local Color Map

Rester Data

Gif Terminator

Repeated 1 to n times

Screen Descriptor

Screen Width

Screen Height

M cr 0 pixel

background

0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0

1

2

3

4

5

6

7

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

Global Color Map

red intensity

green intensity

blue intensity

red intensity

green intensity

blue intensity

:

Color index 0

Color index 1

:

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

1

2

3

4

5

6

7

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

JPEG

• Image compression standard developed by the Joint Photographic Experts Group

• Works best on natural images (scenes)

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)

The Compression

8x8 pixel

block

Discrete Cosine

TransformQuantizer

Binary Encoder

Output Data

stream

01001…

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

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

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)

• 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

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

Lossless Compres

sion

Lossy Compres

sion

Max  Colours

Transparent

Animation

BMP24-bit

TGA32-bit

TIFFSee Note 24-bit

GIFYes 256 Yes Yes

JPEGYes 24-bit

PNGYes  

 48-bit

See Note

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

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

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

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

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>

<?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>

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> Allows Adding Style

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>

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”

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

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>

Shapes and Lines

• For shapes and lines we use the tags: <rect>

<circle>

<ellipse>

<line>

<polyline>

<polygon>

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

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

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.

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.

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.

Transformations

Translation Matrix:

Rotation Matrix:

Scaling Matrix:

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.

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