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 “&lt;”, 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