Scalable Vector Graphics Zvi Topol and Yossi Cohn

1. Scalable VectorGraphicsZvi Topoland 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 <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 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 • 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) • 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 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 • 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 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: 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 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: • <?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) • 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) 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) • <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) • <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 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. 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="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) • 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) • 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 • <?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 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.

30. The defs 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 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 <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 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) • <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 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.

36. The imageelement(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 imageelement(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 imageelement(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 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 CSS2.

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

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

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