Scalable Vector Graphics Zvi Topol and Yossi Cohn

2 Outline  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 Introduction 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) 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 Graphics  Bitmapped images are widely used over the Internet: attached to HTML documents using 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 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)  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)  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)  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)  SVG  PNG

11 Vector Graphics Formats Vector Graphics Formats  SVF - Simple Vector Format. Plug-in for CAD drawing representation No more development after Limited, no animation.  DWF - Drawing Web Format. Plug-in can be used with Javascript - but with no animation enabled.  Flash - Marcomedia’s Vector Graphics Format. The most up to date. Supports full multimedia features. Occupies about 70% of the market.

12 Vector Graphics Formats(2)  VML - Vector Markup Language - based 2D vector format by Microsoft - not developed after Limited to one single platform - Microsoft.  WebCGM - computer graphics metafile for the Web - binary format. Primarily designed to visualize technical and scientific drawings.  VRML - Virtual Reality Modeling Language - devoted to 3D, supports 2D as well - complicated for simple presentations.

13 Other 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 SVG Motivation 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 specification is available in:  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 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 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)  Valid SVG document: 

20 SVG Code example(2)  Well formed SVG document: 

21 Basic Data Types(1) Main Data types for SVG attributes:  - signed integer numbers of 32 bits.  - decimal numbers.  - 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)  - represents a in the user coordinate system - distance from the origin for a specific axis.  - optionally followed by deg - degrees, grad - gradians or rad - radians. Default is degrees. (as defined in CSS2).  - for representing colors from sRGB color space. Either by keywords recognized by SVG or by hex numbers.

23 Basic Data Types(3)  - possible values: fill - filling the shape or stroke - rendering the contour of a shape.  - a list of transformations.  - Uniform Resource Identifiers  - followed by a time identifier : ms - milliseconds or s - seconds. May not be negative.

24 SVG document fragment  SVG code is found inside element tag.  An SVG document fragment consists of any number of SVG elements contained within an svg element.  element can be empty, contain basic shapes, or more complex graphic elements.

25 Example  Four separate rectangles

26 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 and elements to provide description and semantics about the group

27 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 Example  Two groups, each of two rectangles

29 The defs element(1)  The defs element is a container element for referenced elements.  When SVG elements are drawn into a visual media, the is not drawn with them.

30 The defs element(2)  Local URI references within ancestor's ‘defs’ element

31 References 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 use element(1)  The ’s purpose is to reuse defined container elements like and  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 use 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 use element(3)  Example Use01 - Simple case of 'use' on a 'rect'

35 The use element(4)  The 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 image element(1)  The 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”

37 The image element(2)  If 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 references an SVG file, then the 'image' element establishes a new viewport - specified by x,y,width,height.

38 The image element(3)  Unlike, cannot reference elements inside the SVG document.  One can apply transformations and styles to the element through the matching attributes.

39 The text element  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 example example Example text01 - 'Hello, out there' in blue Hello, out there

41 Basic Shapes supported Basic Shapes supported  All basic shapes in SVG are represented as elements, with attributes corresponding to the shape. ,,,.  - defines a set of connected straight lines.  - 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)  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 element.

43 Rendering Model(2)  Examples of viewports: 300x200 view port: 150x200 viewport:

44 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 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)  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)  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)  Translation Matrix:  Rotation Matrix:  Scaling Matrix:

49 Transformations(4)

50 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 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)  Example triangle01- simple example of a 'path' A path that draws a rectangle

53 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)  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 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 ’s onload event was triggered, when ’s resources have been released).

56 More 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) Linear Gradient: Radial Gradient:

58 Examples(2) Filter effects:

59 Demos Map Example Moscow Map Example Animated Filter Effect

60 Tools for SVG authoring  CSIRO SVG Toolkit : Corel Draw 10: PhotoShop  Various Converters from Other graphical formats to SVG.

61 Other related W3C groups  SMIL – Synchronized Multimedia Integration Language.  WIA – Web Accessibility Initiative.