|
Getting inside SVG
what content creators should know
|
 |
 |  | Find |
|
Abstract
|
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.
|
Contents
|
- Agenda
- SVG basics
- SVG deliverables
- SVG schedule
- Implementations: SVG viewers
- Implementations: SVG editors
- Implementations: SVG conversion tools
- Implementations: SVG server-side generators
- SVG features
- Rich graphics
- And it prints!
- Expressed in XML
- Stand-alone documents or embedded graphics
- Interactive and dynamic
- Compatibility
- Leverages tools & knowledge
- Server-side generation
- Internationalization
- Accessibility
- Demos
Agenda
- SVG Basics
- SVG Features
- Demos
Previous
Table of Contents
SVG basics
Background
- SVG = Scalable Vector Graphics
- Defined by the W3C
- Organizations on SVG Working Group
- Adobe
- Apple
- Autodesk
- BitFlash
- Corel
- HP
- 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: mailto:www-svg@w3.org
- SVG Home Page at Adobe: http://www.adobe.com/SVG
- Jon Ferraiolo email: jferraio@adobe.com