Scalable Vector Graphics Zvi Topol and Yossi Cohn

Scalable Vector Graphics Zvi Topol and Yossi Cohn 1

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 2

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

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

Bitmapped 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. 5

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 6

Vectors vs Bitmaps(1) § § Size : Vectors cost much less to represent than bitmaps. Example: a diagonal blue line on 640 X 480 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. 7

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

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

Vectors vs Bitmaps(4) PNGq SVGq 10

Vector 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 11

Vector Graphics Formats(2) § § § VML - Vector Markup Language - based 2 D vector format by Microsoft - not developed after 1998. Limited to one single platform - Microsoft. http: //www. w 3. org/TR/NOTE-VML Web. CGM - computer graphics metafile for the Web - binary format. Primarily designed to visualize technical and scientific drawings. http: //www. w 3. org/Graphics/Web. CGM VRML - Virtual Reality Modeling Language devoted to 3 D, supports 2 D as well - complicated for simple presentations. Http: //www. web 3 d. org 12

Other Vector Graphics Tools § § 2 D APIs combined with Active. X - limited to Microsoft platforms. Java 2 D - binary program with graphical 2 D output - inserted in web pages as applet - platform independent, but requires more than basic scripting programming skills. 13

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 - Math. ML for instance. Searchable. 14

SVG(1) § § SVG is a language for describing 2 D vector and mixed vector/raster graphics in XML. Developed by W 3 C organization. Supported by Sun, Adobe and IBM. Plug-in is required. 15

SVG(2) § SVG specification is available in: http: //www. w 3. 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. 16

(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 17

(SVG – Concepts(2 1. SVG graphics is scalable to different display resolutions and color spaces. 2. The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. 3. SVG graphics can be magnified to see fine detail, or to aid those with low vision. 18

(SVG Code example(1 § Valid SVG document: § <? xml version="1. 0 ”standalone="no"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 20001102//EN" "http: //www. w 3. org/TR/2000/CR-SVG-20001102/DTD/svg-20001102. dtd"> <svg width=” 300 px" height=” 200 px"> <desc><!-- put a description here --> </desc> <g><!-- your graphic here --> </g> </svg> 19

(SVG Code example(2 § Well formed SVG document: § <? xml version="1. 0 ”standalone="no"? > <svg width=” 300 px" height=” 200 px” xmlns = 'http: //www. w 3. org/2000/svg ’> <desc><!-- put a description here --> </desc> <g><!-- your graphic here --> </g> </svg> 20

(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. 5 mm - in the user coordinate system - a pure number. § Unit identifiers : as defined in CSS: em, ex, pt, pc, cm, mm, in and percentages. 21

(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 degrees, grad - gradians or rad - radians. Default is degrees. (as defined in CSS 2). § <color> - for representing colors from s. RGB color space. Either by keywords recognized by SVG or by hex numbers. 22

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

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

Example § <? xml version="1. 0" standalone="no"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 20001102//EN" "http: //www. w 3. org/TR/2000/CR-SVG-20001102/DTD/svg 20001102. dtd"> <svg width="5 cm" height="4 cm"> <desc>Four separate rectangles </desc> <rect x="0. 5 cm" y="0. 5 cm" width="2 cm" height="1 cm"/> <rect x="0. 5 cm" y="2 cm" width="1 cm" height="1. 5 cm"/> <rect x="3 cm" y="0. 5 cm" width="1. 5 cm" height="2 cm"/> <rect x="3. 5 cm" y="3 cm" width="1 cm" height="0. 5 cm"/> </svg> 25

(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 26

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

Another Example § <? xml version="1. 0" standalone="no"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 20001102//EN" "http: //www. w 3. org/TR/2000/CR-SVG-20001102/DTD/svg 20001102. dtd"> <svg width="5 cm" height="5 cm"> <desc>Two groups, each of two rectangles </desc> <g id="group 1" style="fill: red"> <rect x="1 cm" y="1 cm" width="1 cm" height="1 cm" /> <rect x="3 cm" y="1 cm" width="1 cm" height="1 cm" /> </g> <g id="group 2" style="fill: blue"> <rect x="1 cm" y="3 cm" width="1 cm" height="1 cm" /> <rect x="3 cm" y="3 cm" width="1 cm" height="1 cm" /> </g> </svg> 28

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

The defs element(2) § <svg width="8 cm" height="3 cm"> <desc>Local URI references within ancestor's ‘defs’ element </desc> <defs> <linear. Gradient id="Gradient 01"> <stop offset="20%" style="stop-color: #39 F"/> <stop offset="90%" style="stop-color: #F 3 F"/> </linear. Gradient> </defs> <rect x="1 cm" y="1 cm" width="6 cm" height="1 cm" style="fill: url(#Gradient 01)" /> </svg> 30

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

The use 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. 32

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

The use element(3) § <svg width="10 cm" height="3 cm" view. Box="0 0 100 30"> <desc>Example Use 01 - Simple case of 'use' on a 'rect'</desc> <defs> <rect id="My. Rect" width=“ 5 cm" height="1 cm"/> </defs> <use x=“ 1 cm" y="1 cm" xlink: href="#My. Rect" /> </svg> 34

The use 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. 35

The image 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” 36

The image 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. 37

The image 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. 38

The text element § <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 CSS 2. 39

text> example> <? xml version="1. 0" standalone="no"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 20001102//EN" "http: //www. w 3. org/TR/2000/CR-SVG-20001102/DTD/svg 20001102. dtd"> <svg width="10 cm" height="3 cm"> <desc>Example text 01 - 'Hello, out there' in blue</desc> <text x="2. 5 cm" y="1. 5 cm" style="font-family: Verdana; fontsize: 16 pt; fill: blue"> Hello, out there </text> </svg> 40

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

(Rendering Model(1 § SVG content is painted on to a canvas : 2 D 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. 42

(Rendering Model(2 § Examples of viewports: 300 x 200 view port: 150 x 200 viewport: 43

(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. 44

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

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

(Transformations(2 § 2 D transformations are represented using 3 X 3 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. 47

(Transformations(3 § Translation Matrix: § Rotation Matrix: § Scaling Matrix: 48

(Transformations(4 49

(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. 50

(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. 51

(Paths(2 § <svg width="4 cm" height="4 cm" view. Box="0 0 400"> <title>Example triangle 01 - 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 L 300 100 L 200 300 z" style="fill: red; stroke: blue; stroke-width: 3"/> </svg> 52

(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. 53

(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. 54

Animation Elements 1. Main animation elements in SVG: 2. ‘animate’ , ‘set’, ‘animate. Motion’, ‘animate. Color’, ‘animate. Transform’. 3. Animation introduces the time dimension to the document. 4. Time notion in SVG: document begin, document end. (When <svg>’s onload event was triggered, when <svg>’s resources have been released). 55

More SVG Features § Gradients § Scripting (using scripting languages to handle various events). § Filter effects (Lighting, Color spaces, etc. . ). § Clipping and masking (alpha values). 56

(Examples(1 Linear Gradient: Radial Gradient: 57

(Examples(2 Filter effects: 58

Demos Map Example Moscow Map Example Animated Filter Effect 59

Tools for SVG authoring § CSIRO SVG Toolkit : http: //sis. cmis. csiro. au/svg/index. html Corel Draw 10: http: //www. corel. com/ Photo. Shop http: //www. adobe. com/ § Various Converters from Other graphical formats to SVG. 60

Other related W 3 C groups § SMIL – Synchronized Multimedia Integration Language. § WIA – Web Accessibility Initiative. 61