School of Computer Science & Information Technology

School of Computer Science & Information Technology

G6DPMM - Lecture 17G6DPMM - Lecture 17

Scaleable Vector GraphicsScaleable Vector Graphics

SVGSVG

Scaleable Vector GraphicsScaleable Vector Graphics Markup language designed for graphicsMarkup language designed for graphics XML application (W3C recommendation)XML application (W3C recommendation) XML format for high quality 2D vector graphics XML format for high quality 2D vector graphics

(which can contain embedded bitmaps)(which can contain embedded bitmaps) May be static or dynamically generated from May be static or dynamically generated from

real-time datareal-time data

HistoryHistory

Web standards (W3C recommendations)Web standards (W3C recommendations) Cross-industry consortium (Sun & Adobe, also Cross-industry consortium (Sun & Adobe, also

IBM, Apple, Microsoft, Kodak, Macromedia, IBM, Apple, Microsoft, Kodak, Macromedia, Xerox and many others).Xerox and many others).

1.0 recommendation - 20011.0 recommendation - 2001 1.1 recommendation - 20031.1 recommendation - 2003

SVG Tiny - subset of 1.1 for phonesSVG Tiny - subset of 1.1 for phones SVG Basic - subset of 1.1 for PDASVG Basic - subset of 1.1 for PDA

What does SVG do?What does SVG do?

Three types of graphic objectsThree types of graphic objects Vector graphic shapesVector 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 Objects may be grouped, styled, transformed and composited.composited.

Many transformations and effects defined by the Many transformations and effects defined by the languagelanguage

Elements have an exposed API - hence may be Elements have an exposed API - hence may be under software controlunder software control

SVG is extensible using templatesSVG is extensible using templates

Dynamic SVGDynamic SVG

SVG includes the full XML DOM (Document SVG includes the full XML DOM (Document Object Model)Object Model)

Elements can be accessed and controlled by Elements can be accessed and controlled by scriptsscripts

Many event handlers can be assigned to any Many event handlers can be assigned to any SVG object (eg onmouseover, onclick)SVG object (eg onmouseover, onclick)

Benefits of SVGBenefits of SVG

Open standardOpen standard Highly interoperableHighly interoperable Becoming very widely supported Becoming very widely supported Scaleable and zoomableScaleable and zoomable Text is searchable and selectableText is searchable and selectable Scripting allows interaction and animationScripting allows interaction and animation Accessible through Java2D APIAccessible through Java2D API Unicode support for internationalizaionUnicode support for internationalizaion Easily transformable using XSLTEasily transformable using XSLT

SVG ViewersSVG Viewers

Adobe ViewerAdobe Viewer Windows, Macintosh, Solaris & LinuxWindows, Macintosh, Solaris & Linux Browser plugin for Netscape, RealPlayer & OperaBrowser plugin for Netscape, RealPlayer & Opera ActiveX control for IE & MS OfficeActiveX control for IE & MS Office

Corel ViewerCorel Viewer Browser plugin for Windows (IE or Netscape)Browser plugin for Windows (IE or Netscape)

Apache BatikApache Batik Server plugin that renders SVG as JPEG or PDFServer plugin that renders SVG as JPEG or PDF

MozillaMozilla Native support in Mozilla - partial implementationNative support in Mozilla - partial implementation Full support promised in Firefox 1.1Full support promised in Firefox 1.1

Google – now supports SVG searchingGoogle – now supports SVG searching Many others - including SVG Tiny and SVG Basic viewersMany others - including SVG Tiny and SVG Basic viewers

Native SVG EditorsNative SVG Editors JASC WebDrawJASC WebDraw

Windows WYSYWIG SVG editorWindows WYSYWIG SVG editor

Bitflash BrillianceBitflash Brilliance Windows animated authoring tool for SVG, SVG-Tiny and Windows animated authoring tool for SVG, SVG-Tiny and

SVG-BasicSVG-Basic Currently beta testingCurrently beta testing

SodipodiSodipodi Linux drawing packageLinux drawing package

Editors with SVG exportEditors 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 othersMany others Also many conversion enginesAlso many conversion engines

Framework for SVGFramework 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!”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 ObjectsVector 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 ObjectsText 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 ObjectsImage Objects

<image x="60" y="30"

width="70" height="120"

xlink:href="tim.gif" >

</text>