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