Scalable VectorScalable VectorGraphicsGraphics

Zvi TopolZvi Topol and Yossi Cohnand Yossi Cohn

2

OutlineOutline Introduction Vector Graphics vs Bitmap Graphics Graphic formats and motivation for SVG. Data types and structural elements. Text and Basic Shapes Transformations and Paths Animation Other SVG Features Demos

3

IntroductionIntroduction

Graphics on the Web has many different uses: The WWW contains milliards of pages of data. Graphics is an important tool to visualize that data

(diagrams, illustrations, images, etc) Graphics is also a good means to convey

messages: art, advertisements, campaigns It also can be used to create virtual environments

and worlds - virtual shops, games, simulators.

4

Introduction(cont’d)Introduction(cont’d)

There are two main ways to represent graphics on the Web:

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.

5

Bitmapped GraphicsBitmapped Graphics

Bitmapped images are widely used over the Internet: attached to HTML documents using <img> tag.

Main formats: GIF, JPEG, BMP. Represented in Binary format. Image processing is done on server side and image

is transferred as is to client.

6

Vector GraphicsVector Graphics

Uses of the power of 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

7

Vectors vs Bitmaps(1)Vectors vs Bitmaps(1)

Size : Vectors cost much less to represent than bitmaps.

Example: a diagonal blue line on 640X480 window costs ~3000 bytes with a Bitmap. Same line using Vector Graphics ~20 bytes.

Bitmaps have problems with resolution and colors when viewed and printed on different kinds of screens and printers at different sizes.

Transformations can be applied on vectors to solve this problem.

8

Vectors vs Bitmaps(2)Vectors vs Bitmaps(2)

Format representation - Bitmaps are binary files, vector based graphics can be represented as text files.

Drawing instruction include text, and so are selectable and searchable. Links can be created to any part of a vector based image.

Flexibility - Vectors are much more flexibly to changes (transformations and different text styles).

9

Vectors vs Bitmaps(3)Vectors vs Bitmaps(3)

Animation is much simpler using vectors. Accessibility to editing - easier to edit quickly a

textual file than a binary file. Interactivity – the ease of using scripts allows very

good interactivity.

10

Vectors vs Bitmaps(4)Vectors vs Bitmaps(4)

SVGPNG

11

Vector Graphics FormatsVector Graphics Formats SVF - Simple Vector Format. Plug-in for CAD

drawing representation - 1996. No more development after 1997. Limited, no animation. http://www.softsource.com/svf

DWF - Drawing Web Format. Plug-in can be used with Javascript - but with no animation enabled. http://www.autodesk.com/whip/

Flash - Marcomedia’s Vector Graphics Format. The most up to date. Supports full multimedia features. Occupies about 70% of the market. http://www.macromedia.com/software/flash

12

Vector Graphics Formats(2)Vector Graphics Formats(2) VML - Vector Markup Language - based 2D

vector format by Microsoft - not developed after 1998. Limited to one single platform - Microsoft. http://www.w3.org/TR/NOTE-VML

WebCGM - computer graphics metafile for the Web - binary format. Primarily designed to visualize technical and scientific drawings. http://www.w3.org/Graphics/WebCGM

VRML - Virtual Reality Modeling Language - devoted to 3D, supports 2D as well - complicated for simple presentations. Http://www.web3d.org

13

Other Vector Graphics ToolsOther Vector Graphics Tools 2D APIs combined with ActiveX - limited to

Microsoft platforms. Java2D - binary program with graphical 2D output

- inserted in web pages as applet - platform independent, but requires more than basic scripting programming skills.

14

Motivation for SVGMotivation for SVG Text based language. Simple to program. Takes advantage of existing tools - XML, CSS,

XSL. Powerful graphics capabilities - high performace,

full animation support. Open standard. Extendable - MathML for instance. Searchable.

15

SVG(1)SVG(1) SVG is a language for describing 2D vector and

mixed vector/raster graphics in XML. Developed by W3C organization. Supported by Sun, Adobe and IBM. Plug-in is required.

16

SVG(2)SVG(2) SVG specification is available in:

http://www.w3.org/TR/2000/CR-SVG-20001102/

First draft released: 11/2/1999.

Current status: Candidate Recommendation - meaning that the specification is maturing and is now ready for more widespread implementation testing.

17

SVG – Concepts(1)SVG – Concepts(1) SVG stands for Scalable Vector Graphics In terms of graphics, scalable means not being

limited to single, fixed units.

In terms of Web scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications.

SVG, being a graphics technology for the Web, is scalable in both senses of the word

18

SVG – Concepts(2)SVG – Concepts(2) 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.

19

SVG Code example(1)SVG Code example(1)

Valid SVG document:

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

20

SVG Code example(2)SVG Code example(2)

Well formed SVG document:

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

21

Basic Data Types(1)Basic Data Types(1) Main Data types for SVG attributes: <integer> - signed integer numbers of 32 bits. <number> - decimal numbers. <length> - <number> followed by a unit

identifier: 1.5mm - in the user coordinate system - a pure number.

Unit identifiers : as defined in CSS: em, ex, px, pt, pc, cm, mm, in and percentages.

22

Basic Data Types(2)Basic Data Types(2) <coordinate> - represents a <length> in the user

coordinate system - distance from the origin for a specific axis.

<angle> - <number> optionally followed by deg - degrees, grad - gradians or rad - radians. Default is degrees. (as defined in CSS2).

<color> - for representing colors from sRGB color space. Either by keywords recognized by SVG or by hex numbers.

23

Basic Data Types(3)Basic Data Types(3) <paint> - possible values: fill - filling the shape or

stroke - rendering the contour of a shape. <transform-list> - a list of transformations. <uri> - Uniform Resource Identifiers <time> - <number> followed by a time identifier :

ms - milliseconds or s - seconds. May not be negative.

24

SVG document fragmentSVG document fragment SVG code is found inside <svg> element tag. An SVG document fragment consists of any

number of SVG elements contained within an svg element.

<svg> element can be empty, contain basic shapes, or more complex graphic elements.

25

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

26

Grouping Element(1)Grouping Element(1) The 'g' element is the element for grouping and

naming collections of drawing elements. Enables to execute same operation on all items in

the group. Can be used in conjunction with <desc> and

<title> elements to provide description and semantics about the group

27

Grouping Element(2)Grouping Element(2) Each group can be given the id attribute for

purposes of animation and re-usabilty. Any ‘g’ element can contain other ‘g’ elements

nested within it to an arbitrary depth. Drawing element that is not contained in a ‘g’

element can be considered as a group of its own.

28

Another ExampleAnother 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="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>

29

The The defsdefs element(1) element(1) The defs element is a container element for

referenced elements.

When SVG elements are drawn into a visual media, the <defs> is not drawn with them.

30

The The defsdefs element(2) element(2) <svg width="8cm" height="3cm">

<desc>Local URI references within ancestor's ‘defs’ element </desc>

<defs> <linearGradient id="Gradient01"> <stop offset="20%" style="stop-color:#39F"/> <stop offset="90%" style="stop-color:#F3F"/> </linearGradient>

</defs> <rect x="1cm" y="1cm" width="6cm" height="1cm" style="fill:url(#Gradient01)" /> </svg>

31

References in SVGReferences in SVG SVG supports two types of references: Local URI reference – the referenced object is

found in the same document. Non-Local URI reference – the referenced object

is found in another document.

The support of references in SVG makes use of Xlink, Xpointer and XML references.

32

The The use use element(1)element(1) The <use>’s purpose is to reuse defined container

elements like <svg> and <g> The 'use' element references another element and

indicates that the graphical contents of that element is included/drawn at that given point in the document.

The ‘use’ element cannot reference entire files.

33

The The use use element(2)element(2) The 'use' element has the attributes x, y, width and

height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.

The effect of a 'use' element is as if the contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the 'use' element as its parent and all of the 'use' element's ancestors as its higher-level ancestors.

34

The The use use element(3)element(3) <svg width="10cm" height="3cm" viewBox="0 0 100 30">

<desc>Example Use01 - Simple case of 'use' on a 'rect'</desc> <defs> <rect id="MyRect" width=“5cm" height="1cm"/> </defs> <use x=“1cm" y="1cm" xlink:href="#MyRect" /> </svg>

35

The The use use element(4)element(4) The <use> element has an important advantage

over a simple reference to an element: It can apply transformations and style sheets over

the used element by using the matching attributes of the ‘use’ element.

36

The imageThe image element(1)element(1) The <image> 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”

37

The imageThe image element(2)element(2) If <image> references a raster image, then the

raster image is fitted into the region specified by the x, y, width and height attributes such that the top/left corner of the raster image exactly aligns with coordinate (x,y), and the bottom/right corner of the raster image exactly aligns with coordinate (x+width,y+height).

When <image> references an SVG file, then the 'image' element establishes a new viewport - specified by x,y,width,height.

38

The imageThe image element(3)element(3) Unlike <use>, <image> cannot reference

elements inside the SVG document.

One can apply transformations and styles to the <image> element through the matching attributes.

39

The The text text elementelement <text> is used to specify text that is rendered with

other graphical elements. This means that we can apply transformation,

clipping, masking, and so to text. Fonts are as specified in CSS2.

40

>>text> exampletext> 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>

41

Basic Shapes supportedBasic Shapes supported All basic shapes in SVG are represented as

elements, with attributes corresponding to the shape.

<rect> , <circle>, <ellipse>, <line>. <polyline> - defines a set of connected straight

lines. <polygon> - defines a closed shape consisting of a

set of connected straight line segments. Each shape can be stroked, filled and transformed.

42

Rendering Model(1)Rendering Model(1) SVG content is painted on to a canvas : 2D infinite

plain. Rendering occurs relative to a finite rectangular

region of the canvas. This Region is called SVG Viewport. The size of the Viewport (its height and width) is

defined as attributes inside the <svg> element.

43

Rendering Model(2)Rendering Model(2) Examples of viewports:

300x200 view port: 150x200 viewport:

44

Rendering Model(3)Rendering Model(3) SVG uses a "painters model" of rendering:

Paint is applied in successive operations to the output device - when the area overlaps a previously painted area the new paint partially or completely obscures the old.

Rendering order: First Comes First Painted Support for 3 types of graphical elements:

Shapes, Text, Raster images.

45

Coordinate SystemsCoordinate Systems 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.

46

Transformations(1)Transformations(1) 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.

47

Transformations(2)Transformations(2) 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.

48

Transformations(3)Transformations(3) Translation Matrix:

Rotation Matrix:

Scaling Matrix:

49

Transformations(4)Transformations(4)

50

Transformations(5)Transformations(5) 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.

51

Paths(1)Paths(1) Paths represent the outline of a shape which can

be filled, stroked, used as a clipping path, or any combination of the three.

Paths are described by a set of points. The geometry of the path is defined in terms of

moveto, lineto, curveto, arc, and closepath. Path is represented in SVG by the ‘path’ element.

52

Paths(2)Paths(2) <svg width="4cm" height="4cm" viewBox="0 0 400 400">

<title>Example triangle01- simple example of a 'path'</title> <desc>A path that draws a rectangle</desc> <rect x="1" y="1" width="398" height="398" style="fill:none; stroke:blue"/> <path d="M 100 100 L 300 100 L 200 300 z" style="fill:red; stroke:blue; stroke-width:3"/> </svg>

53

Animation(1)Animation(1) 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.

54

Animation(2)Animation(2)

SVG is a host language in terms of SMIL Animation and therefore introduces additional constraints and features as permitted by that specification.

It also introduces new extensions compatible with SMIL.

55

Animation ElementsAnimation Elements Main animation elements in SVG: ‘animate’ , ‘set’, ‘animateMotion’,

‘animateColor’, ‘animateTransform’. Animation introduces the time dimension to the

document. Time notion in SVG: document begin, document

end.(When <svg>’s onload event was triggered, when <svg>’s resources have been released).

56

More SVG FeaturesMore SVG Features Gradients Scripting (using scripting languages to handle

various events). Filter effects (Lighting, Color spaces, etc..). Clipping and masking (alpha values).

57

Examples(1)Examples(1)Linear Gradient:

Radial Gradient:

58

Examples(2)Examples(2)Filter effects:

59

DemosDemos

Map Example

Moscow Map Example

Animated Filter Effect

60

Tools for SVG authoringTools for SVG authoring CSIRO SVG Toolkit :

http://sis.cmis.csiro.au/svg/index.html

Corel Draw 10:

http://www.corel.com/

PhotoShop

http://www.adobe.com/ Various Converters from Other graphical formats

to SVG.

61

Other related W3C groupsOther related W3C groups SMIL – Synchronized Multimedia Integration

Language.

WIA – Web Accessibility Initiative.