1. Introduction To Scalable Vector Graphics From XML to sXBL

2. XML Basics XML is text-based Composed of elements, attributes, and child nodes Hierarchical structure tree structure: parents, children, and siblings

3. XML Basics, continued Similar to HTML, but with a few differences: xMl is CaSe seNsItive You must close every tag, not Attribute values must be in quotations font-size=“10”, not font-size=10 All elements must be properly nested, not Properly escape all restricted characters Entity references: “<” is “<”, etc.

4. Elements Elements are composed of the Tag Name (or Local Name) and any number of attributes, encased in angle brackets <> An element may be closed or open Closed: Open: (has childNode or nodeValue) They may have an optional text node or child elements This is a text node Elements may have a namespace prefix…

5. Attributes Attributes are composed of the attribute name and the attribute value Value types may be constrained by the definition of the XML dialect boolean: true, false number: 100, 45.6 string: “blue”, “visible ”, “1, 5”, ”new top brown“ id: must start with a letter, followed by other letters or number or underscores ( “_” ), with no whitespace… unique within a document (contrast with “name” in HTML) Attributes may also have a namespace prefix…

6. Well-Formed and Valid An XML document is “well-formed” if it obeys all the rules of XML Only one root element allowed XML processor will quit if it finds an error An XML document is “valid” if it conforms to the restrictions imposed by a particular dialect Only uses proper element names and attribute names Only uses attributes and child nodes with proper parent elements Uses proper values for the attributes

7. Namespaces A namespace allows the use of more than one dialect definition Distinguished by the prefix of the appropriate namespace dialect Important to sXBL…

8. Scalable Vector Graphics Basics SVG is an XML dialect for visual depictions SVG is a presentational syntax, like HTML Unlike raster images (bitmaps, JPGs, PNGs, GIFs), SVG images are not composed of a series of colored pixels, but a description of a shape (a vector) SVG images can be zoomed or panned with no loss of detail Must be re-rendered each time, so can be slower Can be compressed with GZip “.svgz” vs. “.svg” Begins with the root element 2 types of attributes: Positional and shape Style (can be used as CSS properties)

9. Layout Details Uses Cartesian x/y coordinate system Left-to-right: x increases as move right Top-to-bottom: y increases as move down Painter's Model First element declared is on the bottom, last element in document is on the top Currently no z-index Viewport viewBox Can be used to zoom in or out May deform the view Sometimes unintuitive

10. Basic Shapes (Primatives) Basic shapes are represented by elements

11. Simple line, from point to point: x1, y1 to x2, y2 No fill, only stroke Demonstrates x/y coordinate system Units: Pixels is default Other units (mm, in, etc.) Percentages

12. Rectangle: x, y, width, and height Only positive values for width, and height Rounded corners rx, ry

13. Styling fill Named color: “cornflowerblue” Hex value: “#6495ed” RGB value: “rgb(100, 149, 237)” stroke stroke-width stroke-dasharray opacity Many other style properties (display, pointer-events, etc.) Attributes vs. Style Properties fill=“cornflowerblue” style=“fill: cornflowerblue; stroke:blue;” CSS classes and Inheritance

14. Circle: Centerpoint (cx, cy) and radius Anomalous syntax

15. Ellipse: Centerpoint (cx, cy) and 2 radii (rx, ry)

16. a shape composed of straight lines: points: a parameterized list of coordinates in the format “x,y”

17. Same format as polyline, but closed Exists for ease of coding and semantic value Any polyline or polygon (or other shape) can be created using the path syntax

18. A complex shape composed of straight lines, bezier curves, and arcs d attribute (data): a parameterized list of commands and coordinates in the format “Cx,y ” <path id='curve' stroke-width='1' stroke='blue' fill='yellow' fill-rule='evenodd' d='M50,150 H150 V170 Q250,90 275,150 T300,150 C400,100 475,300 460,150 S550,160 450,300 Z M400,200 A10,40 -35 1,1 370,190 Z'/>

19. Path Commands Moveto Absolute: M Relative: m takes single pair of x/y coordinates M50,150 Path data must start with Moveto Does not render directly Can be used to “pick up pencil” within a single path

20. Path Commands, continued Lineto Absolute: L Relative: l takes single pair of x/y coordinates L100,100 Draws line from last point to new coordinates Any angle

21. Path Commands, continued Horizontal Absolute: H Relative: h takes single x value H150 Draws horizontal line from last point to new x location

22. Path Commands, continued Vertical Absolute: V Relative: v takes single y value V170 Draws vertical line from last point to new y location

23. Path Commands, continued Quadratic Bezier Absolute: Q Relative: q takes 2 pairs of x/y coordinates Q250,90 275,150 Draws curve from last point to final set of coordinates, with first coordinates as a “control point” Like a magnet

24. Path Commands, continued Smooth Quadratic Bezier Absolute: T Relative: t takes single pair of x/y coordinates T300,150 Draws curve from second-to-last point to coordinates, with a reflection of the last point as a “control point”

25. Path Commands, continued Cubic Bezier (Curveto) Absolute: C Relative: c takes 3 pairs of x/y coordinates C400,100 475,300 460,150 Draws curve from last point to final coordinates, with first and second coordinates as “control points”

26. Path Commands, continued Smooth Cubic Bezier Absolute: S Relative: s takes 2 pairs of x/y coordinates S550,160 450,300 Draws curve from second-to-last point to final coordinates, with a reflection of the last point and first coordinates as “control points”

27. Path Commands, continued Elliptical Arc Segment Absolute: A Relative: a takes rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, and a pair of x/y coordinates A10,40 -35 1,1 370,190 Draws elliptical arc segment from last point to final coordinates, with rx and ry defining the arc radius, x- axis-rotation indicating the angle of rotation, large-arc- flag determining whether the smaller or larger part of the arc is used, and sweep-flag determining whether the arc is drawn in a “positive-angle” or a “negative- angle” direction

28. Character string, starting from a set point Searchable and selectable, not just an image Rich styling support Orientation and Alignment All CSS font properties (bold, italic, underline, letter-spacing, etc.) Great support in SVG for internationalization left-to-right, right-to-left, reverse bidi, top-to-bottom, vertical element allows localization of text based on system language SVGFonts Allows embedding of fonts : substrings that can be positioned separately Absolute and relative positioning Can be used to create simple sequential lines New in SVG1.2: text wrapping to an arbitrary shape

29. An embedded raster or SVG image Uses the xlink namespace Can be an element from another SVG document (doesn’t work in ASV3) External SVG images are static

30. A duplication of a previously-defined element Uses the xlink namespace Can be an element from another SVG document (doesn’t work in ASV3) Cannot override existing attributes, but can supply additional attribute values Saves size and processing

31. Container Elements (group) Treats all child elements as a single unit Child elements inherit group style properties Uses own positioning and coordinate system Can have own viewBox Elements are not shown directly Revisit Touch On Gradients, Filters, and Patterns

32. Transforms transform Attribute translate(x, y) scale(factor) scale(xfactor, yfactor) rotate(angle) rotate(angle, centerX, centerY) skewX(angle) skewY(angle) matrix() Importance of Ordering No non-affine transforms Star Wars/Raiders of the Lost Arc

33. Non-Affine Transformations Cannot do in SVG:

34. SMIL Synchronized Multimedia Integration Language Interactivity Style, positioning, size, or other attributes Animation Special functionality for movement and color shifting

35. Scripting Allows SVG images to be dynamic and interactive Can be used to create Web applications, games, etc. Can automatically generate content Event Types: load, click, mouseover, mousemove, mousedown, mouseup, keypress, keydown addEventListener(“ click”, eventHandler, false ) Functions function FnName(parameter) { //do something }; function Init( evt ) { SVGDocument = evt.target.ownerDocument; SVGRoot = SVGDocument.documentElement; };

36. Scripting, continued Commonly-Used Methods getElementById() getElementsByTagNameNS() createElementNS() appendChild() removeChild() getAttributeNS() setAttributeNS() style.getPropertyValue() style.setProperty() DOM (Document Object Model) accessors parentNode firstChild nodeValue nextSibling

37. Scripting, continued File Access Protocols printNode() postURL() getUrl() parseXML() New in SVG1.2: URLRequest Sockets

38. Metadata Title Goes Here A longer description of the document or element can go here Tooltip Help in SVG1.2 Usually area for non-SVG XML Not rendered Structured data can be embedded in SVG, navigated and accessed through the DOM, and have data extracted and processed, using script RDF

39. sXBL SVG Extensions to XML Binding Language Replaces SVG-specific RCC Rendering Custom Content Custom Tags in different namespace Press This! Handles rendering and behavior Component-based Can use pregenerated libraries Modular First public working draft just published!

40. SVG Profiles SVG Full All of SVG features, including DOM, SMIL, Scripting, sXBL, and optional CSS SVG Tiny (SVGt) Subset of SVG for mobile devices with limited processors No DOM or sXBL microDOM SVG Print Special considerations for printing concerns, such as pagination and colors

41. Uses for SVG Scalable Images with semantic text Logos, etc. Accessible graphics Interactive Maps Web Applications Data Visualization Charts, graphs, etc. Games, comics, and much more…!

42. Other Resources Sites: http://svg-whiz.com SVG Wiki http://svg.org http://www.kevlindev.com http://www.w3.org/Consortium/Offices/Presentations/SVG/ Books: SVG Essentials by David Eisenberg (O’Reilly) SVG Unleashed Learn SVG Vectoreal.com