Upload
amie-wilkinson
View
231
Download
5
Tags:
Embed Size (px)
Citation preview
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:• 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 “<”, etc.
• <![CDATA[ content goes here ]]>
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 />
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” />
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
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…
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)
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
Basic Shapes (Primatives) Basic shapes are represented by elements
• <line>• <rect>• <circle>• <ellipse>• <polyline>• <polygon>• <path>• <text>• <image>• <use>
<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
<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"/>
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
<circle />
Circle: • Centerpoint (cx, cy) and radius
• <circle cx="125" cy="25" r="20" fill="orange"/>
• Anomalous syntax
<ellipse />
Ellipse:• Centerpoint (cx, cy) and 2 radii (rx, ry)
• <ellipse cx="225" cy="25" rx="30" ry="20" fill="indigo"/>
<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” />
<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
<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,200A10,40 -35 1,1 370,190Z'/>
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
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
Path Commands, continued
Horizontal • Absolute: H
• Relative: h
• takes single x value• H150
• Draws horizontal line from last point to new x location
Path Commands, continued
Vertical • Absolute: V
• Relative: v
• takes single y value• V170
• Draws vertical line from last point to new y location
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
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”
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”
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”
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
<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
<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
<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
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
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
SMIL
Synchronized Multimedia Integration Language
Interactivity• Style, positioning, size, or other attributes
Animation• Special functionality for movement and color
shifting
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;};
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
Scripting, continued
File Access Protocols
• printNode()
• postURL()
• getUrl()
• parseXML()
New in SVG1.2:• URLRequest
• Sockets
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
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!
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
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…!