Introduction to the Batik project Thomas DeWeese, Vincent Hardy Eastman Kodak Company, Sun Microsystems Inc. ApacheCon 2001, Santa Clara Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 1 Welcome Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 2
37
Embed
Introduction to the Batik project - Apache Software …people.apache.org/.../ApacheCon2001/xml-ca/files/w14batikPaper.pdf · Part I: Background Thomas DeWeese, Vincent Hardy - Introduction
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Introduction to the Batikproject
Thomas DeWeese, Vincent HardyEastman Kodak Company, Sun Microsystems Inc.
ApacheCon 2001, Santa Clara
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 1
Welcome
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 2
Goal of this Session
• Learn what the Batik project is• Understand what SVG can do• Understand how to leverage Batik
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 3
Goal of this Session
In this session, we discuss the relatively new Batik project (http://xml.apache.org/batik), give background
on how it started, what it is about, and how it relates to Scalable Vector Graphics (SVG), the upcoming
W3C recommendation for rich, dynamic 2D graphics.
The goal of the session is to explain what the Batik project is, what SVG is, what it can do, and describe
how Batik can help when dealing with SVG content.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 4
Agenda
• Part I: Background• Part II: SVG 101• Part III: Batik use cases and demos
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 5
Agenda
The first part of this session gives some background on the Batik project, how it started, its status, and
accomplishments.
The second part of this session introduces SVG and gives a quick overview of the many SVG features.
Finally, the last part of the presentation focuses on how the Batik software can be used and where it is
relevant.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 6
Part I: Background
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 7
Batik's History
• What: a Java language SVG toolkit• When: Summer of 2000, multiple teams/companies
interested in participating in an open-sourceproject. Started in October, beta 1 in December
• Who:Sun Microsystems, Inc.Eastman Kodak, CompanyKoala/INRIA (French research institute)ILOG (French graphic software company)CSIRO (Australian research institute)
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 8
Batik's History
The Batik project started out during the summer of 2000. At that time, several organizations recognized
that:
1) several teams in the industry were attempting to implement the SVG specification on the Java platform
2) none of the teams had the resources to do a complete implementation of the SVG specification. Each
had different strengths and
3) existing teams and other partners were interested in making a joined open-source effort
Following, Sun convinced the various teams to join into an open-source effort:
a) Kodak, which brought no code but an extremely valuable expertise in image processing
b) INRIA/Koala team, a French research organization that had the most solid SVG implementation at the
time
c) ILOG, a French software company that brought resources and expertise.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 9
d) Sun contributed software (from the Java Advanced Imaging team, the Java 2D team, and the XML
Technology center, with the SVG generator) and resources
Work actively started in October 2000 when the various contributors started to integrate the various
contributions while the project infrastructure (CVS code repository, mailing lists, web site, etc...) were put
in place. The first release came in December 2000.
Note: What is Batik? Batik is an ancient textile art form from what is currently called Indonesia. This is an
especially apt name because Batik often has a vector graphics appearance, as well as the fact that the
island of Java is part of Indonesia.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 10
Batik Goals
Deliver a Java language(tm) toolkit to helpdevelopers generate, create, manipulate,view, and transform SVG content
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 11
Batik Goals
The goal of the Batik project is to help developers add support for SVG in their applications by delivering
software components, which can be easily integrated. Batik delivers core components that can be used
either separately or in combinations for various purposes, from exporting graphical data in the SVG
format, to transcoding SVG images to other formats to adding SVG viewing capability to an application.
Our goal is to deliver "one-stop shopping" for all kinds of SVG tools.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 12
Why at Apache?
• Pre-existing xml.apache.org was a naturalfit for a new Java/XML project
• Several Apache projects (FOP and Cocoon)were already interested in SVG
• Famous, highly reputed open-source community• SVG has a lot of uses server side• All the project co-founders were very
comfortable with starting a projectat Apache
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 13
Why at Apache?
SVG offers an opportunity to change the way graphics rich web sites are created, managed, and searched
client side, of course, but also to the server side.
It also offers the possibility of establishing a flexible, extensible, graphics infrastructure on web clients.
xml.Apache.org has already done lots of work with XML and Java, so the fit is natural.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 14
Accomplishments
• First beta release in December 2000• Weekly developer builds since January 2001
(rcN releases)• Active mailing list• Batik is integrated in 2 Apache
projects (Cocoon 2 & FOP)and in some other projects (JChemPaint)
• Contributions are starting• Batik 1.0 is one of the most (if not the most)
complete static SVG implementation
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 15
Accomplishments
Cocoon and FOP are both using Batik to handle SVG content.
Started work in October 2000.
Released Beta 1 in December 2000.
Version 1.0 is a fully compliant Static Viewer for SVG (excluding some advanced text features).
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 16
Part II: SVG 101
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 17
What is SVG?
• SVG = scalable vector graphics• A document format for scalable graphics• A new graphics standard from the W3C• Mix of vector and raster graphics• Interactive/Scriptable• http://www.w3.org/Graphics/SVG
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 18
What is SVG?
SVG stands for Scalable Vector Graphics.
The specification is almost complete, as it is a Candidate Recommendation (CR) at the time of this writing
(February 2001), and expected to move to Proposed Recommendation (PR) very shortly.
SVG is an XML grammar.
SVG can represent complex graphics as a combination of Raster (images like PNG, JPEG), and vector
graphics (lines arcs, polygons etc). It also allows the application of filters to these primitives to get
sophisticated results.
SVG graphics can be rendered at multiple resolutions, so graphics can look good at high and low
resolutions (no more blocky effects when printing Web graphics!).
SVG being based on XML allows for scripting using any language with a DOM binding. SVG also defines
a set of events that allow for complex responses to user actions, such as changing the color of a graphic
element (e.g., a rectangle) when the mouse moves over it.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 19
SVG also supports SMILE animation. This allows one to script animations, based on time cues, or in
response to user actions.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 20
Static SVG Example
• This presentation!• Many standard Web graphics• Maps
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 21
Static SVG Example
Using a static SVG viewer with simple linking abilities, it is possible to construct high-quality
presentation graphics using SVG. This presentation is one example.
Many of the common 'border and button' graphics that are widely seen on the web are extremely suitable
for expression in SVG. These graphics will hopefully one day be sent as SVG to clients for rendering,
which would allow for the 'border and button' graphics to respond to browser settings (like the desired
font size).
However even today expressing those effects as SVG offers value, because the many pieces that make them
up can be generated via an SVG renderer, based on an XML description of the page. So, when a new
button needs to be added you can add it to the page description and the graphics are automatically
generated.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 22
Scripting Example
• Interactive graphical content• Maps with information pop-ups
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 23
Scripting Example
When you add scripting, you can interact with the user and the viewer. You can change rendering styles as
the user zooms in, or show more detailed information, as well as having roll over or click actions
programmed.
You can even have the user click and drag elements around.
You can also, as in the example shown on this slide, add non-visual feedback, such as playing music.
As of right now Batik's support for scripting is limited in that we don't support updating the rendering tree
in response to changes in the DOM. This is our #1 priority after the 1.0 release. Much of the
infrastructure is already in place as this shows.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 24
stroke="white" ><text x="40" y="40" stroke="none" >Hello Java 2D to SVG</text>
</g></g>
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 58
Creating SVG Content 1/3
On the Java platform, the Graphics2D abstract class is the embodiment of the Java 2D API and
represents the interface programs used to do any type of rendering: drawing strings of text, fill shapes
with arbitrary types of paints (e.g., solid colors, transparent colors, gradient paints patterns), or draw
images.
There are different concrete implementations of the abstract Graphics2D class for the different outputs.
That is, a different concrete implementation of Graphics2D will be used to render to a screen, or to render
to a printer. The advantage of having all the implementations extend the same abstract base class, is that
programs only depend on the interface and not on concrete implementations: the same code will work for
any implementation of the Java 2D API, which is why that API is said to be output device independent.
The output device independance is illustrated in the first code snippet of the slide where you can see that
the rendering calls made on the Graphics2D object (g), are the same no matter what the concrete
implementation of Graphics2D is.
The SVGGraphics2D class is an implementation of Graphics2D. As a consequence, a Java program that
does rendering will be able to use it without modification. This new implementation of Graphics2D
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 59
generates SVG content, instead of drawing to a screen or a printer.
The second half of the slide shows the SVG content generated by the SVGGraphics2D class. The big
advantage of that class is that it can be used by any Java program that does graphics as easily as these
programs print or draw to a screen, with no code changes.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 60
Creating SVG Content (2/3)
• Integrates at a low level• Allows all applications to export to SVG// Create an instance of HelloSVGHelloSVG helloSVG = new HelloSVG(...);// SVGGraphics2D extends Graphics2DSVGGraphics2D svgGenerator = ...;// Now, ask helloSVG to render into our// custom Graphics2D implementationhelloSVG.paint(svgGenerator);// Finally, stream out SVG to the standard outputWriter outWriter = new OutputStreamWriter(System.out, "UTF-8");svgGenerator.stream(outWriter);
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 61
Creating SVG Content (2/3)
This slide illustrates how an application doing some arbitrary rendering (the HelloSVG class in our
example), can work with the SVGGraphics2D class to export SVG content because SVGGraphics2D
extends the abstract Graphics2D class.
The SVGGraphics2D class leverages the extensible architecture of the Java 2D API and allows all Java
applications to export their graphics to the SVG format.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 62
Creating SVG Content (3/3)
• DOM APIimport org.dom.*;Document doc = ...; // Depends on DOM implementationElement svgRoot = doc.createElement("svg");svgRoot.setAttribute("width", "500");svgRoot.setAttribute("height", "500");...Element rect = doc.createElement("rect");rect.setAttribute("fill", "red");...
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 63
Creating SVG Content (3/3)
This simple example is a reminder that because SVG is an XML syntax, any DOM implementation can be
used to create and manipulate SVG content.
Of course, using the SVG DOM extension makes creating SVG content easier in some cases, but it is not
required, as shown in this slide's example.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 64
Exporting to other Formats
• Static SVG to other formats throughGraphics2D implementations
Graphics2D g = ...; // Depends on actual implementationg.setPaint(Color.red);...g.fillRect(20, 30, 600, 300);
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 65
Exporting to other Formats
In the Batik architecture, SVG documents are loaded into a DOM structure and an equivalent internal
object oriented representation of the graphic is created (a GVT tree) through the Bridge module, which is
responsible for building and maintaining the relation between the DOM tree and the GVT tree.
A GVT tree can paint itself into a Graphics2D object (an abstract class that embodies the output
independant rendering API of the Java 2D API).
Leveraging both GVT and the Graphics2D extensible API, it is fairly easy to write converters from SVG to
other formats for static graphics: only a new Graphics2D implementation is needed which, instead of
drawing to a screen or a printer, will create a document in the desired format. For example, it is easy to
imagine a PDFGraphics2D implementation that would generate PDF content or a WMFGraphics2D
implementation that would generate WMF content.
One of the goals of the Batik team is to grow a library of Graphics2D implementation to offer multiple
output formats to which SVG documents could be converted.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 66
Using Batik server side
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 67
Using Batik server side
This slide shows a simple example of how Batik components might be used server side. In that example, a
Web application serves statistical graphics (e.g., stock quotes) to its clients.
The client sends a request (1) which the server turns into a database query (2) after analysis. Then, it uses
the data to dynamically build an SVG graphic (3), for example, using the SVGGraphics2D generator or
the SVG DOM API. Finally, the server streams the image back to the client (4). If the client supports SVG,
then the SVG content can be streamed out as is, otherwise, the SVG image can be converted to another
format (such as a JPEG image) before it is sent to the client.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 68
Conclusion
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 69
Parting Thoughts...
• SVG is a useful, powerful, and standardgraphic format
• Batik provides the components developers need togenerate, create, manipulate, or view SVG content
• The Batik project is growing its community ofusers and contributors.Contributions in transcoders (to andfrom SVG) would be helpful
• Feedback wanted and welcome!!
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 70
Parting Thoughts...
The Batik project has been and is a fun experience for the parties involved. One of the reasons is that the
domain, Scalable Vector Graphics is fun and exciting.
However SVG is not just fun: it is extremely useful and can help cutting down the cost of managing images
on the web dramatically. SVG, even though it is a 'young' recommendation, can be used today in many
areas, as we have discussed in this presentation.
Those interested in taking advantage of SVG on the Java platform will find that Batik can be useful in
many areas. However, Batik is a work in progress and even though a lot of work has been done to produce
one of the best static SVG implementation, there are still very valuable contributions that would help the
project.
The two biggest areas where contributions would be welcome are testing and transcoding. The SVG
specification is complex and Batik is using the basic effectivity test suite that the W3C has created for
SVG. However, the team feels that more tests are required to do a good implementation and, since the
beginning of the project, it has created and grown a pool of drilled down tests that are used to track
regressions. More tests would help maintain and improve the quality of Batik.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 71
Transcoders from and to SVG is another area where help would be welcome. SVG is very poweful, but few
client machines support it as of today. Until SVG becomes really prominent, it will be very useful to be
able to convert SVG images to other formats. By the same token, some formats are not easily published to
a wide array of clients (e.g., some CAD formats) and it would be really helpful to add converts to the SVG
formats to help visualize such formats. Here again, contributions would be welcome.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 72