Slide 1

Introduction to SVG & Batik Presented by Shang-Ming Huang

Slide 2

Outline Introduction to SVG Introduction to Batik References Conclusions

Slide 3

Introduction to SVG What is SVG ? Why SVG ? What can SVG do ? Some simple example Other SVG elements

Slide 4

What is SVG ? SVG is a language for describing two- dimensional graphics in XML SVG 1.0 Recommendation was published by W3C since September 2001 The latest version is SVG 1.2

Slide 5

Why SVG ? Most existing XML grammars represent either textual information or raw data such as financial information SVG fill this gap by providing a rich, structured description of vector and mixed vector/raster graphics

Slide 6

What can SVG do ? SVG graphics are scalable to different display resolutions SVG can preserve both text and graphical appearance SVG drawings can be interactive and dynamic Animations can be defined and triggered either declaratively or via scripting

Slide 7 "> "> " title="SVG document structure ">

SVG document structure

Slide 8 "> "> " title="A rectangle ">

A rectangle

Slide 9

Filter effects

Slide 10 At 0 secondsAt 1 seconds At 2 secondsAt 3 seconds">

Animation At 0 secondsAt 1 seconds At 2 secondsAt 3 seconds

Slide 11

Other SVG elements Paths Gradients Patterns Interactivity Scripting Fonts

Slide 12

Outline Introduction to SVG Introduction to Batik References Conclusions

Slide 13

Introduction to Batik What is Batik ? Application of Batik Architecture of Batik Application modules Core modules

Slide 14

What is Batik ? Batik is a Java(tm) technology based toolkit for applications of SVG With Batik, you can manipulate SVG documents anywhere Java is available The latest stable revision provides a complete support for all the static SVG features Work on supporting dynamic SVG features is under way

Slide 15

Application of Batik

Slide 16

Architecture of Batik

Slide 17

Application modules The Application Modules illustrate the functionality that Batik offers SVG Browser can view, zoom, pan and rotate SVG documents SVG Pretty Printer can manipulate and transform SVG content SVG Font Converter converts ranges of characters from a True Type Font format to the SVG Font format SVG Rasterizer can convert to and from SVG content

Slide 18

Demo of SVG Browser

Slide 19

Core modules (1/2) The heart of the Batik architecture SVG Generator converts the graphics to the SVG format SVG DOM implements the SVG DOM API defined in the SVG recommendation and manipulates SVG documents in a Java program

Slide 20

Core modules (2/2) JSVGCanvas is a UI component that can display SVG content and let the user interact with that content Transcoder transcodes an input stream or a document into a particular ouput format

Slide 21

Outline Introduction to SVG Introduction to Batik References Conclusions

Slide 22

References the official W3C site of SVG http://www.w3.org/Graphics/SVG/Overv iew.htm8 Batik SVG toolkit http://xml.apache.org/batik/ The Art is in the Code http://www.webreference.com/authoring /languages/svg/intro/

Slide 23

Conclusions (1/3) The advantages of using SVG Small file sizes for faster Web page downloads Unlimited color and font choices Reduced Maintenance Costs Easily Updated Rich Multimedia Capabilities

Slide 24

Conclusions (2/3) Compared with Flash SVG is compliant with other standards such as CSS and the DOM Flash is not open source The drawbacks of using SVG No browser fully supports SVG currently Adobe SVG plug-in is the only way to display SVG document

Slide 25

Conclusions (2/3) Research issues Developing a powerful authoring tool Exploring the potential of SVG on Web application, streaming services, and mobile devices