140 likes | 248 Views
G6DPMM - Lecture 17. Scaleable Vector Graphics. SVG. Scaleable Vector Graphics Markup language designed for graphics XML application (W3C recommendation) XML format for high quality 2D vector graphics (which can contain embedded bitmaps)
E N D
G6DPMM - Lecture 17 Scaleable Vector Graphics
SVG • Scaleable Vector Graphics • Markup language designed for graphics • XML application (W3C recommendation) • XML format for high quality 2D vector graphics (which can contain embedded bitmaps) • May be static or dynamically generated from real-time data
History • Web standards (W3C recommendations) • Cross-industry consortium (Sun & Adobe, also IBM, Apple, Microsoft, Kodak, Macromedia, Xerox and many others). • 1.0 recommendation - 2001 • 1.1 recommendation - 2003 • SVG Tiny - subset of 1.1 for phones • SVG Basic - subset of 1.1 for PDA
What does SVG do? • Three types of graphic objects • Vector graphic shapes • Images (ie bitmap grapics) • Text (in any XML format) • Objects may be grouped, styled, transformed and composited. • Many transformations and effects defined by the language • Elements have an exposed API - hence may be under software control • SVG is extensible using templates
Dynamic SVG • SVG includes the full XML DOM (Document Object Model) • Elements can be accessed and controlled by scripts • Many event handlers can be assigned to any SVG object (eg onmouseover, onclick)
Benefits of SVG • Open standard • Highly interoperable • Becoming very widely supported • Scaleable and zoomable • Text is searchable and selectable • Scripting allows interaction and animation • Accessible through Java2D API • Unicode support for internationalizaion • Easily transformable using XSLT
SVG Viewers • Adobe Viewer • Windows, Macintosh, Solaris & Linux • Browser plugin for Netscape, RealPlayer & Opera • ActiveX control for IE & MS Office • Corel Viewer • Browser plugin for Windows (IE or Netscape) • Apache Batik • Server plugin that renders SVG as JPEG or PDF • Mozilla • Native support in Mozilla - partial implementation • Full support promised in Firefox 1.1 • Google – now supports SVG searching • Many others - including SVG Tiny and SVG Basic viewers
Native SVG Editors • JASC WebDraw • Windows WYSYWIG SVG editor • Bitflash Brilliance • Windows animated authoring tool for SVG, SVG-Tiny and SVG-Basic • Currently beta testing • Sodipodi • Linux drawing package
Editors with SVG export • Adobe Illustrator (Windows) • Corel Draw (Windows & Macintosh) • CadStd Pro (Windows) • Oak Draw (Windows) • Sphinx (Unix) • Many others • Also many conversion engines
Framework for SVG <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" ttp://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg xml:space="preserve" width="400" height="200"> ... </svg>
SVG “Hello World!” <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg xml:space="preserve" width="400" height="200"> <text style="fill:blue" x="20" y="20"> Hello from SVG! </text> </svg>
Vector Objects <rect style="fill:green" x="20" y="20" width="200" height="100" /> <circle style="fill:green;stroke:cyan;" cx="200" cy="55" r="40" /> <path style="fill:red;stroke:blue;" d="M 50 10 L 350 10 L 200 120 z" />
Text Objects <text x="20" y="150" style="fill:green font-family:sansserif; font-size:20;" > This is </text> <text x="160" y="150" style="fill:red font-family:serif; font-style:italic; font-size:32;" > some formatted text </text>
Image Objects <image x="60" y="30" width="70" height="120" xlink:href="tim.gif" > </text>