School of Computer Science & Information Technology G6DPMM - Lecture 17 Scaleable Vector Graphics

SVG Scaleable Vector Graphics Scaleable Vector Graphics Markup language designed for graphics Markup language designed for graphics XML application (W3C recommendation) XML application (W3C recommendation) XML format for high quality 2D vector graphics (which can contain embedded bitmaps) XML format for high quality 2D vector graphics (which can contain embedded bitmaps) May be static or dynamically generated from real-time data May be static or dynamically generated from real-time data

History Web standards (W3C recommendations) Web standards (W3C recommendations) Cross-industry consortium (Sun & Adobe, also IBM, Apple, Microsoft, Kodak, Macromedia, Xerox and many others). Cross-industry consortium (Sun & Adobe, also IBM, Apple, Microsoft, Kodak, Macromedia, Xerox and many others). 1.0 recommendation recommendation recommendation recommendation SVG Tiny - subset of 1.1 for phones SVG Tiny - subset of 1.1 for phones SVG Basic - subset of 1.1 for PDA SVG Basic - subset of 1.1 for PDA

What does SVG do? Three types of graphic objects Three types of graphic objects Vector graphic shapes Vector graphic shapes Images (ie bitmap grapics) Images (ie bitmap grapics) Text (in any XML format) Text (in any XML format) Objects may be grouped, styled, transformed and composited. Objects may be grouped, styled, transformed and composited. Many transformations and effects defined by the language Many transformations and effects defined by the language Elements have an exposed API - hence may be under software control Elements have an exposed API - hence may be under software control SVG is extensible using templates SVG is extensible using templates

Dynamic SVG SVG includes the full XML DOM (Document Object Model) SVG includes the full XML DOM (Document Object Model) Elements can be accessed and controlled by scripts Elements can be accessed and controlled by scripts Many event handlers can be assigned to any SVG object (eg onmouseover, onclick) Many event handlers can be assigned to any SVG object (eg onmouseover, onclick)

Benefits of SVG Open standard Open standard Highly interoperable Highly interoperable Becoming very widely supported Becoming very widely supported Scaleable and zoomable Scaleable and zoomable Text is searchable and selectable Text is searchable and selectable Scripting allows interaction and animation Scripting allows interaction and animation Accessible through Java2D API Accessible through Java2D API Unicode support for internationalizaion Unicode support for internationalizaion Easily transformable using XSLT Easily transformable using XSLT

SVG Viewers Adobe Viewer Adobe Viewer Windows, Macintosh, Solaris & Linux Windows, Macintosh, Solaris & Linux Browser plugin for Netscape, RealPlayer & Opera Browser plugin for Netscape, RealPlayer & Opera ActiveX control for IE & MS Office ActiveX control for IE & MS Office Corel Viewer Corel Viewer Browser plugin for Windows (IE or Netscape) Browser plugin for Windows (IE or Netscape) Apache Batik Apache Batik Server plugin that renders SVG as JPEG or PDF Server plugin that renders SVG as JPEG or PDF Mozilla Mozilla Native support in Mozilla - partial implementation Native support in Mozilla - partial implementation Full support promised in Firefox 1.1 Full support promised in Firefox 1.1 Google – now supports SVG searching Google – now supports SVG searching Many others - including SVG Tiny and SVG Basic viewers Many others - including SVG Tiny and SVG Basic viewers

Native SVG Editors JASC WebDraw JASC WebDraw Windows WYSYWIG SVG editor Windows WYSYWIG SVG editor Bitflash Brilliance Bitflash Brilliance Windows animated authoring tool for SVG, SVG-Tiny and SVG-Basic Windows animated authoring tool for SVG, SVG-Tiny and SVG-Basic Currently beta testing Currently beta testing Sodipodi Sodipodi Linux drawing package Linux drawing package

Editors with SVG export Adobe Illustrator (Windows) Adobe Illustrator (Windows) Corel Draw (Windows & Macintosh) Corel Draw (Windows & Macintosh) CadStd Pro (Windows) CadStd Pro (Windows) Oak Draw (Windows) Oak Draw (Windows) Sphinx (Unix) Sphinx (Unix) Many others Many others Also many conversion engines Also many conversion engines

Framework for SVG <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" ttp://

SVG “Hello World!” <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Stylable//EN" " Hello from 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 L L z" />

Text Objects <text x="20" y="150" style="fill:green font-family:sansserif; font-size:20;" > This is <text x="160" y="150" style="fill:red font-family:serif; font-style:italic; font-size:32;" > some formatted text

Image Objects <image x="60" y="30" width="70" height="120" xlink:href="tim.gif" >