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 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-source project. Started in October, beta 1 in December • Who: Sun Microsystems, Inc. Eastman Kodak, Company Koala/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 help developers 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 natural fit 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 project at 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.