An In-depth Look at SVG

1. Agenda

• SVG Overview

• SVG Implementations

• Why SVG Is Important

• Demos

2. SVG Overview

2.1. Basics

• SVG = Scalable Vector Graphics

• Defined by the W3C

• Organizations on SVG Working Group

  • Adobe

  • Apple

  • Autodesk

  • BitFlash

  • Canon

  • Corel

  • HP

  • IBM

  • ILOG

  • INSO

  • Kodak

  • Lexica

  • Macromedia

  • Microsoft

  • Netscape

  • Oasis

  • Opera

  • Quark

  • RAL/CCLRC

  • Sun

  • Xerox

2.2. SVG 1.0 Deliverables

• SVG 1.0 Language Specification

• SVG 1.0 Conformance Test Suite

2.3. SVG 1.0 Completion

• Candidate Recommendation: Aug/00

• Exit criteria: based on Conformance Test Suite

• Next: Proposed Recommendation

• SVG specification work completed

• SVG basic effectivity test suite completed

• Implementation requirements completed

• Waiting on other W3C working groups

2.4. Future work on SVG

• Rechartered SVG working group

• SVG modularization

• Mobile device profile for SVG

• Like XHTML Basic, perhaps an SVG Basic

• SVG 1.1? SVG 2.0?

• Consider feedback on SVG 1.0 from content developers and implementers

2.5. Rich graphics

• Comparable features to PostScript

• And PDF, MacOS-X/CoreGraphics, Java2D, ...

• Vectors, text, images

• Gradients

• Arbitrary 2D transformations (rotate, skew, etc.)

• Clipping paths and masks

• Precise typography

• Reliable color (ICC profile support)

• Prints at printer resolution

2.6. Rich graphics (continued)

• Additional features for web graphics

• Transparency

• sRGB (along with ICC-based) reliable color

• Filter effects

• Text-on-a-path

• Markers

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

2.8. Embedded images or stand-alone documents

• SVG inside something else

• Replacement for GIF/JPEG/PNG

• Can be referenced

• Use <embed>, <object> or <img> tag

• Can be inline (e.g., XHTML+SVG)

• Style sheets, single DOM apply to both

• Today: Mozilla+SVG, IE 5.5+ Adobe SVG Viewer

• Entire web page in SVG

2.9. Expressed in XML

• Compatible with XML 1.0

• XML namespaces, Xlink, Xpointer

• Compatible with XML DOM (DOM2)

• Compatible with XSL Transformations (XLST)

2.10. Compatibility

• XML 1.0, namespaces, XPtr, XLink

• DOM2

• CSS2 and XSL

• SMIL Animation and timing

• W3C Internationalization

• W3C Metadata Initiatives (RDF)

2.11. Internationalization

• Unicode

• L-to-R

• R-to-L

• Bi-directional

• Vertical

• 'systemLanguage' attribute

2.12. Accessibility

• It's scalable

• It's stylable

• Aural style sheets

• All text expressed as character data

• <desc> and <title> on every element

• WAI authoring guidelines

• WAI user agent guidelines

2.13. HTML & SVG in same file: Is this possible today?

• Yes, inline, via IE 5.5 behaviors

• http://www.egroups.com/files/, svg-developers/svg_ie55.zip

• Allows SVG to be embedded within HTML

• Yes, inline, in Mozilla and Amaya

• Only a restricted subset of SVG is available

2.14. SVG and multimedia

• Future: SMIL2+SVG

• SVG and SMIL use same syntax for timing

• SVG and SMIL use same set of animation elements

• Today: Adobe SVG Viewer already supports some of SMIL2

• SMIL Animation (as described in SVG spec)

• Sound

• <audio> element in separate namespace

• MP3 and WAV

• <audio> element based on element from SMIL

3. SVG Implementations

3.1. To get latest implementation status..

• http://www.w3.org/Graphics/SVG, and click on "Implementations"

• Lots of SVG implementation activitiy

• New announcements come regularly

3.2. Partial list of SVG viewers (OS=Open source)

• Adobe SVG Viewer

• Browser plugin for NN and IE (Windows and Mac)

• Batik: www.apache.org (OS)

• CSIRO SVG viewer (OS)

• CSIRO WinCE SVG Viewer (OS)

• GNOME SVG viewer (OS)

• IBM SVG viewer (OS)

• INRIA/Bull (Jackaroo) SVG viewer (OS)

• Netscape/Mozilla SVG project (OS)

3.3. Partial list of SVG editors

• Adobe Illustrator 9

• Adobe LiveMotion

• Beatwave E-Picture Pro

• CorelDraw!

• ILOG JViews

• Jasc Trajectory Pro

• Mayura Draw

• Quark Express

• Sphinx Open

3.4. SVG conversion tools: ??? to SVG

• Raster (celinea.com)

• WMF (Blackdirt)

• PostScript/SWF (U. Nottingham)

• XSL FOs (FOP)

• CGM & AFP (IBM)

• Mapping (Internet Mapper, Galdos)

• Mac PICT (Chuck Houpt)

• Java2D & Slide Tool XML (Sun)

• Any graphics (IntraNet Solutions)

• TrueType to SVG fonts (SteadyState)

3.5. SVG conversion tools: SVG to ???

• Digital Applications:

• to PDF

• to raster

• Ionic: to raster

4. Why SVG is important

4.1. Client-side SVG

• Alternative to GIF, JPEG, PNG

• Faster downloads, zoomable, hi-res printing, etc.

• Companion to HTML and SMIL

• Future of Web design: mix HTML, SMIL, SVG

• Text flows, tables, forms: HTML

• Multimedia: SMIL

• Precise graphics: SVG

• SVG on handhelds

• Server generates personalized SVG page

4.2. Server-side SVG

• Easy to generate: it's just text

• Compatible with XSLT: it's just XML

• Easy to convert to other formats

• Images formats (e.g., Ionic) or PDF

• Several Java-based implementations

4.3. SVG as an exchange format

• Alternative to EPS

• It's XML

• It's a standard

• It's "modernized"

• Interactive

• Animation

• Structure

• Transparency

4.4. SVG as a Web application development environment

• Just like HTML, can be used to develop Web applications

• Paint your UI with SVG

• SVG provides same basic feature set as GDI or QuickDraw

• Supports facilities such as event capture, different cursors

• Even more powerful when HTML & SVG are used together

4.5. References

• SVG home page at W3C

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

• Latest news and announcements, latest implementation status

• Links to SVG web sites

• SVG specification

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

• SVG email lists

• www-svg@w3.org

• svg-developers@egroups.com

4.6. References - Adobe

• Adobe

• Commitment to SVG across its product line

• Commitment to W3C-compliant SVG ubiquity

• http://www.adobe.com/SVG

• Adobe SVG Viewer download page

• In-depth SVG tutorial

• Many sample files and demos

5. Demos

You'll have to attend the talk to see the demos

Design and Development by deepX Ltd.