2D Web Graphics: SVG

I. Herman, W3C, Head of Offices

Opening Event of the W3C Finnish Office

Tampere, October 11, 2002

http://www.w3.org/2002/Talks/SVG-Tampere-IH/

• 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
• Other, proprietary solutions
  • proprietary authoring tools, players, ...

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

Based on XML

Use a well-understood syntax

Can “inherit” functionalities from elsewhere

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

Integrates well with the rest of the Web

Scalable Vector Graphics (SVG):

• W3C Working Group was created in 1998
• Specification quite stable by 2000, with first implementations
• Version 1.0 became a W3C recommendation in September 2001
• Work is continuing:
  • Mobile Profiles (part of the 3GPP protocols)
  • Richer functionalities: Version 2.0

“SVG is the HTML for Graphics”

• Paths can be closed or open
• Paths can be filled with colour, gradients, patterns, ...
• Attributes can control line style, dash, joining, miter, ...
• Shortcuts for rectangles, arcs, circles, splines, ...
• Images can be included
• Clipping, masking
• Separate text element with tons of attributes
• Everything can be transformed (rotated, skewed, translated, etc)
• All the usual operations of 2D graphics are available

SVG has also some more “unusual” features:

• Filter operations
• Animations
• Scripting

• Graphics on the Web is often used for "artwork"
  • complex logos
  • "sexy" presentations (shadow effects, pseudo 3D)
  • advertisements
• Filters have been added to SVG to produce such artworks

• 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

• Practically all attributes can be changed
• Separate animation elements
  • animate, animateMotion, animateTransform
  • animateColor
  • set (changes discrete values)
• Example:

• 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

• 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 afteranim begins
    • obj.mouseover, obj.mouseout when mouse moves over/out obj
    • ...

Put a light source "above" the image and animate its characteristics...

• DOM = Document Object Model
  • programmatic interface to the runtime XML tree
  • 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

• Complex animation and/or interaction
  • complicated visual effects
  • need for the state of interaction
  • more compact code
  • list handling
• Numerical calculations
• Client/server type applications
• Random features (eg, random choice among alternatives)

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

    ...

    function Start(evt)

        var now=new Date();

        clockObj.adjustTime(now);

    }

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

• 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!

• Adobe's plugin, works with major browsers on Win and Mac;

  Linux and Solaris in beta

• kSVG project for Konqueror on Linux
• Various standalone players, mostly in Java (eg, Batik)
• Ongoing Mozilla project
• Implementations for Palm PC-s, phones, embedded systems
  • they implement the mobile profiles (see later)
• Canon is experimenting with an SVG Printer

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

• Export facilities from Adobe AI, Corel, OpenOffice.org, ...
• "Pure" SVG drawing tool from Jasc, PCX, ...
• Conversion tools
  • Square1's PS to SVG
  • SVG Factory's WMF or BMP to SVG
  • KK Software or Celiena's raster to SVG
  • Software Mechanics' SVGMaker
• 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/!

• Raster to SVG Conversion: myself ;-)

  (using Celinea's conversion)

• Cartography: statistical data of Vienna, map of Spain, Europe
• CML: Chemical Markup Language visualization
• CAD: CAD Standard Pro
• Business Graphics: Causeway
• Chess animation: chess game
• Web Sites: Virtual Mechanics', SVG Spider, or XMML.com
• (Information) Visualization: GVF
• Illustration: Book of Kells

• SVG Basic:
  • All numbers must be limited to a 16bits range
  • No elliptical arcs in paths
  • Subsets of filters (e.g., no lighting)
  • Scripting facility is optional
  • etc
• SVG Tiny:
  • All the SVG Basic profile restrictions
  • No clipping, no opacity, no filters
  • No text on path
  • etc
• Candidate recommendation published since 30th of April 2002

The SVG Recommendation itself:

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

Textbooks

There are about six books published already (!)

Some other sites on SVG:

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

http://pilat.free.fr/filters/ (Michel Hirtzler)

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

....

Proceedings of SVG Open 2002

http://www.svgopen.org/index-2002.shtml

Start by:

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

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

These slides:

http://www.w3.org/2002/Talks/SVG-Tampere-IH/

A more detailed tutorial:

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

Mail me if you want:

ivan@w3.org