school of computer science & information technology g6dpmm - lecture 17 scaleable vector...
TRANSCRIPT
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>