Introduction to SVG & Batik Presented by Shang-Ming H uang
Transcript
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