1. Introduction to SVG Prepared by K.M.SO Department of Computer Science ver. 2 last update: June 2004

2. Introduction What is SVG Advantage and disadvantage of using SVG Graphics systems XML basic What environments can view SVG Installing the Adobe SVG viewer SVG syntax, structure and rendering order

3. What is SVG ? SVG stands for Scalable Vector Graphics SVG is a language for describing 2D vector and mixed vector/raster graphics in XML. SVG drawings can be dynamic and interactive vector graphics animation via scripting

4. SVG background An open standard developed by W3C organization. SVG specification is available in: http://www.w3.org/TR/2000/CR-SVG-20001102/ first drafted by W3C since Nov1999 –lack of supporting applications until June 2000, Adobe released plugins for both IE and Netscape Current status: Candidate Recommendation - meaning that the specification is maturing and is now ready for more widespread implementation testing. Supported by Sun, Adobe and IBM. Plug-in is required.

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

6. SVG is Scalable (1)  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

7. SVG is Scalable (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.

8. SVG is 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.  represented in text formats.  Can include Bitmap images

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

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

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

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

13. Vectors vs Bitmaps(4) SVG PNG

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

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

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

17. SVG is XML SVG is defined by XML a new way to put images on Web pages SVG conforms to a certain structure defined by XML and the SVG DTD

18. Markup Languages based on XML XML is a meta-language –A language for creating other languages. Markup Languages that have been created using XML –MathML –Chemical Markup Language (CML) –Scalable Vector Graphics (SVG) –Wireless Markup Language (WML) –Geography Markup Language (GML) –Synchronized Multimedia Integration Language (SMIL) –...

19. What is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML HTML XML was designed to describe data XML tags are not predefined in XML. You must define your own tags

20. XML Document XML declaration –Defines the XML version (=1.0) and the character encoding used in the document Root element –One and only one Root element Child element of the Root –Inside the Root element

21. XML Document All XML elements must have a closing tag (except the declaration, which is not part of XML) Tags are Case sensitive Elements must be properly nested Attribute values must be always be quoted White Space is Preserved Comments in XML

22. XML Elements have Relationships Elements are related as parents and children Elements can have different content types –Element content –Mixed content –Simple content –Empty content –Attributes (name/value pairs)

23. Element Naming XML elements follow these naming rules: –Names can contain letters, numbers, and other characters –Names must not start with a number or punctuation character –Names must not start with the letters xml (or XML or Xml..) –Names cannot contain spaces –Avoid “-” and “.” in names –“:” should not be used in element names, it is reserved for Namespaces

24. Parsed Data & CDATA All text in an XML document will be parsed by the parser Only text inside a CDATA section is ignored by the parser Escape Characters –Illegal XML characters have to be replaced by entity references –Entity references always start with the “&” and end with “;” character

25. “Well Formed” and “Valid” XML A “Well Formed” XML document has correct XML syntax (properly nested, must have closing tags and etc….) A “Valid” XML document is a “Well Formed” XML document which conforms to the rules of a Document Type Definition (DTD) Any errors will stop you.

26. Well formed vs Valid SVG (1)  Well formed SVG document: 

27.  Valid SVG document:  Well formed vs Valid SVG (2)

28. Display your XML With CSS (Cascade Stylesheet) With XSL (preferred style sheet language of XML) XML embedded in HTML

29. Advantage and Disadvantage of using SVG Advantage Vector graphics XML based Text implementation Disadvantage Lack of native viewing support (plug-in needed)

30. Advantage and Disadvantage of using SVG Important Benefits – Vector Graphics Text based descriptions of geometric objects Small file size Scalable *Integrate raster images *Quality of display *Raster like filter effects

31. Advantage and Disadvantage of using SVG Important Benefits – XML based XML is open standard for structured data exchange has wide and reliable implementation makes data available to other open standard technologies XML + SVG = data driven graphics, also known as Smart Graphics Animation native and through scripting Interactive and dynamic

32. Advantage and Disadvantage of using SVG Important Benefits – Text Implementation Preserves both graphical appearance and ‘text’ Prevent font substitution and workarounds Searchable, selectable text Embed font information

33. Technology Comparision Feature SVG Flash GIF JPEG PNG XHTML Vector artwork Alpha Channel transparency Pixel-precision Typeface Shared resources Open-standard Filter effect Animation Interaction Editable Masking Gradients

34. SVG versus Flash Both are vector graphic formats for the Web, likely standards, likely in competition... Differences: –SVG is a “human readable” format –you need Macromedia Generator to dynamically change the content; with SVG you can do it via DOM –Advantages of SVG: XML namespace, can be combined with other XML namespaces –SVG is still being developed, Flash is mature, with nice authoring tools –SVG is free

35. What enviornments can view SVG (1) A variety of viewers available for download free-of-charge: Browsers native support SVG: –X-Smiles www.xsmiles.org –W3C Amaya www.w3.org/Amaya/Amaya.html Browser + pulg-in –Adobe SVG viewer www.adobe.com/svg/viewer/install/main.html

36. What enviornments can view SVG (2) Java-based SVG viewers: –IBM SVGView www.alphaworks.ibm.com/tech/svgview –CSIRO SVG toolkit sis.cmis.csiro.au/svg/ others –Apache XML project Batik xml.apache.org/batik/ –CSIRO PocketViewer www.cmis.csiro.au/sis/SVGpocket.htm –2004-06-14: Nokia announce SVG in Series 60 (Scalable UI framework with SVG, supporting high display resolutions: 176 x 208, 208 x 208, 240 x 320 QVGA, 352 x 416) –2004-04-19: Sony Ericsson K700 supports SVG using ZOOMON player

37. What enviornments can view SVG (3) The configuration of your web server: – Extension: svg –MIME type: image/svg+xml –Extension:.svgz –MINI type: image/svg+xml

38. Tools to create SVG You can use WYSIWYG program to export SVG code : –Adobe Illustrator 10 –Adobe GoLive 5.0 –Adobe Photoshop –CorelDraw 10 –JASC WebDraw 1.0 (30 days trial version) –OpenOffice 1.0 (free) –Amaya (free) –SVGDraw 0.9 (free)

39. Activity : Installing the Adobe SVG Viewer (Time: < 5 mins) Step 1: –Download Adobe SVG viewer from Adobe SVG Zone www.adobe.com/svg/viewer/install/main.html Step 2: –double-click the downloaded installer and follow the on-screen instructions.

40. Step 3: –test your browser in SVG test page www.adobe.com/svg/viewer/install/svgtest.html

41. SVG basic data types, syntax, structure and rendering order

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

43. 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 RGB color space. Either by keywords recognized by SVG or by hex numbers.

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

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

46. A HelloWorld SVG (1/3) <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303- stylable.dtd"> Hello, World!

47. The first two lines are standard XML form. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG- 20000303/DTD/svg-20000303-stylable.dtd"> A HelloWorld SVG (2/3) This document is a piece of XML Link to the W3C’s SVG DTD

48. A HelloWorld SVG (3/3) Draw a simple text “Hello, World!” Hello, World! Hello, World! (100,100) (0,0) (300,300)

49. Create your first helloworld.svg (Time: < 2 mins) Activity

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

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

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

54. SVG documents have their origin at the top left Supported units of measure: pixels px percent % millimeters mm centimeters cm inches in ems em x height ex points pt picaspc SVG Coordinate Systems X y 0,0

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

56. Using default user Coordinates: <rect x="10" y="10" width="50" height="30" style="stroke: black; fill: none;"/>

57. Using default user Coordinates with explicit use of units: <rect x="10mm" y="10mm" width=”15mm" height=”10mm" style="stroke: black; fill: none;"/>

58. Using units on viewport: <rect x="10" y="10" width=”50" height=”30" style="stroke: black; fill: none;"/>

59. Specifying user coordinates with viewbox: <svg width=”4cm" height=”5cm” viewBox=“0 0 64 80”> <rect x="10" y="35" width="40" height="40" style="stroke: black; fill: none;"/> <polyline points="10 35, 30 7.68, 50 35" style="stroke:black; fill: none;"/> <polyline points="30 75, 30 55, 40 55, 40 75" style="stroke:black; fill: none;"/>

60. Preserving aspect ratio of image: preserveAspetRatio Specify the alignment of the scaled image with respect to the viewport: –meet the edges (fit in the viewport) –sliced off –none –x-alignment: xMin, xMid, xMax –y-alignment: yMin, yMid, yMax

61. Using the meet specifier

62. Using the slice specifier

63. Using the none specifier

64. <rect x="100" y="5" width="60" height="80" style="stroke: blue; fill: none;"/> <svg x="100" y="5" width="60" height="80" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin slice"> <circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/> Nested systems of coordinates:

65. How to map a screen (640x480) graphic into a portable device (320x240) display ? (Time: < 3 mins) Activity

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

67. Line <line x1="40" y1="20" x2="80" y2="20" style="stroke: black;"/> <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm” style="stroke: black;"/> <line x1="25" y1="25" x2=”85" y2=”85” style="stroke-width: 10; stroke: black;"/>

68. Line stroke-width <line x1="30" y1="10" x2="80" y2="10" style="stroke-width: 10; stroke: black;"/> <line x1="10" y1="30" x2="10" y2="80" style="stroke-width: 10; stroke: black;"/> <line x1="25" y1="25" x2="75" y2="75" style="stroke-width: 10; stroke: black;"/>

69. Line stroke-color <line x1="10" y1="10" x2="50" y2="10" style="stroke: red; stroke-width: 5;"/> <line x1="10" y1="20" x2="50" y2="20" style="stroke: #9f9; stroke-width: 5;"/> <line x1="10" y1="30" x2="50" y2="30" style="stroke: #9999ff; stroke-width: 5;"/> <line x1="10" y1="40" x2="50" y2="40" style="stroke: rgb(255, 128, 64); stroke-width: 5;"/> <line x1="10" y1="50" x2="50" y2="50" style="stroke: rgb(60%, 20%, 60%); stroke-width: 5;"/>

70. Control the opacity <line x1="10" y1="10" x2="50" y2="10" style="stroke-opacity: 0.2; stroke: black; stroke-width: 5;"/> <line x1="10" y1="20" x2="50" y2="20" style="stroke-opacity: 0.4; stroke: black; stroke-width: 5;"/> <line x1="10" y1="30" x2="50" y2="30" style="stroke-opacity: 0.6; stroke: black; stroke-width: 5;"/> <line x1="10" y1=”40" x2="50" y2="30" style="stroke-opacity: 0.8; stroke: black; stroke-width: 5;"/> <line x1="10" y1=”50" x2="50" y2="30" style="stroke-opacity: 1.0; stroke: black; stroke-width: 5;"/>

71. Dotted lines <line x1="10" y1="10" x2="100" y2="10" style="stroke-dasharray: 9, 5; stroke: black; stroke-width: 2;"/> <line x1="10" y1="20" x2="100" y2="20" style="stroke-dasharray: 5, 3, 9, 2; stroke: black; stroke-width: 2;"/> <line x1="10" y1="30" x2="100" y2="30" style="stroke-dasharray: 9, 3, 5; stroke: black; stroke-width: 2;"/>

72. Rectangles <svg width="200px" height="200px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet"> <rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;"/> <rect x="10" y="70" width="25" height="30" style="fill: #0000ff; stroke: red; stroke-width: 7; stroke-opacity: 0.5;"/> <rect x="50" y="70" width="35" height="20" style="fill: yellow; fill-opacity: 0.5; stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>

73. Rectangles with rounded corners <svg width="200px" height="200px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet"> <rect x="10" y="10" width="20" height="40" rx="2" ry="2" style="stroke: black; fill: none;"/> <rect x="40" y="10" width="20" height="40" rx="5" style="stroke: black; fill: none;"/> <rect x="70" y="10" width="20" height="40" ry="10" style="stroke: black; fill: none;"/> <rect x="10" y="60" width="20" height="40" rx="10" ry="5" style="stroke: black; fill: none;"/> <rect x="40" y="60" width="20" height="40" rx="5" ry="10" style="stroke: black; fill: none;"/>

74. Circles and Ellipses <svg width="200px" height="200px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet"> <circle cx="30" cy="30" r="20" style="stroke: black; fill: none;"/> <circle cx="80" cy="30" r="20" style="stroke-width: 5; stroke: black; fill: none;"/> <ellipse cx="30" cy="80" rx="10" ry="20" style="stroke: black; fill: none;"/> <ellipse cx="80" cy="80" rx="20" ry="10" style="stroke: black; fill: none;"/>

75. Polygon <svg width="200px" height="200px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet"> <polygon points="15,10 55, 10 45, 20 5, 20" style="fill: red; stroke: black;"/> <polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill: #ccffcc; stroke: green;"/> <polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" style="fill: yellow; fill-opacity: 0.5; stroke: black; stroke-width: 2;"/>

76. Star with crossing lines <svg width="200px" height="200px" viewBox="0 0 200 200” preserveAspectRatio="xMinYMin meet"> <polygon points="48,16 16,96 96,48 0,48 80,96" style="stroke: black; fill: none;"/>

77. Polyline <svg width="200px" height="200px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet"> <polyline points="5 20, 20 20, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20" style="stroke: black; stroke-width: 3; fill: none;"/>

78. Line Caps <line x1="30" y1="10" x2="80" y2="10” style="stroke-linecap: round; stroke-width: 10; stroke: black;"/> <line x1="30" y1="30" x2="80" y2="30" style="stroke-linecap: butt; stroke-width: 10; stroke: black;"/> <line x1="30" y1="50" x2="80" y2="50” style="stroke-linecap: square; stroke-width: 10; stroke: black;"/> <line x1="30" y1="0" x2="30" y2="60" style="stroke-width: 1; stroke: black;"/> <line x1="80" y1="0" x2="80" y2="60" style="stroke-width: 1; stroke: black;"/>

79. Line Joins <polyline style="stroke-linejoin: miter; stroke: black; stroke-width: 12; fill: none;" points="30 30, 45 15, 60 30"/> <polyline style="stroke-linejoin: round; stroke: black; stroke-width: 12; fill: none;" points="90 30, 105 15, 120 30"/> <polyline style="stroke-linejoin: bevel; stroke-width: 12; stroke: black; fill: none; " points="150 30, 165 15, 180 30"/>

80. Use Rectangles, polygon and lines element to draw the following image (Time: <25mins) Activity

81. Document structure SVG lets you separate a document’s structure from its presentation. –Style: Fill color stroke width opacity –Structure: Shape Position size

82. Style (1) Inline style <svg width="200px" height="200px" viewBox="0 0 200 200"> <circle cx="60" cy="60" r="15" style="stroke: black; stroke-width: 1.5; fill: blue; fill-opacity: 0.6;“ />

83. Style (2) Internal stylesheets <![CDATA[ circle { fill: #ffc; stroke: blue; stroke-width: 2; stroke-dasharray: 5 3 } ]]> <circle cx="60" cy="60" r="15" style="stroke-width: 1; stroke-dasharray: none;"/>

84. Style (3) External stylesheets * { fill:none; stroke: black; } /* default for all elements */ rect { stroke-dasharray: 7 3; } circle.yellow { fill: yellow; }.thick { stroke-width: 5; }.semiblue { fill:blue; fill-opacity: 0.5; } Filename: ext_style.css

85. Style (3) External stylesheets <svg width="200px" height="200px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet"> <polygon class="thick" points="60 50, 60 80, 90 80"/> <polygon class="thick semiblue" points="100 30, 150 30, 150 50, 130 50"/>

86. Style (4) Presentation attributes <svg width="200px" height="200px" viewBox="0 0 200 200"> <circle cx="60" cy="60" r="15" fill=“red” stroke=“black” stroke-width=“2” />

87. Style (4) Presentation attributes Presentation attribute are at the lowest priority. Any style specification coming from an inline, internal, external stylesheet will override a presentation attribute. <svg width="200px" height="200px" viewBox="0 0 200 200"> <![CDATA[ circle { fill: red; } ]]> <circle cx="60" cy="60" r="15" fill="green" />

88. Apply style specification (e.g. inline, internal, external stylesheet or presentation attribute) in the following image (Time: <10mins) rect.window { fill: #FFFF00; stroke: black; stroke-width: 2; } circle { fill: red; } Activity

89. Summary What is SVG –SVG is a language for describing 2D vector and mixed vector/raster graphics in XML. Advantage and disadvantage of using SVG XML basic Install SVG viewer plug-in SVG syntax, structure, coordinate systems and rendering order Basic shape and styles

90. Activity SVG tool -- SVGDraw 0.9 (free) http://www.adobe.com/svg/demos/main.html

91. End of day 1