Scalable Vector Graphics (SVG): Creating High-End 2D Graphics Using XML

Who is this guy?

Gerald Bauer
independent Java, XML and Web consultant and open-source advocate
open-sourced Rachel (Resource Loading Toolkit for Web Start/JNLP) and Luxor (Java XML User Interface Toolkit)
develops Venus Application Publisher (Vamp) for Java Web Start/JNLP tool suite
maintains Unofficial Java Web Start/JNLP FAQ
publishes "The Saturn Times" (Web Start News) and "The Richmond Post" (XML UI News)

Agenda - The Road Ahead

Building Rich Desktop Apps Using XML (XHTML, XUL, SVG + CSS)
SVG Tag Samples
SVG Plug-Ins/Motors
Java and SVG: Apache Batik
Why SVG? SVG Alternatives/Competitors
The Future is SVG
SVG Books and Links

XML UI Vision

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

no hard-coded, os-specific, toolkit-specific user interfaces (e.g. MFC, WindopeForms, Swing, Gtk+, etc.) or 2D APIs (e.g. Java 2D, .Nyet GDI+, Gtk+ GDK, Mac OS X Quartz, etc.)
the answer is not yet another UI API

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

Content: structure and description of UI (use XHTML, XUL, SVG)
Appearance: look & feel, skins, themes specify appearance of UI (use CSS)
Behavior: use Java (hard-core programming) or Python (scripting)
Locale: localization information for internationalization (use string tables)

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.

XHTML / Styled (Rich) Text
XUL (XML User Interface Language) / UIs such as menus, toolbars, forms, datagrids, trees, and so on
SVG (Scalable Vector Graphics) / 2D graphics such as charts, maps, logos, and so on
CSS (Cascading Stylesheets) / Visual Styling for XHTML, XUL and SVG
Python / Scripting
XPath / XML Tree Node Addressing
SQL / Data Queries, Updates, Inserts, Deletes, etc.
String Tables / Internationalization
Velocity, XSL-T / Template

What is SVG?

|S|calable|V|ector |G|grahpics
high-end 2D graphics using XML tags
XML = plain-vanilla text
CSS for styling
W3C recommendation (=Web standard); 600+ pages spec
first draft published in February 1999; V1.0 published in September 2001 (two and half year later)

What is SVG not?

SVG is not a 3D graphic language like VRML
SVG is not appropriate for creating photos (although you can embed photos in SVG files)

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

<svg>
   <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)"/> 
   </g>
</svg>

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

<svg>

  <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" />
    </feComponentTransfer>
  </filter>

  <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" />
    </feSpecularLighting>
    <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>
  </filter>

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

  </g>
</svg>

Third Impression - SVG In Action - Line Art Example

<svg>
 <g style="fill: #f2cc99" > 
   <polygon points="69,18 82,8 99,3 ..."/> 
 </g> 
 <g style="fill: #e5b27f" > 
   <polygon points="142,79 136,74 138,82 ..."/> 
 </g> 
 <g style="fill: #eb8080" > 
   <polygon points="127,101 132,100 137,99 ..."/> 
 </g> 
 <g style="fill: #f2cc99" > 
   <polygon points="178,229 157,248 139,296 ..."/> 
 </g> 
 <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 ..."/> 
   ...
</svg>

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.

Vector graphics are resolution independent (=scalable; that is, zoom in or zoom out without lose of quality; resolution examples: color screen 72 dpi (dot per inch); black-and-white printer 1200 dpi)
Vector graphics require less disk space compared to high-quality raster (pixel) images (e.g. True Type Fonts vs. Bitmapped Low-Resolution Fonts)

What can SVG do for you?

alpha channel transparency
smooth gradients
anti-aliased selectable text
Photoshop-like special effects (using filters)
pixel-precise layout
animation and scripting

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

<svg>

  <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;" />

</svg>

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

<svg>

 <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" />

 </g>
</svg>

Polygone Example

<svg>

 <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" />

</svg>

Path Example, Part 1

<svg>
 <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>        
 <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" />
 </g>
 ...
</svg>

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

<svg>

 <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 
       z"/>
         
 <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 
       z"/>  
</svg>

Pattern Example - Fill Me Up

<svg>

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

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

 <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;" />

</svg>

Gradient Example - Linear and Radial

<svg>

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

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

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

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

More Gradient Psychodelia Examples

<svg>

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

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

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

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

  <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)" />

</svg>

Text Example

<svg>

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

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

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

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

FilterExample - Special Effects

<svg>

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

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

  <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" />
    </feSpecularLighting>
    <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>
  </filter>

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

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

  </g>
</svg>

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

Clipping And Masking
Transparency And Opacity
Animation And Scripting
Transformations (Translate,Scale,Rotate,SkewX,SkewY)
Coordinate Systems and Viewports
Images, Symbols and Font Glyphs
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
http://www.adobe.com/svg/
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
http://www.corel.com/svgviewer/
upcoming SVG browser plug-in; currenlty Beta

Apache Batik
http://xml.apache.org/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
http://www.mozilla.org/projects/svg/
official Mozilla SVG project site; for built-in (aka native) SVG support in Mozilla

Croczilla
http://www.croczilla.com/svg
ready-to-run Mozilla builds/executables with built-in SVG support

W3C Amaya
http://www.w3.org/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)

X-Smiles
http://www.x-smiles.org
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)
http://sis.cmis.csiro.au/svg/
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
http://www.alphaworks.ibm.com/tech/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
http://www.bitflash.com/products/vis.asp
Mobile SVG player for PocketPC (Windows CE) or Symbian

CSIRO Pocket SVG Viewer
http://www.pocketsvg.com
Low memory footprint (390k) C++ Active-X control for Pocket PC (Windows CE)

TinyLine SVG Toolkit
http://www.tinyline.com
SVG Tiny toolkit for Personal Java ME, IPAQ, and Zaurus

SVG Design Studios - Create SVG Artwork

Adobe Illustrator
http://www.adobe.com/products/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
http://www.jasc.com/products/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
http://www.mayura.com
Shareware (US$25); vector graphics design studio with SVG export; runs on Windows (95/98/Me/NT/2000/XP)

Sodipodi
http://sodipodi.sourceforge.net
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

simple, scalable illustrations
complex, feature-rich topography maps
financial data charts
flow charts
blueprints and technical diagrams (CAD)
animation
file data interchange

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

Squiggle (SVG Browser)
SVG Rasterizer (SVG to JPEG/PNG/TIFF)
SVG Font Converter (True Type Fonts to SVG)
SVG Slideshow
SVG Pretty Printer

Building Blocks

SVGGraphics2D (SVG Generator Using Java 2D API)
JSVGCanvas (Swing Java Bean to Display SVG Docs)
SVG DOM API
Transcoder API (SVG to JPEG/PNG/TIFF)

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-face
    font-family="Matisse ITC"
    units-per-em="2048"
    panose-1="4 4 4 3 3 13 2 2 7 4"
    ascent="2062"
    descent="-473"
    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.setPaint(Color.red);
g.fill(circle);
g.translate(60,0);
g.setPaint(Color.green);
g.fill(circle);
g.translate(60,0);
g.setPaint(Color.blue);
g.fill(circle);
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 java.io.*;
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
  ostream.flush();
  ostream.close();
}

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?

both require browser plug-in; SVG will get built-in browser support (e.g. Mozilla)
open, royality-free, multi-vendor vs. closed, single-vendor
Free World Wide Web Standard vs. Macromedia Inc.
easy-readable plain-text vs. binary format
$50.000 Flash Generator license for creating large-scale dynamic graphics vs. inexpensive packages such as PHP, XSLT, JSP and others
both allow embedding of typefaces (fonts); SVG allows multiple SVG documents to reference same SVG font file; SVG applies typographic handling to original text to ensure your text is searchable and selectable
SVG supports Photoshop-like filter effects on vector graphics; Flash doesn't support filter effects
SVG is a truly open and extensible format; anyone is welcome to add functionality; Flash is controlled by Macromedia; you can't extend the format without violating their patents/copyright

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

Pro SVG: SVG On the Rise by Dean Jackson (W3C SVG Working Group Member)
Pro Flash: SWF Is Not Flash by Jacek Artymiak (Author of FreeMovie)

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
http://www.w3.org/TR/SVG/
W3C Recommendation (=Official Web Standard); 4 September 2001; 600+ pages

SVG 1.1
http://www.w3.org/TR/SVG11/
W3C Proposed Recommendation (=Upcoming Web Standard); 15 November 2002; modular SVG plus errata (=bug fixes)

SVG Mobile Profiles: SVG Basic and SVG Tiny
http://www.w3.org/TR/SVGMobile/
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
http://www.w3.org/TR/SVG12/
W3C Working Draft; 15 November 2002; possible new features include

A flowText tag for wrapping text inside shapes
XForms support
XML Events support
More SMIL features possibly including audio, video, transitions and enhanced timing controls.
Rendering Arbitrary XML inside SVG documents using style sheets
A printing profile
Enhanced Alpha Compositing
Z-indexes not based on document order
Streaming enhancements
The solidColor tag is a paint server that provides a single color with opacity and can be referenced like gradients and patterns.
Background fills
Keyboard navigation between picture elements
DOM Access to Images
Conversion of Mouse Coordinates to the corresponding user space coordinates
DOM Level 3 Events
A standard SVGWindow interface

SVG 1.1/1.2/2.0 Requirements
http://www.w3.org/TR/SVG2Reqs/
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

That's it - The Future Just Happened

Visit http://luxor-xul.sourceforge.net for more info

Scalable Vector Graphics (SVG)

Creating High-End 2D Graphics Using XML

Table of Contents

SVG Overview