Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Graphics on the Web

• Pixel based images (gif, png, jpeg, …)
  • Fixed resolution
  • Can be very large
  • Original “information” is lost
    • difficult to add metadata
    • difficult to adapt to viewing environment
  • Limited interaction (except for animated gifs and the like)
  • Client/server side image maps for linking
    • clumsy, requires separate authoring tools
• Proprietary solutions
  • proprietary authoring tools, players, …

What do we Need?

Vector graphics

Resolution independent

Keeps “content” information

In line with earlier developments (GKS, PHIGS, PostScript, …)

Textual encoding (too)

Let the client side interpret the content

Searchable

Easy to edit, add links, etc

Base it on XML

Would use a well-understood syntax

Can “inherit” functionalities from elsewhere

Can make use of XML aware software (implementations, editing, …)

Would integrate well with the rest of the Web

SVG

Scalable Vector Graphics (SVG):

• W3C Working Group was created in 1998
• Specification quite stable by 2000, with first implementations
• Recommendations:
  • SVG 1.0 (September 2001)
  • SVG 1.1 and SVG Mobile (January 2003)
• SVG 1.1 and SVG 1.0 are functionally identical
  • SVG 1.1 is a “modularization” of SVG 1.0
• Work is continuing towards SVG 1.2 and SVG 2.0

“SVG is the HTML for Graphics”

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

A Simple SVG Example

• svg is the top XML element, with a coordinate system
• g is used for (hierarchical) grouping
• path is a general tool for geometry definition
• paths can be filled, stroked, …
• paths can be transformed, animated, filtered, …

Coordinates, Transformations

• Initial coordinate system is set up in the svg element:
  • width and height attributes
    • the user agent should honour those values when displayed
  • viewBox attribute
    • full image is mapped onto the view canvas by the user agent
    • there is a preserveAspectRatio attribute to control the mapping
• Large palette of units (px, pt, mm, cm, in, etc.)
• Transformations can be defined on all elements
  • translate, scale (both in X and Y), skewX and skewY, rotate
  • general 2x3 matrix
  • concatenation of all these (from right to left):

  ... transform="scale(2) rotate(20) translate(1,2) scale(4)" ...

Basic Coordinate System

Possible Units

• User agents must retrieve display information for scaling
• Explicit units are rarely useful on the Web…
• … but may be a natural dimension for the application

Using Viewbox

Simple Transformations

Rotations

Matrices are 2×3!

• Matrices are 2×3, with vector on the right
• The matrix(a,b,c,d,e,f) attribute means:

Concatenation Examples

All Transformations Together

Grouping

• Elements can be “grouped” in a g element
• Well-known concept in graphics packages
• Groups
  • can be nested
  • can set transformations, attributes, etc,
    • inherited by their constituents
  • can be named, can be referred to in, eg, URL-s
  • can make the content more accessible for specialized browsers
    • eg, browsers for visually impaired
  • make SVG code more readable
• Typical usage of a group:

    <g id="duck" transform="translate(100,345)">

         <desc>This is the duck></desc>

         <path d="...."/>

    </g>

Structuring SVG Files: Templates

• Elements can be enclosed in a defs (and not displayed!)
• Used repeatedly through a use element:

    <defs>

        <g id="duck"> <path d="..." .../> </g>

    </defs>

    ...

    <use xlink:href="#duck">

• Transformation can also be defined on use
• symbol can also be used instead
  • symbols have their own view box (ie, local coordinate system)

    <symbol id="duck"> <path d="..." .../> </symbol>

    ...

    <use xlink:href="#duck">

• All references may be general URI-s
  • i.e., “libraries” of symbols can be created

Structuring SVG Files (cont)

• The svg elements can also be nested
• May be useful:
  • setting up local coordinate systems
  • copying external files
  • ...

    <svg ....>

       ...

       <svg ....>...</svg>

       ...

    </svg>

Grouping/Templates are Used a Lot!

Sierpinski Triangle

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Geometry: Path Expressions

Path Simplifications

Use relative coordinates

l instead of L, c instead of C, etc, define relative coordinates

Drop repeated command characters

"M 1 2 L 3 4 5 6 7 8 z"

is equivalent to:

"M 1 2 L 3 4 L 5 6 L 7 8 z"

Syntactic simplification

Whitespace can be omitted everywhere where possible:

<path d="M0 312c40 48 120-32 160-6c0 0 5 4 10-3c10-103 50-83

c0 0 20 12 30 7c-2 12-18 17-40 17..."/>

is a compressed version of the duck (a reduction of over 60%!)

Smooth curves

Implicit definition of Bézier control points for adjacent curves

Path Examples

Path Details: Q-Splines

Path Details: Q-Splines (cont)

Path Details: C-Splines

Path Details: C-Splines (cont)

Path Details: Arcs

Path “Shortcuts”

Text

• Is a separate element

  <text x=".." y="..">Blablabla</text>

• Has tons of attributes (mostly from CSS):
  • font, weight, font style, size
  • color (both outline and inside a character)
  • writing mode, text anchor
• Text can be positioned on a curve:

    <path id="path"> ...</path>

    <text><textPath xlink:href="#path"> ...</textPath></text>

Plain Text Examples

tspan Examples

Text on Paths

International Text

Inclusion of Images

Images Inline

• Images can be encoded directly
• There are tools for conversion (eg, Image2Base64.exe)

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Rendering Model

• SVG uses the painter’s model for rendering:
  • each operation “paints” on the output device successively
  • rendering order is implicit to the XML document
  • groups are rendered separately, then mapped on the output

Opacity, Blending

• opacity attribute can vary between 0 and 1
• The terms alpha (α) or luminance are also used
  • although, technically, they are not absolutely the same...
• Opacity level can influence final output
• (“simple alpha blending”):
  • Cr' = (1-Ea)*Cr + Er, and
  • Ca' = 1 - (1-Ea)*(1-Ca), where:
  • Ea and Er : alpha and red of the element
  • Cr and Cr': canvas’s red before and after blending
  • Ca and Ca': canvas’s alpha before and after blending

Opacity on Groups

Clipping

The "objectBoundingBox" Attribute

Masking

• Clipping draws with clip region transparent inside

  and opaque outside

• Masking draws with an opacity value generated from a mask:
  1. calculate luminance value: α = 0.2125R + 0.7154G + 0.0721B
  2. the result is the opacity of the masked image
• If opacities are defined on mask and/or image, the values

  are multiplied

• For example (image is the mask, used for a black rectangle):

Practical Masking Example

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

SVG Attributes

• The usual attributes are available:
  • stroke attributes (line join, miter, dash array, etc)
  • fill rule (even-odd, nonzero)
  • pattern fill
• Colour
  • sRGB is the default
  • International Colour Consortium (ICC) colour profile can be chosen
• Patterns, linear, and radial colour gradients
• Opacity is accessible separately

Stroke Attributes

Dash line control

Marker Symbols

Area Attributes

Fill Rules

Fill Rule Examples

Gradient Fill Definitions

Gradient Fill Examples

Details of Gradient Specification

Transforming Gradients

Another Gradient Example

Pattern Fill

Adaptation of a Pattern to an Area

Typical Use of Patterns

Image as a Pattern

Patterns can be Transformed

    <pattern id="P" patternTransform="rotate(45)"

        <image width="72" height="48" xlink:href="w3chome.png"

    </pattern>

Stroke/Fill Attributes Defaults

• For stroke:
  • stroke: none (except for line, which is black)
  • stroke-width: 1
  • stroke-linecap: butt
  • stroke-linejoin: miter
  • stroke-dasharray: none
  • stroke-opacity: 1
• For fill:
  • fill: black
  • fill-rule: nonzero
  • fill-opacity: 1

Text Attributes

Text Rendering control

• The text-rendering attribute allows quality control:
  • optimizedSpeed: eg, turn off anti-aliasing
  • geometricPrecision: suspend glyph hints
  • optimizeLegibility: use additional hints in fonts,
  • resolution dependent spacing
• May be significant for small fonts

Named Colours

Named Colours & RGB values

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Styling in Text Processing

• Separation of style and content:
  • TeX/LaTeX style files
  • templates for MsWord files, styles for FrameMaker
  • cascading style sheets (CSS) for HTML/XML
• Has great advantages:
  • ease of maintenance
    • changing the colour of an element should be made only once
  • house/corporate style control
  • clarity of structure
  • adaptation to the environment
    • different styles for different viewer engines
    • adaptation to users with disabilities
  • design control
    • styles are often made by design professionals

Styling in Graphics

• Similar ideas can be used for graphics
  • control the fonts for all the text on these slides through style
  • control colours in a set of schematic diagrams
• But… what is style in graphics?
  • colour, font style, dash pattern, etc, may be style, but…
  • font used in a logo is not style, it is content
  • colour showing a traffic light is not style, it is content
• There is a need for a dual control over content and style

SVG Styling

Simple styling example:

<rect fill="yellow" stroke="black" width=".." height=".."/>

<text font="Helvetica" font-size="14" x=".." y="..">...</text>

Equivalent CSS syntax:

<rect style="fill:yellow;stroke:black" width=".." height=".."/>

<text style="font:Helvetica;font-size:14" x=".." y="..">...</text>

Separation into separate style:

<svg ...>

    <style type="text/css">

rect.example {fill:yellow; stroke:black }

text.example {font:Helvetica; font-size:14 }

    </style>

    ...

    <rect class="example" width=".." height=".."/>

    ...

    <text class="example" x=".." y="..">...</text>

</svg>

SVG Styling 2

Separation into a CSS File

Separation into separate style file:

• style.css file contains:

    rect.example {fill:yellow; stroke:black }

    text.example {font:Helvetica; font-size:14 }

• The svg file itself is:

    <?xml-stylesheet type="text/css" href="style.css" ?>

    <svg ...>

      ...

      <rect class="example" width=".." height=".."/>

      ...

      <text class="example" x=".." y="..">...</text>

    </svg>

Styling Priorities

• The “cascade” of styling priorities (in increasing order):
  • default values (eg, fill is black)
  • attribute settings (eg, < ... fill="red" ... />)
  • CSS settings in the included style file
  • CSS settings in the local <style> section
    • if two rules refer to the same element, the latter wins
  • CSS settings on the element (eg, < ... style="fill:red" ... />)
• Practical advise: do not mix direct attribute settings and CSS!

Complex Lines with Styling

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Font Selection

• Use font name; can be
  • specific: font-family="Helvetica"
  • generic name (defined in CSS): font-family="sans-serif"
  • a list: font-family="Helvetica, sans-serif"
  • but… specific fonts are not always available!
• Refer to explicit, downloadable fonts (“Web fonts”)
  • there is a detailed specification in CSS2
  • the CSS2 rule @font-face can be used, too
  • but… CSS2 does not require availability of a specific format

SVG Fonts

• SVG also defines its own font format
  • font specification can be embedded in the SVG file
  • can be stored in a separate file
• Ensures an independence of locally stored fonts, but…
• … may increase file size
• Very small fonts for 2-3 characters can also be defined
  • useful for, eg, for company logos

SVG Font Definition...

... and What You Get

Font Metrics

Referring to external fonts

• Using XML:

    <font-face font-family="Font name" font-weight=".."

       font-style="..">

      <font-face-src>

        <font-face-uri xlink:href="File.svg#FontID"/>

      </font-face-src>

    </font-face>

• Using CSS:

    @font-face { font-family:"Font name"; 

                 font-weight:...; font-style:...;

                 src: url("File.svg#FontID") format(svg); }

• “Font name” can then be used as a valid font

Han Character Example

Smiley Font Example

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Filters

• Graphics on the Web is often used for "artwork"
  • complex logos
  • “sexy” presentations (shadow effects, pseudo 3D)
  • advertisements
• Images (jpeg, png, gif, etc) can be included in SVG
  • but this breaks the goals…
• Filters have been added to SVG to produce artwork

Filter Operations

Filter Primitives

• Filters can be constructed through filter primitives
• Combined in a data-flow network
• Usually operate on a group of primitives

Filter Details

Coding Filters in SVG

<defs>

    <filter id="DropShadowFilter">

        <feGaussianBlur in="SourceAlpha" stdDeviation="2"

          result="BlurAlpha"/>

        ...

        <feMerge>

            <feMergeNode in="BlurAlpha"/>

            <feMergeNode in="SourceGraphic"/>

        </feMerge>

    </filter>

</defs>

...

<g filter="url(#DropShadowFilter)">

    <path d="...">

    ...

</g>

(Rough) Overview of Filters

• Colour manipulation
  • direct colour matrix manipulation
  • component transfer (brightness, contrast/gamma control, …)
• Compositing
  • merging, blending
  • general compositing
• Picture modification
  • convolution (blurring, sharpening, etc)
  • fattening/thinning (ie, dilation or erosion)
  • (Gaussian) blur
  • offsetting
  • displacement maps
    • displace pixels in one image under the control of another

Overview of Filters (cont.)

• Diffuse and specular lighting
• Picture creation
  • generation of artificial textures (turbulence functions)
  • tiling, flooding

Colour Matrix Manipulation

Linear Component Transfer

Gamma Component Transfer

Picture Compositing

Convolution Matrix on Pixels

Morphed Ducks

Displacement Maps

Displacement Maps 2.

Lighting

• Operates on the alpha channel as an artificial surface
• Light sources are positioned in 3D space
• Result is an opaque RGB image in function of

  light source colour

• There are separate elements for diffuse and specular lighting
  • uses the standard Phong equations for lighting control
  • (for specular light the viewer is supposed to be in (0,0,1)

    direction at infinity)

• Separate elements/properties to control light
  • light colour
  • distant light, point light, spot light

It’s a bit of a fake, but can be very useful!

Lighting Effects

Turbulent Ducks

Filtering the W3C Logo

Filter Usage May Be Very Simple!

• E.g., text background, that automatically adjusts to text size:

			<filter filterUnits="objectBoundingBox" height="1.6" 

			    id="background" width="1.1" x="-0.05" y="-0.4">

				<feFlood flood-color="yellow" result="flood"/>

				<feMerge>

					<feMergeNode in="flood"/>

					<feMergeNode in="SourceGraphic"/>

				</feMerge>

			</filter>

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

SVG Animation

• SVG Animation = change object attributes dynamically
• Animation is controlled through a set of animation objects
  • reusing parts of W3C’s SMIL2.0 Specification

    (Synchronized Multimedia Integration Language Version 2.0)

• Declarative syntax, no real increase in file size
• Animation is performed on client side

SVG Animation Example

Aspects to Describe

1. What can be animated?
2. How are the values calculated?
3. When does animation occur?

What is animated?

• Practically all attributes can be changed
  • XML: coordinates, path expression, filter characteristics, …
  • CSS: colour, visibility, opacity, …
• Separate animation elements
  • animate, animateMotion, animateTransform
  • animateColor
  • set (changes discrete values)
• Examples:

Path Deformation

Walking Man…

Animate Transformation

Animate Motion

Animate Colour

Instantaneous Change: ‘set’

How are the values calculated?

• By default, animation is linear
  • the [from,to] interval is interpolated linearly over required duration
• Alternative possibilities:
  • Discrete jumps (no interpolation)
  • Specify intermediate (key) values and time
  • Replace linear interpolation by (cubic) splines (in [0,1])
  • Key times and spline interpolation can be combined

Key Values

Key Values example

Key Values and Times

Time Interpolation Modes

Key Splines

Bouncing Cubes

When?

• Simple case: time-based animation
  • begin, dur, end attributes
  • values are in time (with “t = 0” value at loading)
  • all kinds of time units are available
• Complicated case: event-based animation
  • begin attribute can refer to events, eg:
    • obj.click, when a click occurs on obj
    • anim.end or anim.begin, when anim ends, resp. begins
    • anim.end; anim2.end, when anim or anim2 ends
    • anim.begin+4s 4 seconds after anim begins
    • obj.mouseover, obj.mouseout when mouse moves over/out obj
    • ...

When (cont.)?

• Animation can be repeated
  • events can also refer to the repeat:
    • anim.repeat(2) when anim has completed its second, repeated action
• Animation effects can be “frozen”

Detailed semantics defined in a separate SMIL specification

Chaining Animations

Multimedia Show...

Control with Mouse Events

Cartography Example

Panda and the Flower

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Framing an Image

• The center of the frame is white, not empty!

Framing an Image: How

<image id="frame" xlink:href="../jpgs/frame.jpg" width="..."/>

<filter id="makeFrame">

	<feColorMatrix type="matrix" values="

	1      0      0       0 0

	0      1      0       0 0

	0      0      1       0 0

	0.2125 0.7154 0.0721  0 0

	"/>

	<feComponentTransfer>

		<feFuncR type="linear" slope="0.0" intercept="1.0"/>

		<feFuncG type="linear" slope="0.0" intercept="1.0"/>

		<feFuncB type="linear" slope="0.0" intercept="1.0"/>

		<feFuncA type="discrete" tableValues="0 1"/>

	</feComponentTransfer>

</filter>

<mask id="mask">

	<use xlink:href="#frame" filter="url(#makeFrame)"/>

</mask>

Animating Gradients in Filters

Animate the radius of the gradient for feDisplacementMap

Animating Font Glyphs

Using Filters for Patterns

Animate Clipping Path

The Power of Local Animations

• Animations are defined locally, they are simple rotations
  • they may rotate a whole group (ie, Earth+Moon)
• Complex movement through grouping

Changing Pattern References

    <path fill="url(#Pattern)"

        <set attributeName="fill" to="url(#Pattern2)" begin="click"/>

    </path>

Lights and Images

<feImage xlink:href="../jpgs/Cadaques3.jpg" result="image">

<feSpecularLighting lighting-color="red" in="image" out="spot"...>

  <fePointLight x="200" y="140" z="20">

    <animate attributeName="x" from="200" to="350" .../>

    <animate attributeName="z" from="20" to="160" .../>

  </fePointLight>

  <animate attributeName="lighting-color" from="red" to="yellow".../>

</feSpecularLighting>

<feComposite operator="arithmetic" in="image" in2="spot" .../>

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

SVG DOM

• DOM = Document Object Model
  • programmatic interface to the runtime XML tree
    • interface definition in OMG’s IDL
    • language bindings in Javascript, Java, C++
  • a general W3C mechanism with an SVG specialization
• Scripts can be included in SVG (through a script node)
• Scripts can modify:
  • the XML tree (add and/or delete nodes)
  • the attributes of individual objects
• Scripts can be used for animation and interaction:
  • more powerful than animation objects, but…
  • more complicated and error prone to write
  • require additional interpreters on the client-side

Scripting Languages

• Most widespread is ECMAScript (a.k.a. Javascript)
• VBasic is also used on small devices (see later)
• Java SVG implementation can use scripts in Java, too
• All our examples are in ECMAScript

DOM Tree

But it is not that simple...

SVG DOM Objects and Methods

• General DOM methods (inherited by SVG):
  • getElementsByTagName(), getElementById(),…
  • getNodeName(), getChildNodes(),…
  • getPreviousSiblings(), getAttributes().item(0),…
  • getLength(), item()
  • getAttribute(), setAttribute(), hasAttribute(),…
• SVG Specific:
  • SVGDocument object (subclass of Document)
    • refers to title, URL, etc, has a reference to the root svg element
  • SVGTranform object
    • setMatrix(), setTranslate(), setRotate(), etc, methods
  • SVGPathElement object
  • getScreenCTM(): get the transformation matrix for an object
  • etc

Interacting with an Element

Interacting directly:

    <... id="myrect" onclick="interact(evt)"...>

    ...

    function interact(evt) {

        svgobj = evt.target;

        svgobj.setAttribute("fill","red");

        svgstyle = svgobj.getStyle();

        svgstyle.setProperty("opacity",0.5,"");

        ...

Interacting elsewhere from a script:

        svgdoc = evt.target.getOwnerDocument();

        svgobj = svgdoc.getElementById("myrect");

Example: Usage of “onclick”

Reacting on “mouseover”

Modifying the DOM Tree

Interaction with the DOM Tree

Event List

• Pointer events
  • onfocusin, onfocusout, onactivate, onclick, onmousedown
  • onmouseover, onmousemove, onmouseout
• Window events
  • onload, onunload, onabort, onresize, onscroll, onzoom
• Animation object events
  • onbegin, onend, onrepeat
• No keyboard events (yet)!
• When using in animation objects’ begin, the “on” is dropped
  • eg, <animate ... begin="i1.begin; i2.click" ... />

Idiom: Animation with Mouse

• Transformations and mouse coordinate data:
  • event.getClientX(), event.getClientY(): mouse position
  • obj.getScreenCTM(): transformation matrix to “pixels”
    • takes into account all transform attributes on the way
  • obj.getScreenCTM().inverse(): matrix into obj
    • ie, applying it to mouse coordinates yields coordinates “relative to” obj.
  • Similar methods:
    • obj.getCTM(): matrix to viewport
    • obj.getTransformToElement(): matrix from one to another element

Idiom: Top Level Document

    <svg .... onload="init(evt)">

        ...

        <script type="text/ecmascript"><![CDATA[

            var svgdoc;

            function init(evt) {

                svgdoc = evt.currentTarget.getOwnerDocument();

                ...

        ]]></script>

        ...

    </svg>

• svgdoc can then be used to navigate in the DOM Tree

Idiom: Namespaces

    <script type="text/ecmascript"><![CDATA[

      var svgns   = "http://www.w3.org/2000/svg";

      var xlinkns = "http://www.w3.org/1999/xlink";

      ...

      function f() {

        // a.setAttribute("xlink:href","http://www.example.org");  

        a.setAttributeNS(xlinkns,"href","http://www.example.org");

        ...

        obj.setAttributeNS(null,"x",300);

        ...

    ]]></script>

• Namespaces must be used properly
• Some implementations are very “picky”…
  • they may not accept setAttribute, only setAttributeNS
  • a point of discussion…

Idiom: Animation

  <script type="text/ecmascript"><![CDATA[

    function init() {

      ...

      setInterval("animate()",10);  // timer in miliseconds

    }

    function animate() {

      ...

      if( animateContinues) setInterval("animate()",10);

    }

          ...

  ]]></script>

Frame Based Animation

Same Effect with Animation Objects!

When Should Scripts Be Used?

• Numerical calculations
• Access to some system resources (eg, clock)
• Complex animation and/or interaction
  • complicated visual effects
  • need for the state of interaction
  • more compact code, higher speed
  • list handling
• Random features (eg, random choice among alternatives)
• Client/server type applications
• Managing application data embedded in the SVG content
  • The DOM includes all XML data, not only SVG
  • the SVG player ignores the non-SVG ones visually…
  • …but those are visible to a script!

RDF Schema Viewer Example

RDF Graph Visualizer:

   <svg ... xmlns:appl="http://..." onload="init(evt)">

     <style xlink:href="preds.js" ... />

     ....

     <appl:resource id="R1" x=".." y=".." label=".."/>

     <appl:resource id="R2" x=".." y=".." label=".."/>

     <appl:predicate subject="R1" object="R2" label=".."/>

     ....

   </svg>

• The graph nodes are positioned by the author
• The arcs refer to source and sink, plus some hints
• A script displays the nodes, calculates the arcs,
• places the labels on the arcs, etc

Idioms for Applications

  <script type="text/ecmascript"><![CDATA[

    var applns  = "http://www.ivan-herman.net#Presentations";

    ...

    function f() {

      r = svgdoc.getElementsByTagNameNS(applns,"resource");

      p = svgdoc.getElementsByTagNameNS(applns,"predicate");

      ...

  ]]></script>

• ‘r’ and ‘p’ contain the application data
• the rest is conventional programming…

W3C Document Visualizer

Tour through W3C Documents...:

• Similar mechanism for application data:
  • the tree data is in the application’s namespace
  • positioning is done by a script
  • script also adds links, event handlers, etc
• Interaction is also done by the script
  • using animation objects at this magnitude would be way too slow
  • scripts methods change the positions, opacity, event sensitivity
  • in some cases, the tree has to be reordered, too
• SVG turns into an application development environment!

Binomial Distribution

Clock

    <g onload="Start(evt)" ... >

    ...

    function Start(evt)

        var now=new Date();

        clockObj.adjustTime(now);

    }

Mine Sweeper Example

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Miscellaneous

• Hyperlinking
  • any element can be enclosed in a a element, much like in HTML
  • one can refer to another SVG file through “fragment identifiers” :
    • <a xlink:href="Drawing.svg#details">
    • <a xlink:href="Drawing.svg#svgView(viewBox(10,10,20,20))">
  • (“SVG xpointer() scheme”)
• Control over zooming and panning
  • they can be disabled for a specific SVG file
• Control over cursor:
  • predefined types: pointer, crosshair, move, wait, help, etc.
  • refer to an image

Conditional Processing

• A switch element can be used to separate branches, using:
  • requiredFeatures: describes features implemented by the client
  • requiredExtensions: describes extensions provided by the client
  • systemLanguage: inherited from xml
• For example:

    <switch>

      <text systemLanguage="fr">Bonjour!</text>

      <text systemLanguage="en">Good morning!</text>

    </switch>

    ...

    <rect requiredFeatures="org.w3c.svg.dynamic" 

       visibility="hidden" ... />

Metadata

• SVG can include information about itself:
  • title: provides a title for a graphics element
  • desc: textual description, may be added to all elements
• The metadata section can contain any sort of metadata
  • describe the image content for visually impaired users
  • include authentication, encrypted signatures, ...
  • describe library information (eg, using the Dublin Core)

    <svg id="ThisSVG" ... >

      <metadata> <!-- Using the Dublin Core vocabulary -->

        <rdf:RDF xmlns:rdf="..." xmlns:dc="...">

          <rdf:Description rdf:about="#ThisSVG/">

            <dc:title>Presenting SVG</dc:title>

            <dc:publisher>World Wide Web Consortium</dc:publisher>

            <dc:date> 2001-10-29</dc:date>

          </rdf:Description>

        </rdf:RDF>

      </metadata>

      ...

    </svg>

Foreign Objects

• foreignObject allows the inclusion of other namespaces
• Requires additional features from the SVG client

    <foreignObject width="100" height="50"

        requiredExtensions="http://example.com/.../XHTML">

      <html xmlns="http://www.w3.org/1999/xhtml">

        <body>

          <p>Here is a paragraph that XHTML features</p>

        </body>

      </html>

    </foreignObject>

Some Design Guidelines

These are, of course, personal guidelines…

• Keep circles as circles, etc, use path only if it is necessary
• Do not mix use of style sheets and styling through attributes
• Use classes for styling
• Use coordinates like ‘mm’, etc, only when really necessary
• Use tspan to keep text together
• Use defs (symbol) if object is repeated
• Use animation rather scripting, when you can
• Group everything!
• On top level SVG use viewBox only for rescaling
• Run it on several SVG user agents f

Some Performance Tricks

• Transparency is expensive, especially on groups
  • don’t set opacity to zero if you want elements to be invisible
  • use the display attribute
• Anti-aliased clipping is expensive
  • turn anti-aliasing off for clipPath
  • (actually, using the painter's model might be faster than clipping)
• Stroke is more expensive than fill
  • use filled shapes instead if you can
• Keep text as text
  • try to have only one element with tspan-s
• Use scripting if you do lots of animation

Accessibility Issues

• Add human readable descriptions
  • title element for readable alternative
  • desc for long descriptions
  • metadata for additional, codified information
    • eg, Dublin core metadata
• symbol and use helps readability
• class attributes can be used for describing elements, too
• switch as alternative for animation

SVG in Practice

• For SVG 1.0 (lots of places still use this:)
  • DTD: http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd
  • Public ID: PUBLIC "-//W3C//DTD SVG 1.0//EN"
• For SVG 1.1 (use this one!)
  • DTD: http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd
  • Public ID: PUBLIC "-//W3C//DTD SVG 1.1//EN"
• Namespace: http://www.w3.org/2000/svg
• Suffixes: svg or svgz (the latter is gzip compressed)

SVG Mime Type

• MIME Type: image/svg+xml
  • servers must be set up to serve this MIME type
  • beware: IE does not use MIME types, so suffixes must be used!
  • due to IE, client side-scripts may have to use other tricks, eg, add:
  • <input type="hidden" name="IE" value=".svg"/>
  • in your XHTML form as a last entry (adds a ?IE=.svg to the URL...)

SVG and HTML

Inclusion into HTML with a plugin:

    <object data="File.svg" width=".." height=".."

      type="image/svg+xml">

        <img src="..." alt="Image replacement.../>

    </object>

• embed also works, but is deprecated in HTML4 and XHTML
• all kinds of units (mm, cm, inch, etc) can also be used

Establishing the Coordinate System

Preservation of Aspect Ratio

Aspect Ratio Examples

Access to the DOM from HTML

• The reference to the SVG content is, eg,:
  • <embed src="file.svg" name="SVGEmbed" ...>
• In the script in HTML:
  • document.SVGEmbed.getSVGDocument()....;

It should work properly with <object>, but it does not always…

Better (Future) Integration

• Inclusion into any XML with namespaces (eg, XHTML)

    <?xml version="1.0" standalone="yes"?>

    <parent xmlns="http://example.org"

            xmlns:gr="http://www.w3.org/2000/svg">

      <parentElement>....</parentElement>

      <anotherParentElement>

        <gr:svg viewBox="..." width="..." height="..." ... >

          <gr:rect>....</gr:rect>

        </gr:svg>

      </anotherParentElement>

    </parent>

• Works in W3C's Amaya, X-Smiles, and Mozilla's SVG build
  • none of these is a complete implementation of SVG...
• Allows for a nice combination of XML applications!

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

SVG Mobile Profiles

• The “mobile Web” is coming more and more to the fore
  • Web access from PDA-s, phones, car navigation systems, ...
  • fastest growing segment of the market!
  • devices are not (yet...) as powerful as workstations
    • only as powerful as a 10 year old PC w
• SVG Mobile Profiles have been defined:
  • SVG Basic: for higher level mobile devices (eg: WinCE PDA)
  • SVG Tiny: for more restricted mobile devices (eg: simple phone)
• Profiles are subsets: Tiny < Basic < Full
• SVG Mobile and 3GPP:
  • SVG Tiny is the graphics format since 3GPP Release 5
  • SVG Basic is optional for 3GPP Release 6

SVG Basic

• All numbers must be limited to a 16bits range
• No elliptical arcs in paths
• No requirement of text selection and clipboard
• Only the 16 XHTML colours, not the full X11 set (by name)
• Subsets of filters (e.g., no lighting)
• Scripting facility is optional
• Subset of SVG fonts features
  • Only a d for a glyph, no arbitrary SVG content
• Subset of the presentation and CSS attributes
  • due to missing facilities
  • no markers
• Scripting is optional

SVG Tiny

• All the SVG Basic profile restrictions
• No nested svg elements
• SVG files as “images” not required
• No CSS styling
• No linking to particular views of an SVG target
• No symbol element
• Further restrictions on the attributes
  • eg, no alignment-baseline, text-anchor or font-stretch
• No text on path, tspan, tref
• Only solid colour, no gradients or patterns
• No opacity, filters, bounding box units
• No scripting

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Implementations: Players

• Adobe’s plugin, with major browsers on Windows, Mac,
• Linux, and Solaris
• Corel’s plugin for Win and Tablet PC
• kSVG project for Konqueror on Linux (and Apple?)
• Linux GNOME uses SVG for icons
• Standalone players, mostly in Java (eg, Batik, CSIRO)
• Ongoing Mozilla project
• Several Mobile SVG Implementations:
  • BitFlash, Sharp, KDDI, ZOOMON, TinyLine, ...
  • In browsers (ZOOMON with Opera, NetFront) ...
• Canon is experimenting with an SVG Printer

None of these are complete, but we are getting there!

Adobe Plugin Deficiencies

• Adobe’s plugin is the most widespread user agent
• Version 3 has some problems/missing features:
  • getScreenCTM(), getCTM(), etc, are buggy
  • use, pattern, etc, with external URI-s is not implemented
  • cursor control is not implemented
  • SVG xpointer() scheme does not work
  • and some others… r
• Look at the plugin documentation
• But: version 6 (in Beta) handles most of those!

Implementations: Authoring

• Export (possibly import) from Adobe AI, OpenOffice.org,
• Corel Draw, BeatWare, MS Office 11, …
• “Pure” SVG drawing tool from Sodipodi, BitFlash,

  SVG Composer, XStudio…

  • e.g., XStudio has an animation editor, too!
• Conversion tools
  • Square1’s PS → SVG
  • SVG Factory: WMF or BMP → SVG
  • Delineate or Vector Eye: GIF or JPG → SVG
  • Batik: TTF → SVG Font
  • SVGMaker: SVG Printer driver on Windows
• Subclass to Java's Graphics2D to generate SVG (part of Batik)
• Direct SVG DOM implementation in Java (also part of Batik)

Check W3C's site: http://www.w3.org/Graphics/SVG/!

Application Examples

• Raster to SVG Conversion: myself w

  (using Vector Eye’s conversion)

• Cartography: statistical data of Vienna
• map of Europe, Switzerland, Atlas of the Loiret,
• (see, e.g., MapMaker)
• MathML: SchemaSoft’s conversion of MathML to SVG
• CML: Chemical Markup Language visualization

  (http://www.xml-cml.org/)

• CAD: CAD Standard Pro, House plan

  (http://www.cadstd.com, http://www.microspot.co.uk)

• Business Graphics: Causeway

  (http://www.causeway.co.uk/demos/svg/)

• Chess animation: chess game

  (transformed from ChessML to SVG via XSLT)

Application Examples (cont.)

• Web Sites:
  • Virtual Mechanics' web site (http://www.virtualmechanics.com)
  • svg Spider (http://www.svgspider.com)
  • XMML (http://www.xmml.com)
• (Information) Visualization:
  • GVF (http://gvf.sourceforge.net)
  • Rigi (Reverse Engineering) (http://www.rigi.csc.uvic.ca/)
  • Genome Viewer (Saskatoon Research Centre)
• Education:
  • DVD Reading process (http://www.usbyte.com)
  • Bibliothèque Nationale de France

    (http://expositions.bnf.fr/bd/svg/index.html)

• SVG Games

  (http://a.1asphost.com/svggames/index.asp)

• Illustration: Book of Kells

Some Mobile SVG Examples

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

SVG1.2

• Lots of feedbacks since the publication of SVG 1.1
• Requests came for additional features
• There were also some bugs and omissions f
• Working group is active with SVG1.2
  • latest public draft: March 2004
  • hopefully a Recommendation in 2005
• Some aspects already implemented
  • e.g., in Adobe’s ASV6 beta player
• Still a moving target!
  • in what follows, only the major add-ons are presented

SVG 1.2: Better Text

• Editable texts, text selection styling
• DOM Keyboard events (from DOM 3)
• Text wrapping in an arbitrary shape:

    <flowRoot>

        <flowRegion>

            <path  .../><rect .../>

            <flowRegionExclude><rect.../></flowRegionExclude>

        </flowRegion>

        <flowDiv>

            <flowPara>Bla bla bla ...</flowPara>

            <flowPara>Bla bla bla ...</flowPara>

        <flowDiv>

    </flowRoot>

• with control over (region) break, lines, spans
• Inclusion of images in a text flow

Flowtext Example

SVG 1.2: Pages, Time

• Multiple pages (eg, slide shows, printing)
• Finer control over the clock and time
  • timelineBegin; important for, eg, page control:
    • time starts when page is loaded, or …
    • …when the whole file is loaded
  • control of speed, external setting of time
    • gives possibilities for rewind, jump forward
• par, seq: animation “shorthands”
  • precise semantics comes from SMIL 2.0

SVG 1.2: Audio, Video

• Inclusion of audio and video
• Transformation can be used for audio
• Facilities for prefetch, streaming
• Unsolved issue: what audio/video formats to require (if any)
  • SVG 1.2 should be implementable without royalties…

Audio & Video Example

SVG 1.2: Richer Rendering model

• Current model is the painter’s with simple alpha blending
• Richer compositing model:
  • combine source and destination
  • xor, plus, src_over, darken, lighten, hard_light, soft_light,…
  • 24 different operations
    • the document includes the precise equations
• Much like the compositing filter but on the original objects
  • much more efficient
  • integrates better with the rest
• Compatible with, eg, PDF 1.4

Composition Examples

Better Content Creation

• In SVG 1.1, use, marker, etc, are very useful
  • one can define “glyph libraries”, for example
• … but they have limited functionalities only
• SVG 1.2 introduces two major enhancements:
  • Vector effects
  • SVG’s XML Binding Language (sXBL)
• Both facilities open up lots of new facilities, too!

SVG 1.2: Vector Effects

• Facilities to combine/manipulate shapes, e.g.
  • join several shapes to one
  • reverse direction of a shape
  • draw the same shape several times with different attributes
• Works using a dataflow model, similar to filters:
  • an palette of vector effect primitives
  • the output of one can be used by the next one
• One can replace the default rendering of a shape:
  1. fill
  2. draw the stroke
  3. put the markers up

Vector Effect Example

  <vectorEffect id="rail">

    <veStroke stroke-width="6" fill="none" stroke="black"

              in="SourcePath"/>

    <veStroke stroke-width="3" fill="none" stroke="white"

              stroke-dasharray="10,4" in="SourcePath"/> 

  </vectorEffect>

  <path vector-effect="url(#rail)" d="..."/>

  ...

XML Binding Language (sXBL)

• Goal: ways to render arbitrary XML element
  • can be the user’s own namespace, or…
  • … an externally defined XML application (eg, XForms)
• The mechanism is as follows:
  • “templates” are defined to render the XML element
    • scripts may be used for a rich behavior
    • suitable DOM extensions are defined
  • the custom elements can be used mixed with SVG elements
    • a bit like the DOM applications we have seen before

A bit of sXBL’s History

• Was originally part of the SVG1.2 draft
  • (under the name “RCC”)
• Its general power was realized
• and its similarity to Mozilla’s XBL
• A separate task force was formed with the CSS group
• sXBL is now a separate document
  • SVG1.2 refers to it
  • first public draft published in September ’04
• Future releases will make it “SVG Independent”

Simple sXBL

• Put a text into a figure:

  <xbl:xbl>

    <xbl:definition element="a:Node">

      <xbl:template>

        <g>

          <circle ... />

          <text ...><xbl:content/></text>

        </g>

      </xbl:template>

    </xbl:definition>

  </xbl:xbl>

  <a:Node">Start</a:Node>

  <a:Node">End</a:Node>

Complex sXBL With Script

  <xbl:xbl>

    <xbl:definition element="a:Flow">

      <xbl:template><g><xbl:content/></g></xbl:template>

      <xbl:handlerGroup>

        <handler ev:event="xbl:bound" type="text/ECMAScript>

           ...(script to position the circles, draw the arrows...)

        </handler>

      </xbl:handlerGroup>

    </definition>

  </xbl:xbl>

  <a:Flow xmlns:a="http://a.b.c">

    <a:Node>Start</a:Node>

    <a:Node>Step 1</a:Node>

    <a:Node>Step 2</a:Node>

    <a:Node>End</a:Node>

  </a:Flow>

• DOM Extensions are available to reach the “shadow tree”
  • i.e., the tree after unfolding the templates

SVG 1.2: Additional DOM Functionalities

• getURL(), postURL(), parseXML()
  • were already in use in a non-standard way
  • lots of content use them already for web applications
• URLRequest object (a generalization of the ones above)
• File upload methods
• Necessary DOM extensions for audio, video, etc.

SVG 1.2 Mobile and Print

• SVG 1.2 will define profiles (like SVG 1.1)
  • SVG Full
  • SVG Tiny and Basic
    • a separate “μDOM” is being defined, too
  • SVG Printing
    • SVG could replace PostScript in some cases

Course schedule

Introduction	Miscellaneous
Transformations, structuring	SVG Mobile
Geometry	Implementations, examples
Clipping, masking	Future: SVG 1.2
Attributes	Wrap up
Styling
SVG Fonts
Filters
Animation
Some combinations…
DOM

Closing Examples

• What a little (?) patience and work can achieve:
  • WWW Conference Openings
  • Australian Roadtrain
    • note the usage of SVG Fonts!
• © Bob Hopgood (sorry, these examples are not online…)

Further Information

The SVG Recommendation itself:

http://www.w3.org/TR/SVG/

SVG 1.2 Working Draft

http://www.w3.org/TR/SVG12/

Textbooks

Several books published already

Some other sites on SVG:

http://wdvl.com/Authoring/Languages/XML/SVG/

http://www.protocol7.com/svg-wiki/ (Lots of links)

http://www.svgs.org/ (SVG Foundation, also lots of links)

http://www.kevlindev.com (Kevin Lindsey)

http://pilat.free.fr/tutorial/index.svg (Michel Hirtzler)

http://groups.yahoo.com/group/svg-developers/

...

Further Information (cont.)

Start by:

http://wdvl.com/Authoring/Languages/XML/SVG/

http://www.svgs.org/ (SVG Foundation)

http://www.w3.org/Graphics/SVG/

Proceedings of SVG Open conferences

http://www.svgopen.org/

Further Information (cont)

These slides:

http://www.w3.org/Consortium/Offices/Presentations/SVG/

An “evolving” version:

http://www.w3.org/Consortium/Offices/Presentations/SVG/

Mail me if you want:

ivan@w3.org

Acknowledgements to:

Bob and Paul Hopgood, David Duce, Andreas Neumann,

Dean Jackson, Kevin Lindsey, Antoinne Quint, Peter Garza,

Michel Hirtzler, Stefan Gössner, Max Froumentin, …

(Apologies to those I may have forgotten…)