Scalable Vector Graphics (SVG)

Creating High-End 2D Graphics Using XML

Gerald Bauer (Chairmain, CEO, CFO and CTO of Me, Myself & I, Inc.)
Java User Group (JUG) Austria Talk, November 2002

Table of Contents

SVG Overview

Who is this guy?

Agenda - The Road Ahead

XML UI Vision

make building cross-platform user interfaces as easy as building web pages

use XML tags and CSS style sheets to create UIs for rich desktop apps

XML UI Architecture - Beyond Hairballs and Spaghetti Code

Break UI into Four Parts

The Death of the General Purpose Language

Beyond Hairballs and Spaghetti Code.

Prefer the single-purpose languages below to general-purpose languages such as Java, C# or Shark.

What is SVG?

What is SVG not?

SVG Tag Sampling

Shape Tags: <line>, <rect>, <circle>, <ellipse>, <polyline>, <polygon>, <path>

Paint Tags: <linearGradient>, <radialGradient>, <pattern>, <mask>

Text Tags: <text>, <tspan>, <textPath>, <font>, <font-face>, <glyph>

Filter Tags: <filter>, <feBlend>, <feFlood>, <feColorMatrix>, <feGaussianBlur> <feMorphology> <feSpotLight>

Animation Tags: <animate>, <animateMotion>, <animateTransform>, <animateColor>, <set>

Misc Tags: <image>, <symbol>, <g>, <defs>, <use>

And Much More

First Impression - SVG In Action - Circle Example

   <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
     <circle cx="6cm" cy="2cm" r="100" style="fill:red;"   transform="translate(0,50)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:blue;"  transform="translate(70,150)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:green;" transform="translate(-70,150)"/> 

Second Impression - SVG In Action - Filter/Special Effect Example


  <filter id="dropShadow"  filterUnits="objectBoundingBox" width="1.4" height="1.4">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" /> 
    <feOffset dx="4" dy="4" />
    <feComponentTransfer result="shadow">
      <feFuncA type="linear" slope=".5" intercept="0" />

  <filter id="emboss" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="-3" style="lighting-color:white"
	   specularConstant="1" specularExponent="16" result="spec" kernelUnitLength="1" >
 	<feDistantLight azimuth="45" elevation="45" />
    <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>

  <rect x="0" y="0" width="100%" height="100%" style="fill:gold" />

  <g style="font-size:90; font-weight:bold;">
   <text x="20" y="100" style="filter:url(#dropShadow)">Luxor Rocks</text>
   <text x="20" y="100" style="fill: black;">Luxor Rocks</text>
   <text x="20" y="100" style="filter:url(#emboss)">Luxor Rocks</text>

   <text x="20" y="200" style="filter:url(#dropShadow)">Luxor Rocks</text>

   <text x="20" y="300" style="filter:url(#emboss)">Luxor Rocks</text>


Third Impression - SVG In Action - Line Art Example

 <g style="fill: #f2cc99" > 
   <polygon points="69,18 82,8 99,3 ..."/> 
 <g style="fill: #e5b27f" > 
   <polygon points="142,79 136,74 138,82 ..."/> 
 <g style="fill: #eb8080" > 
   <polygon points="127,101 132,100 137,99 ..."/> 
 <g style="fill: #f2cc99" > 
   <polygon points="178,229 157,248 139,296 ..."/> 
 <g style="fill: #9c826b" > 
   <polygon points="56,229 48,241 48,250 ..."/> 
   <polygon points="74,363 79,368 81,368 ..."/> 
   <polygon points="212,250 219,251 228,258 ..."/> 
   <polygon points="151,205 151,238 149,252 ..."/> 
   <polygon points="78,127 90,142 95,155 ..."/> 
   <polygon points="21,58 35,63 38,68 ..."/> 
   <polygon points="71,34 67,34 66,27 ..."/> 

Vector Graphics vs. Raster Graphics

Examples for Raster/Pixel/Bitmapped Graphic Formats: GIF, JPEG, PNG, etc.

Examples for Vector/Line Graphic Formats: SVG, SWF (Flash), EPS (Encapsulated Postscript), CGM (Computer Graphics Metafile), Visio, etc.

What can SVG do for you?

Basic Shapes

Shape Description
<line x1="start-x" y1="start-y" x2="end-x" y2="end-y" /> Draws a line from the starting point (start-x/start-y) to the end point (end-x/end-y).
<rect x="left-x" y="top-y" width="width" height="height" /> Draws a rectangle with a upper left corner at (left-x/top-y) and the given width and height
<circle cx="center-x" cy="center-y" r="radius" /> Draws a circle with the given radius centered at (center-x/center-y)
<ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" /> Draws an ellipse with the given x-radius and y-radius centered at (center-x/center-y)
<polygon points="points" /> Draws an arbitrary closed polygon outlined by x/y point pairs in points
<polyline points="points" /> Draws a series of connected lines described by x/y point pairs in points

Line Example


  <line x1="10" y1="10" x2="330" y2="10" 
      style="stroke:black; stroke-width:5;" />

  <line x1="10" y1="50" x2="330" y2="50" 
      style="stroke:blue; stroke-width:10;" />

  <line x1="10" y1="90" x2="330" y2="90" 
      style="stroke:red; stroke-width:10; stroke-dasharray: 10" />

  <line x1="10" y1="130" x2="330" y2="130" 
      style="stroke:green; stroke-width:5; stroke-dasharray: 10,2; fill: none;" />

  <line x1="10" y1="170" x2="330" y2="170" 
      style="stroke:yellow; stroke-width:20; stroke-dasharray: 10,2,10; fill: none;" />


CSS Line Stroke Styles

Style Description
stroke Line color
stroke-width Line width
stroke-opacity Number between 0.0 and 1.0; 0.0 for entirely transparent; 1.0 for entirely opaque (that is, non-transparent)
stroke-dasharray Series of number to define the length of dashes and gaps for lines
stroke-linecap Shape of the ends of a line; use butt, round, or square
stroke-linejoin Shape of the corners of a polygon or polyline; use miter (that is, pointed), round, or bevel (that is, flat)
stroke-miterlimit Don't ask

Simple Shapes Example


 <g style="stroke:black; stroke-width:3;">

   <circle cx="60" cy="60" r="50" 
       style="fill:red" />

   <rect x="10" y="120" width="100" height="100" 
       style="fill:blue" />

   <ellipse cx="180" cy="120" rx="50" ry="100" 
       style="fill:yellow" />


Polygone Example


 <polygon points="97,20 114,74 174,74 127,107 144,161 97,127 50,159 67,107 21,74 78,74" 
     style="fill:red; stroke: black; stroke-width:2" />        

 <polygon points="180,70 230,70 230,40 280,85 230,130 230,100 180,100"
    style="fill:blue; stroke: black; stroke-width:2" />


Path Example, Part 1

 <g style="fill:#c1c1bf;">
   <path d="M 329.336 727.552 
            C 315.224 726.328 304.136 715.816 303.128 694.936 
            C 306.368 639.496 309.608 582.112 271.232 545.104 
	    C 265.256 499.024 244.016 482.104 234.008 452.512 
	    L 218.24 441.208 
	    L 237.104 411.688 
	    L 245.168 411.904 
	    L 323.936 571.168 
	    L 340.424 651.448 
	    L 329.336 727.552 
	    z" />
 <g style="fill:#c1c1bf;">
   <path d="M 136.232 439.696 
            C 133.856 455.248 132.56 470.512 134.792 485.272 
	    C 118.376 507.592 105.92 530.128 104.48 553.312 
	    C 92.024 586.504 62.432 614.584 67.544 680.104 
	    C 84.176 697.456 107.432 713.584 127.376 730.36 
	    C 152.432 751.312 137.528 778.96 102.248 772.408 
	    C 94.4 763.768 76.616 709.624 42.92 676.288 
	    L 49.544 632.584 
	    L 81.368 547.408 
	    L 120.968 484.048 
	    L 125.36 456.688 
	    L 119.816 386.776 
	    L 124.424 361.216 
	    L 136.232 439.696 
	    L 136.232 439.696 
	    z" />

Single-Letter Path Commands

Command Description
M | m Move To
L | l Draw a line
H | h Draw a horizontal line
V | v Draw a vertical line
A | a Draw an elliptical arc
Q | q Draw a quadratic Bezier curve
T | t Draw a smooth quadratic Bezier curve; use control point from previous Bezier curve
C | c Draw a cubic Bezier curve
S | s Draw a smooth cubic Bezier curve; use control point from previous Bezier curve
Z | z Close path, that is, draw line from last point to first point

Path Example, Part 2, Inside Tux


 <path style="fill:#b77200;"
    d="M 382.328 691.984 
       C 403.64 698.968 389.888 720.28 400.76 732.52 
       C 405.44 742.888 415.304 752.032 431.792 760.528 
       C 459.368 774.424 426.248 799.336 392.768 812.08 
       C 351.944 825.616 344.024 862.912 299.312 851.896 
       C 283.112 846.496 278.36 831.808 278.864 809.128 
       C 284.264 762.76 277.784 730.432 278.792 698.824 
       C 278.72 686.152 283.544 684.64 307.232 687.952 
       C 310.04 726.328 352.376 727.336 382.328 691.984 
 <path style="fill:#f2b700;"
    d="M 339.632 826.624 
       C 371.6 814.312 403.856 798.112 429.848 782.128 
       C 437.84 777.448 438.92 765.928 427.688 762.328 
       C 403.352 748.504 390.104 731.224 392.912 708.76 
       C 393.344 700.912 383.696 692.56 381.104 700.048 
       C 359.864 771.472 291.32 767.656 300.752 696.952 
       C 301.256 694.864 301.76 692.776 302.264 690.76 
       C 289.952 688.24 285.2 690.976 285.776 700.408 
       L 295.28 806.608 
       C 297.656 830.8 317.312 836.128 339.632 826.624 

Pattern Example - Fill Me Up


 <pattern id="pattern1" x="0" y="0" width="15" height="15" 
   <circle cx="6" cy="6" r="5" 
          style="fill: red; stroke:black;" />

 <pattern id="pattern2" x="0" y="0" width="20" height="20"
   <rect x="0" y="0" height="10" width="10" 
          style="fill: blue; stroke:black;" />

 <rect x="10" y="10" width="160" height="160" 
    style="fill:url(#pattern1); stroke:black; stroke-width:2;" />

 <circle cx="260" cy="90" r="80" 
    style="fill:url(#pattern2); stroke:black; stroke-width:2;" />


Gradient Example - Linear and Radial


  <linearGradient id="gradient1">
    <stop offset="0%"   style="stop-color: yellow" />
    <stop offset="100%" style="stop-color: blue" />

  <radialGradient id="gradient2">
    <stop offset="0%"   style="stop-color: yellow" />
    <stop offset="100%" style="stop-color: blue" />

  <rect x="10" y="10" width="160" height="160"
      style="fill:url(#gradient1)" />

  <circle cx="270" cy="90" r="80"
        style="fill:url(#gradient2)" />

More Gradient Psychodelia Examples


  <linearGradient id="gradient1" x1="0" y1="0" x2="0.8" y2="0.8">
     <stop offset="0%"   style="stop-color: yellow" />
     <stop offset="100%" style="stop-color: blue" />

  <linearGradient id="gradient2" x1="0.4" y1="0.4" x2="0.5" y2="0.5"
     <stop offset="0%"   style="stop-color: yellow" />
     <stop offset="50%"  style="stop-color: blue" />
     <stop offset="100%" style="stop-color: yellow" />

  <radialGradient id="gradient3" fx="0.7" fy="0.7" cx="0.5" cy="0.5" r="0.4">
     <stop offset="0%"   style="stop-color: yellow" />
     <stop offset="100%" style="stop-color: blue" />

  <radialGradient id="gradient4" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2"
     <stop offset="0%"   style="stop-color: yellow" />
     <stop offset="50%"  style="stop-color: blue" />
     <stop offset="100%" style="stop-color: yellow" />

  <rect x="10" y="10" width="180" height="120"
       style="fill:url(#gradient1)" />

  <rect x="210" y="10" width="180" height="120"
       style="fill:url(#gradient2)" />

  <rect x="10" y="150" width="180" height="120"
       style="fill:url(#gradient3)" />

  <rect x="210" y="150" width="180" height="120"
       style="fill:url(#gradient4)" />


Text Example


  <text x="60" y="60" style="font-size: 55;">Luxor Rocks</text>

  <text x="60" y="140" 
    style="stroke: black; fill: none; font-size: 55; font-family: 'Times New Roman'">
    Luxor Rocks

  <text x="60" y="220" 
    style="stroke: black; fill: gold; font-size: 55; font-family: 'Courier New' ">
    Luxor Rocks

  <text x="60" y="300" 
    style="font-size: 55; font-style: italic; font-family: 'Courier New'; 
           text-decoration: underline; ">
    Luxor Rocks

  <text x="30" y="10" style="font-size: 55; writing-mode:tb">Luxor Rocks</text>

FilterExample - Special Effects


  <filter id="filtereffect1" height="150%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="image1" />

  <filter id="filtereffect2" height="150%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="image1" />
    <feOffset in="image1" result="image2" dx="5" dy="5" />
    <feComposite in="SourceGraphic" in2="image2" operator="over" />

  <filter id="emboss" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="-3" style="lighting-color:white"
	  specularConstant="1" specularExponent="16" result="spec" kernelUnitLength="1" >
      <feDistantLight azimuth="45" elevation="45" />
    <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>

  <g style="font-size:100; font-weight:bold">

   <text x="20" y="120" style="filter:url(#filtereffect1)">
     Luxor Rocks
   <text x="20" y="220" style="fill: orange; filter:url(#filtereffect2)">
     Luxor Rocks
   <text x="20" y="320" style="fill: orange; filter:url(#filtereffect2)">
     Luxor Rocks
   <text x="20" y="320" style="fill: orange; filter:url(#emboss)">
     Luxor Rocks


Filter/Special Effects Line-Up

Effect Description
Blend And Merge Effects
feBlend merges content with content below
feComposite blends content with another content
feMerge duplicates content using different effects
Color Effects
feColorMatrix changes content's colors and alpha channels using matrix mathematics (similar to Photoshop's Hue/Saturation/Balance tool)
feComponentTransfer changes content's colors and alpha channels using matrix mathematics (similar to Photoshop's Contrast/Brightness tool)
feFlood fills content with color
More Effects
feConvolveMatrix changes content's edges using matrix mathematics for creating bevels, embossing, blurring and so on
feDisplacementMap moves content using matrix mathematics for RGB color values
feTurbulence fills content with randomized patterns of dots or color (similar to Photoshop noise filters)
feGaussianBlur blurs content
feOffset shifts content's position
feImage adds external raster or vector image
feMorphology changes content by adding or subracting weight from the edges (thus, fattening or slimming the content's shape)
feTile fills content with tiled objects, similar to pattern fill
Lighting Effects
feDiffuseLighting lits content using alpha channel values
feSpectularLighting lits content from above (that is, uses light source from above)
Light Sources
fePointLight uses light source defined by a source point
feDistantLight uses light source defined by angles
feSpotLight uses light source defined by a source point and a target point

And Much More

Why SVG? Top 10 Reasons

Easy Editing - plain vanilla-text using easy-to-read XML and CSS format

Searchable Content - deep search or google through your graphic's contents

Localization - easily translate your graphic's text to different languages

Stylesheets - use a single CSS style sheet for an entire suite of graphics

Open Standard - no royality; no-vendor lock-in; choice of SVG plug-in; choice of SVG designer

Bitmap Effects On Vector Graphics - apply real-time Photoshop-like effects (e.g. drop shadow, spotlight, embossing, blurs, etc.) to your artwork

Data Handling - create graphics on-the-fly using scripts

Rich Typography - embed entire typefaces or just selected character outlines

Pixel-Precise Layout - true "What You See Is What You Get" through embed typefaces or pixel precise layout

Error Handling - uses "zero-tolerance" XML; can pinpoint line and column number for SVG errors

SVG Plug-Ins/Motors: The Big Three

Adobe SVG Viewer
most popular SVG browser plug-in; available for Windows (98, 2000, Me, XP), Mac OS 8.5 to X, Linux, Solaris runs in Internet Exploder, Netscape, Mozilla, Opera, and many other browsers

Corel SVG Viewer
upcoming SVG browser plug-in; currenlty Beta

Apache Batik
open-source SVG toolkit in 100 % Java; includes SVG browser (Squiggle), SVG motor, font converter (True Type fonts to SVG), rasterizer (SVG to JPEG/PNG) and much more; headed by Vincent Hardy (Sun)

More SVG Motors: The Minor League

Mozilla SVG
official Mozilla SVG project site; for built-in (aka native) SVG support in Mozilla

ready-to-run Mozilla builds/executables with built-in SVG support

W3C Amaya
W3C's experimental proof-of-concept, open-source browser with built-in SVG viewer and editor (available for Unix, Windows, and Mac OS X)

experimental, open-source XML browser in Java includes support for SVG, XForms, XSL-FO, XHTML and more; developed by Helsinki University of Technology.

CSIRO SVG Toolkit (Australia's Commonwealth Scientific Industrial Research Organization)
open-source SVG toolkit in Java; Apache-style License; no longer developed (apart from minor bug fixes); use Apache Batik instead; last minor update on March 2002

IBM alphaWorks SVGView
SVG viewer prototype using Java2D; no longer developed; use Apache Batik instead; last update on April 2000

SVG on mobile devices (e.g. Palm, PocketPC, cell phones, RIM Blackberry)

BitFlash Mobile SVG Player
Mobile SVG player for PocketPC (Windows CE) or Symbian

CSIRO Pocket SVG Viewer
Low memory footprint (390k) C++ Active-X control for Pocket PC (Windows CE)

TinyLine SVG Toolkit
SVG Tiny toolkit for Personal Java ME, IPAQ, and Zaurus

SVG Design Studios - Create SVG Artwork

Adobe Illustrator
vector graphics design studio for MacOS (9.1/9.2/10.1) and Windows (98/Me/2000/XP); SVG import and export; includes data-driven SVG graphics support

Corel Draw!
vector graphics design studio for Windows (95/98/Me/2000/XP/Tablet); SVG import and export

Jasc WebDraw
a native 100% SVG design studio allowing both import and export of SVG; lets you view and change the SVG source at any time; includes WYSIWYG visual editing of filter effects, and timeline editing of animations, and much more; runs on Windows (98/NT/2000/Me/XP)

Mayura Draw
Shareware (US$25); vector graphics design studio with SVG export; runs on Windows (95/98/Me/NT/2000/XP)

open-source 100 % SVG design studio for Linux; developed in C using Gtk+; GNU General Public License (GPL)

For more tools for authoring/exporting SVG check out the W3C SVG tools catalog

SVG Case Studies

SVG App: Chart Example

SVG Bits And Pieces

SVGZ - use GZIP compression for reduced-size SVG documents

Mime Type - image/svg+xml

Batik SVG Toolkit Overview

100 % Java; Open-Source; Apache Licensed; Headed By Vincent Hardy (Sun)

Standalone Tools and Apps

Building Blocks

Batik Standalone Tools And Apps

SVG Browser (Squiggle)

SVG Rasterizer (SVG to JPEG/PNG/TIFF) - converts vector graphics to raster/pixel graphics

SVG Font Converter (True Type Fonts to SVG) - converts True Type Fonts to SVG for embedding in SVG documents; Example:

java -jar batik-ttf2svg.jar matisse.ttf -l 48 -h 57 
    -id matisse -o matisse.svg -testcard

converts characters 48 to 57, that is, '0' to '9', from matisse.ttf in True Type format to matisse.svg in SVG format plus adds a test card so that you can check the font in a SVG browser

<font id="matisse" horiz-adv-x="836" >
    font-family="Matisse ITC"
    panose-1="4 4 4 3 3 13 2 2 7 4"
    alphabetic="0" />
  <missing-glyph horiz-adv-x="1229" d="M102 -362 V1444 H1126 V-362 ..." />
  <glyph unicode="0" glyph-name="zero" horiz-adv-x="950" 
      d="M506 -96 Q645 30 728 245 T811 694 ..." />
  <glyph unicode="1" glyph-name="one" horiz-adv-x="641" 
      d="M311 1622 Q411 1482 459 1289 T508 836 ..." />
  <glyph unicode="2" glyph-name="two" horiz-adv-x="862" 
      d="M147 1661 Q469 1630 622 1494 T776 1102 ..." />

Batik Building Blocks - SVGGraphics2D

SVGGraphics2D (SVG Generator) - lets you use the Java2D API to generate SVG XML markup; Example:

SVGGraphics2D g = new SVGGraphics2D(doc);

Shape circle = new Ellipse2D.Double(0,0,50,50);
g.setSVGCanvasSize(new Dimension(180,50));

JSVGCanvas - Spice Up Your Swing UI with SVG

JSVGCanvas - Swing component to display SVG documents; includes rotating, zooming, panning, selecting text, or activating hyperlinks. Example:

JSVGCanvas canvas = new JSVGCanvas();
canvas.setURI( uri );

Hello SVG Example:

import javax.swing.*;

import org.apache.batik.swing.JSVGCanvas;

public class HelloSVG 
  public static void main(String argv[]) throws IOException
    JFrame f = new JFrame( "Hello SVG" );

    JSVGCanvas canvas = new JSVGCanvas();
    canvas.setURI( new File( argv[0] ).toURL().toString() );

    f.getContentPane().add( canvas );

    f.setSize( 600, 300 );
    f.setVisible( true );

More Building Blocks: SVG DOM and Transcoder API

SVG DOM API - W3C compliant DOM API for SVG documents; let's you create SVG documents in memory, for example, that you can pass on to the JSVGCanvas for display or to the transcoder API for creating raster/bitmap graphics

Transcoder API - Lets you convert (=transcode) SVG documents (vector graphics) to pixel graphics such as JPEG, PNG or TIFF on the fly; useful in servlets, for example. Code Snippet Example:

public static void main(String [] args) throws Exception 
  // create a JPEG transcoder
  JPEGTranscoder t = new JPEGTranscoder();

  // set the transcoding hints
  t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(.8));

  // create the transcoder input
  String svgURI = new File( args[0] ).toURL().toString();
  TranscoderInput input = new TranscoderInput(svgURI);

  // create the transcoder output
  OutputStream ostream = new FileOutputStream("out.jpg");
  TranscoderOutput output = new TranscoderOutput(ostream);

  // save the image
  t.transcode(input, output);

  // flush and close the stream then exit

SVG vs. Flash vs. GIF vs. PNG vs. PDF

Feature SVG Flash GIF PNG PDF
Vector artwork Yes Yes - - Yes
Alpha Channel Transparency Yes Yes - Yes Yes
Pixel-Precise Layout Yes Yes Yes Yes Yes
Typeface Selection Yes Yes - - Yes
Typeface Embedding Yes Yes - - Yes
Gradients Yes Yes Yes Yes Yes
Masking Yes Yes - - Yes
Shared Resources (fonts, symbols, text) across multiple files Yes - - -
Open Standard Yes - - Yes -
Live Filter Effects Yes - - - -
Pinpoint Invalid Code Yes - - - -
Extensible Yes - - - -
Animation Yes Yes Yes - -
Interaction Yes Yes - - Yes
Filesize compression Yes Yes Yes Yes Yes
Editable executable Yes - Yes Yes Yes

SVG vs. Flash - What's wrong with Flash?

Summary: + Flash: well suited for animation; large plug-in install base on Windows (> 90%); ActiceX browser-plug-in is a small download (< 400 k); popular animation authoring tool for designers

O'Reilly Network Article Series

Why SVG? Isn't Flash, .Net GDI+ or Java2D enough?

Web Architecture - The Big Picture

XML Syntax - mixes easily with established and emerging XML standards such as: XHTML, XUL, MathML, XForms; XML is the lingua franca because it's simple, extensible, royality-free; operating system or programming language independent and much more

Web Services - mixes easily with Web Services; send SVG diagrams or animations via SOAP messages or create rich graphical user interfaces for Web Services

Styling with CSS - use a single style language for XHTML, XUL and SVG

Animation with SMIL - use SVG docs in multimedia SMIL presentations to mix vector graphics with audio and video

DOM and Scripting - use Javascript to access the SVG document tree at-run-time

Modul-Mania - use SVG Tiny or SVG Basic on mobile-devices (cell phones, palms, etc.)

W3C SVG Specs and Requirements; The Road Ahead

SVG 1.0
W3C Recommendation (=Official Web Standard); 4 September 2001; 600+ pages

SVG 1.1
W3C Proposed Recommendation (=Upcoming Web Standard); 15 November 2002; modular SVG plus errata (=bug fixes)

SVG Mobile Profiles: SVG Basic and SVG Tiny
W3C Proposed Recommendation (=Upcoming Web Standard); 15 November 2002; SVG Tiny is a stripped down version of SVG for cell phones; SVG Basic is slightly larger version of SVG for PDAs (=Palms, Pocket PCs, etc.)

SVG 1.2
W3C Working Draft; 15 November 2002; possible new features include

SVG 1.1/1.2/2.0 Requirements
Want more? Roadmap outlines upcoming features; too many to list; 22 April 2002

Upcoming SVG Printing Profile; SVG 2.0

SVG Library: Books for Christmas

SVG Programming: The Graphical Web by Kurt Cagle, 624 pages, APress; ISBN: 1590590198; (July 2002)
SVG Essentials by J. David Eisenberg, 364 pages, O'Reilly; ISBN: 0596002238; (February 2002)
Teach Yourself SVG in 24 Hours by Micah Laaker, 456 pages; Sams; ISBN: 0672322900; (February 2002)
SVG Unleashed by Chris Lilley, Daniel J. Ayers, Randy George, ch Wenz, Andrew H. Watt; 1152 pages; Sams; ISBN: 0672324296; September 2002

More SVG Links

W3C SVG Portal
News, Specs, Links and More

Adobe SVG Zone
Download SVG Browser Plug-In, SVG Examples and more

SVG Developer Mailinglist/Discussion Forum
high traffic; +3000 members; +1000 messages/month

That's it - The Future Just Happened

Visit for more info