	Examining SVG		Table of contents		Indexes		Strategies for effective use of intelligent graphics in Web applications

Getting inside SVG

what content creators should know

Ferraiolo, Jon

Jon Ferraiolo

Senior Computer Scientist

Adobe Systems, Inc., San Jose California 95110 USA
Phone: 408-536-4782 Fax: 408-537-1006 email: jferraio@adobe.com web site: www.adobe.com/svg

Biography

Jon Ferraiolo — Jon Ferraiolo is a member of Adobe's Advanced Technology Group where he focuses on issues related to the Web and XML. He is Adobe's representative to the W3C's working group on Scalable Vector Graphics (SVG) and is editor of the SVG specification. Jon has been an engineering manager and product manager at various software companies. He has an M.B.A. from Santa Clara University and a B.S. in Mathematical Sciences from Stanford University.

Abstract

SVG

SVG is the emerging W3C language for rich 2D graphics expressed in XML for use in Web browsers. W3C members defining SVG include Adobe, Apple, Autodesk, BitFlash, Corel, Hewlett-Packard, IBM, ILOG, INSO, Kodak, Macromedia, Microsoft, Netscape, Oasis, OpenText, Opera, Quark, Sun Microsystems, Visio and Xerox. This session presents an in-depth description of SVG’s graphics features, its use in creating interactive and dynamic Web pages, and its integration and compatibility with other Web technologies, such as XML, CSS, DOM and SMIL.

Agenda

SVG Basics

SVG Features

Demos

SVG basics

Background

SVG = Scalable Vector Graphics

Defined by the W3C

Organizations on SVG Working Group

Adobe

Apple

Autodesk

BitFlash

Corel

IBM

ILOG

INSO

Kodak

Macromedia

Microsoft

Netscape

Oasis

OpenText

Opera

Quark

RAL

Sun

Visio

Xerox

SVG deliverables

SVG Language Specification

SVG Conformance Test Suite

SVG schedule

First meeting: Sept/98

SVG Requirements: Oct/98

First public draft: Feb/99

Last call drafts: Aug/99, Mar/99

Test suite - first public release: May/00

Proposed Recommendation: soon

Implementations: SVG viewers

Adobe SVG Viewer

Browser plugin for NN and IE

Windows and Mac

CSIRO SVG viewer (Open source)

IBM SVG viewer

Bull/INRIA

GNOME open source SVG viewer (Open source)

Netscape/Mozilla SVG project (Open source)

Implementations: SVG editors

Adobe Illustrator

Adobe LiveMotion

Animations and interactivity

CorelDraw!

Quark Express

Gill (Gnome Illustratration app)

Jasc software

ILOG JViews

Beatwave e-Picture 2.0

Bernard Herzog Sketch

Mayura Draw

Implementations: SVG conversion tools

Blackdirt WMF2SVG

University of Nottingham

PostScript to SVG

Flash to SVG

FOP: XSL FOs to PDF (and some SVG)

University of Tsukuba: fdsSVG

Implementations: SVG server-side generators

IBM AFP to SVG transcoder

IBM: CGM to SVG transcoder

XYZ Sistemas Industriales, S.A. Internet Mapper

Galdos Systems: Map data to XSL to SVG

SVG features

Feature overview

Rich vector graphics

Expressed in XML

Stand-alone documents or embedded graphics

Interactive and dynamic

Compatible with and leverages other W3C efforts

Rich graphics

Comparable to PostScript, PDF, GDI, QuickDraw/CoreGraphics, Java2D

Simple shapes (e.g., rect, circle)

Paths (cubic beziers)

Precise typography (single line)

Vectors, text and images

Text-on-a-path

Gradients and patterns

Transparency (group-level also)

Clipping paths

Masks

sRGB color, plus optional ICC profiles

Filter effects

And it prints!

Full printer resolution

Calibrated color

Expressed in XML

Compatible with XML 1.0

XML namespaces, Xlink, XPointer

Compatible with XML DOM (DOM2)

Compatible with XSLT

Stand-alone documents or embedded graphics

SVG graphics referenced from HTML

Use <embed> or <object> tag

Vector graphics alternative to GIF/JPEG/PNG

SVG fragments embedded inside other XML document

XHTML+SVG

Single style sheet applies to both

Single DOM accesses both

Entire web pages in SVG

Interactive and dynamic

Hyperlinks on anything

HTML-like events (e.g., onclick)

Animation via scripting - any element, attribute or property can be changed via scripting

Declarative animation - any element, attribute or property can be animated

Compatibility

XML 1.0

DOM2

XML Namespaces, XPointer, XLink

CSS2 and XSL

SMIL Animation

W3C Internationalization

Web Accessibility Initiative (WAI)

W3C Metadata Initiatives (RDF)

Leverages tools & knowledge

Client-side scripting

Server-side graphics generation

Text search in browser

Web search engines

Link management

Style text and graphics together

Server-side generation

It's just text

No need for proprietary server-side software

Compatible with XSLT

CGI, Perl, Servlets

Internationalization

Unicode

L-to-R

R-to-L

Bi-directional

Vertical

system-language attribute

Accessibility

It's scalable

It's stylable

Aural style sheets

All text expressed as character data

<desc> and <title> on every element

<title> as tooltip

WAI authoring guidelines

Accessibility conformance requiirements

Potential purchasing criteria

Demos

References

SVG Home Page at W3C: http://www.w3.org/Graphics/SVG

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

SVG email list at W3C: www-svg@w3.org

SVG Home Page at Adobe: http://www.adobe.com/SVG

Jon Ferraiolo email: jferraio@adobe.com


	Examining SVG		Table of contents		Indexes		Strategies for effective use of intelligent graphics in Web applications