introduction to scalable vector graphics
DESCRIPTION
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: - PowerPoint PPT PresentationTRANSCRIPT
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:• 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
Non-Affine Transformations
Cannot do in SVG:
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…!
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