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
Animation Example
<svg width="400" height="300"><g style="font-family:SunSansCondensed-Heavy; font-size:30">
<text x="30" y="45">SVG: Making</text><text x="30" y="75" style="fill:#666699">things work</text>
</g><g transform="translate(220, 55)" style="fill:#9999cc">
<rect x="-25" y="-25" width="50" height="50"><animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="360" begin="0s"dur="5s" repeatCount="indefinite" fill="freeze"additive="sum"/>
</rect></g>
</svg>
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 25
Animation Example
This is a simple example that uses SMILE Animation. If Batik supported animation, one would be able to
click on the box and make it rotate.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 26
Sample SVG - Shapes
<g stroke-width="3"><rect stroke="#purple" fill="#mediumpurple"
x="10" y="10" width="50" height="100"/><circle stroke="#F00" fill="#D04"
cx="137.5" cy="60" r="50"/><path stroke="#00F" fill="#69D"
d="M35,125 l25,50 l-25,50 l-25,-50 z"/><path stroke="#080" fill="#0F4"
d="M120,160 a25,25 0 1,1 35,0a25,25 0 1,1 0,35 a25,25 0 1,1 -35,0a25,25 0 1,1 0,-35"/>
</g>
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 27
Sample SVG - Shapes
This piece of SVG constructs four simple shapes:
The first shape is a simple rectangle. Note that we can specify the color of the fill (the interior of the
shape), and the stroke (the outline of the shape). Although this example doesn't show it, you can also
specify the width of the stroke. For the rectangle we specify the x and y location, and the width and height
of the rectangle.
The second object is a circle. Here we have specified the color with an RGB triplet in the SVG. Obviously
an authoring tool would hide such ugliness from the user. A circle, as one would expect, is specified as
center-x, center-y, and radius.
The last two examples are a bit more complex. They use the SVG Path tag. Just like circle and rectangle
you can specify the fill, and stroke properties. However the model for path is more advanced.
A path is specified as a series of move-to, line-to, curve-to, and arc-to specifications. The first path
example uses simple line-to to form a diamond, the second path uses arc-to (parts of an ellipse) to form
a four leaf clover.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 28
Sample SVG - Shapes
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 29
Sample SVG - Shapes
Here are the resulting shapes.
As you can see Paths are the most powerful element. In fact all of the other shapes in SVG can be
represented using the Path element.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 30
Sample SVG - Patterns
<pattern id="p1" width=".3" height=".3"><text fill="yellow" x="-3" y="20"
font-size="10"transform="rotate(-30)">Batik</text>
</pattern><ellipse stroke="red" fill="url(#p1)"
cx="65" cy="40" rx="60" ry="35"/>
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 31
Sample SVG - Patterns
Another very powerful feature of SVG is the ability to define custom patterns and gradients to fill objects.
The content of a pattern is defined using SVG. This very short example defines a pattern consisting of the
word 'Batik' filled with yellow and rotated 30 deg.
Note the transform attribute. This attribute is supported on most SVG elements and allows the
specification of an arbitrary Affine Transform. For those that don't know what an Affine Transform is, it
allows one to rotate, translate, scale(resize), and shear objects. This ability makes it very convenient to
compose various objects together.
This pattern is referenced to fill an ellipse, with a red stroke.
Notice that the fill for the ellipse is specified using a URL. This makes it easy to define libraries of
patterns that can be referenced as needed. The same technique is used for gradients, making it possible to
also form libraries of commonly used gradients.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 32
Sample SVG - Patterns
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 33
Sample SVG - Patterns
Here is the result.
This helps to show that fairly complex images can be defined very concisely in SVG.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 34
Sample SVG - Filters
Drop Shadow Filter:<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha"stdDeviation="5"/>
<feOffset dx="10" dy="10" /><feComponentTransfer result="Img1">
<feFuncA type="linear" slope=".5"/></feComponentTransfer><feComposite in2="Img1"
in="SourceGraphic"/></filter><use filter="url(#dropShadow)"
xlink:href="#Batik_Logo"/>
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 35
Sample SVG - Filters
Finally we come to filters. Filters are one of the coolest pieces of SVG. This is where the vector graphics
world meets raster graphics. The filters in SVG represent a set of basic image processing operations that
can be applied to images to give all sorts of interesting effects.
Here, we have a very useful basic filter. It will take any graphics element and apply a simple drop shadow
to it.
This is done by blurring the alpha channel, offsetting it down and to the right, making it a bit more
transparent and compositing it with the original graphic element.
Once defined, the filter effect can be applied to any SVG element with the 'filter' attribute as is shown here
in the final 'use' statement.
Note that once again we reference the filter effect and the graphic element via url's. This approach helps
to promote the development of reusable libraries of filter effects and graphic elements.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 36
Sample SVG - Filters
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 37
Sample SVG - Filters
This is the result, you can see the nice soft shadow effect behind the logo.
This is a very quick demonstration of the most basic parts of SVG. Hopefully, you have gotten a feel for
the potential power of SVG to describe complex, reusable, graphic elements.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 38
Part III: Batik Use Cases
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 39
Batik Use Cases
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 40
Batik Use Cases
As we expect SVG to become a dominant format on the Web, it becomes important to be able to deal with
SVG content in various contexts. The figure illustrates how and where Batik might prove useful.
On the content creation side, or in the infrastructure, applications can use either the SVG Generator or
the SVG DOM to create SVG content. For example, an application can easily export its statistical graphs,
or spreadsheet, with the SVG generator.
In the infrastructure, SVG can be used to represent all types of 2D graphical data: engineering diagrams,
advertisements, animations, etc... If the image needs to be served to a client that does not support SVG, the
SVG transcoders can be used to turn the SVG content into other formats, such as PNG, JPEG, or PDF.
Finally, a browser might support SVG natively, but, because there is no wide support yet, it might be
interesting to offer viewing of SVG content in an applet or a separate application: the Batik UI
Component can be used for data visualization.
These are just a few examples and there are other creative uses for Batik. The user and developer lists
show that developers are using Batik for a wide array of applications, such as leveraging GVT to be the
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 41
core rendering engine in an engineering drawing tool, or using SVG and Batik to render mathematical
expressions described in MathML (an XML syntax for mathematics).
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 42
Architecture
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 43
Architecture
There are thee major areas to the Batik Architecture.
The first area are the pieces that construct SVG DOM trees. These include the svggen package, which uses
a Graphics2D to build an SVG DOM tree, and our Document Factory class, which parse XML to generate
an SVGDocument.
The second area are the pieces that work directly off the DOM tree. There are a number of these. Just to
name a few our DOM implementation (of course), the Transcoders (which can also handle building the
DOM tree internally), an SVG Pretty Printer, which outputs nicely formatted XML, and the bridge
package.
The bridge package is responsible for constructing and maintaining a view of the DOM tree that is more
suitable for rendering purposes. This is called the GVT or the 'Graphics Vector Toolkit'.
The GVT tree represents the hub of the third piece of the Batik toolkit, which is the piece responsible for
rendering and interacting with SVG content.
This piece includes the JSVGCanvas, which is used by the viewer application, a Renderer package that
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 44
simplifies the task of rendering a GVT tree, and the GVT tree, and all it's classes.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 45
Using Batik Client Side
• JChemPaint
• High resolution image viewer (Demo)
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 46
Using Batik Client Side
The image at the bottom here is from JChemPaint. An open-source project to make a general purpose
editor for 2D chemical structures.
They are currently using the svggen package from Batik to translate the contents of the editor window into
a static SVG file.
The second example is a copy of Batik with an extension to the image tag that supports multiresolution
image data.
This is an aerial photograph of an amusement park. Some transparent overlays have been added with
SVG to highlight some "proposed modifications", as well as pointing out some areas of interest.
The aerial photograph is ~15,000 pixels by 15,000 pixels (~900 MB of uncompressed data). Yet, you can
work with it as easily as any other SVG file in Batik. This shows how deeply resolution independence is
ingrained in Batik.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 47
Viewing SVG Content
• SVG ViewerGeneral purpose application
• JSVGCanvasGeneral purpose swing component
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 48
Viewing SVG Content
The SVG Viewer is a simple Java application that allows one to view SVG content. With it you can zoom,
pan and rotate, print, view the source, view the dom tree, check memory usage etc. It's a really useful
basic SVG viewing application.
JSVGCanvas is a general purpose Swing component that can be used to display any SVG DOM tree. This
makes it trivial for any Java application to add support for displaying SVG content. This class is used for
all the display aspects of the SVG Viewer.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 49
Rasterizing SVG documents
• Various formats: PNG, JPEG• gvt.renderer.Renderer• GraphicsNodeRable
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 50
Rasterizing SVG documents
So all you want is a "normal" image. We can do that!
The toolkit includes a rasterizer application, which can be used to output PNG & JPEG. Eventually, we
may add more formats, especially when Java Image I/O is released.
ImageTranscoder classes for writing out PNG, & JPEG. There will be a quick example that shows how to
make use of these classes.
If you want to rasterize SVG content inside your own application, and for what ever reason JSVGCanvas
isn't useful, you might want to use the ImageRenderer class, which is how both the JSVGCanvas and the
ImageTranscoder classes get a rasterized version of the SVG document.
For the real imaging geeks out there, in addition to the Renderer interface, people who have existing
imaging infrastructure associated with Java Advanced Imaging, will be interested to know that Batik's
filters are implemented using the RenderedImage and RenderableImage interfaces. This makes it
relatively easy to feed SVG data into JAI rendering chains, and vice versa.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 51
Using ImageTranscoder
Package:org.apache.batik.transcoderpublic static void writeJPEG(String uri,
OutputStream dst) {
ImageTranscoder trans = new JPEGTranscoder();trans.addTranscodingHint
(JPEGTranscoder.KEY_XML_PARSER_CLASSNAME,"org.apache.crimson.parser.XMLReaderImpl");
try {trans.transcode(new TranscoderInput(uri),
new TranscoderOutput(dst));} catch (TranscoderException te) { ... }
}
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 52
Using ImageTranscoder
The Transcoder API is high level and hides a lot of the details so it's a good starting point.
The code constructs a JPEG Transcoder, and calls the transcode method with the URI of the input XML
and an Output Stream that will have JPEG data written to it.
As you can see you can specify the XML parser that should be used. There are also hints for the
compression level to use, and final image size that can be specified.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 53
Using JSVGCanvas 1/2
public static SVGDocument read(String uri) {SVGDocumentFactory df
= new SAXSVGDocumentFactory("org.apache.crimson.parser.XMLReaderImpl");
try {return df.createDocument(uri);
} catch (java.io.IOException ioe) {ioe.printStackTrace();
}return null;
}
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 54
Using JSVGCanvas 1/2
This does all the work of reading an SVG Document from a URL and constructing an SVG Document from
it.
First we construct an instance of the SVG document factory for SVG from Batik's dom.jpeg package. Then
we use its 'createDocument' method to build the SVGDocument that we then return to the caller.
Note that it allows you to specify what SAX parser it should use.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 55
Using JSVGCanvas 2/2
public static JComponent createSVGCanvas(SVGDocument document) {
JSVGCanvas canvas = new JSVGCanvas();canvas.setSVGDocument(document);return canvas;
}
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 56
Using JSVGCanvas 2/2
This is all it takes to show an SVGDocument in your Java application. Construct the Canvas, and provide
the document. This will automatically fill the Canvas with the SVG content according to the outermost svg
tag's viewPort settings.
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 57
Creating SVG Content 1/3
• Java 2D API CodeGraphics2D g = ...; // e.g., SVGGraphics2Dg.setPaint(new Color(125, 72, 255));g.fillRect(10, 10, 200, 50);g.setPaint(Color.white);g.setFont(new Font("SunSansCondensed-Heavy", Font.PLAIN, 20));g.drawString("Hello Java 2D to SVG", 40, 40);
• Generated SVG<g>
<g fill="rgb(125, 72, 255)" stroke="rgb(125, 72, 255)" ><rect x="10" y="10" width="200" height="50" stroke="none" />
</g><g font-family="SunSansCondensed-Heavy" fill="white" font-size="20"
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
Additional Info
• Batik: http://xml.apache.org/batik• [email protected]• [email protected]• SVG: http://www.w3.org/Graphics/SVG• SVG Implementations: http://www.w3.org/Graphics/SVG• XML, XSL, FOP, ...: http://www.w3.org• XML and Java tools: http://www.xml.apache.org• Java 2D API:
http://java.sun.com/products/java-media/2D/index.html
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 73
Additional Info
The first three references on this slide are the Batik web site URL and the two Batik mailing lists. At the
time of this writing, the Batik mail archives have not been put it place yet, but there is a temporary archive
at: http://www-sop.inria.fr/koala/batik/mlists/batik-dev/archives/threads.html
Thomas DeWeese, Vincent Hardy - Introduction to the Batik project page 74