1 / 42

Introduction To Scalable Vector Graphics

Introduction To Scalable Vector Graphics. From XML to sXBL. XML Basics. XML is text-based Composed of elements, attributes, and child nodes Hierarchical structure tree structure: parents, children, and siblings. XML Basics , continued. Similar to HTML, but with a few differences:

zamir
Download Presentation

Introduction To Scalable Vector Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • <p></p>, not <p> <p> • <br />, not <br> • Attribute values must be in quotations • font-size=“10”, not font-size=10 • All elements must be properly nested • <e1><e2></e2></e1>, not <e1><e2></e1></e2> • Properly escape all restricted characters • Entity references: “<” is “&lt;”, etc. • <![CDATA[ content goes here ]]>

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

  5. Attributes • Attributes are composed of the attribute name and the attribute value • <localName attributeName=“attributeValue” /> • 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… • <localName ns1:isOn=“true” ns2:isOn=“false” />

  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 • <furniture:table><html:table> • 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 <svg> 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 • <svg width=“200” height=“200” viewBox=“0, 0, 100, 100”> • Can be used to zoom in or out • May deform the view • Sometimes unintuitive

  10. Basic Shapes (Primatives) • Basic shapes are represented by elements • <line> • <rect> • <circle> • <ellipse> • <polyline> • <polygon> • <path> • <text> • <image> • <use>

  11. <line /> • Simple line, from point to point: • x1, y1 to x2, y2 • <line x1="5" y1="5" x2="45" y2="45" stroke="red" stroke-width="3"/> • No fill, only stroke • Demonstrates x/y coordinate system • Units: • Pixels is default • Other units (mm, in, etc.) • Percentages

  12. <rect /> • Rectangle: • x, y, width, and height • Only positive values for width, and height • Rounded corners • rx, ry • <rect x="405" y="5" width="40" height="40" rx="7" ry="7" fill="blue" stroke="crimson"/>

  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 /> • Circle: • Centerpoint (cx, cy) and radius • <circle cx="125" cy="25" r="20" fill="orange"/> • Anomalous syntax

  15. <ellipse /> • Ellipse: • Centerpoint (cx, cy) and 2 radii (rx, ry) • <ellipse cx="225" cy="25" rx="30" ry="20" fill="indigo"/>

  16. <polyline /> • a shape composed of straight lines: • points: a parameterized list of coordinates in the format “x,y” • <polyline points=“20, 5 40,25 0,25” />

  17. <polygon /> • Same format as polyline, but closed • <polygon points="105,105 145,145 105,145 145,105" stroke="violet" stroke-width="5" fill="none" stroke-linejoin="round"/> • Exists for ease of coding and semantic value • Any polyline or polygon (or other shape) can be created using the path syntax

  18. <path /> • 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,90275,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,300460,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,160450,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,1370,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. <text /> • 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 • <switch> element allows localization of text based on system language • SVGFonts • Allows embedding of fonts • <tspans>: 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. <image /> • An embedded raster or SVG image • Uses the xlink namespace • <image x=“40” y=“20” width=“200” height=“150” xlink:href=“shinyDonkey.png” /> • Can be an element from another SVG document (doesn’t work in ASV3) • External SVG images are static

  30. <use /> • A duplication of a previously-defined element • Uses the xlink namespace • <use x=“20” y=“35” xlink:href=“#myShape” /> • 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 • <g> (group) • Treats all child elements as a single unit • Child elements inherit group style properties • <svg> • Uses own positioning and coordinate system • Can have own viewBox • <defs> • Elements are not shown directly • Revisit <use /> • 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: Raiders Star Wars of the Lost Arc Growing Text Double-Curved Text

  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>Title Goes Here</title> • <desc>A longer description of the document or element can go here</desc> • <hint>Tooltip Help in SVG1.2</hint> • <metadata></metadata> • 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 • <html:button x=“10” y=“200”>Press This!</html:button> • <graph:pieSlice color=“green” value=“5%” label=“Profit” /> • <widget:slider type=“horizontal” /> • 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

More Related