Fix batik images
diff --git a/content/batik/tools/browser.mdtext b/content/batik/tools/browser.mdtext
index 72aad1e..b0ed553 100644
--- a/content/batik/tools/browser.mdtext
+++ b/content/batik/tools/browser.mdtext
@@ -86,7 +86,7 @@
The following image shows the result of starting the browser, from the binary or source distribution, with the `-font-size 10 samples/batikFX.svg` options.
-<div class="figure">  </div>
+ 
# Viewing SVG documents { #viewing}
@@ -106,22 +106,22 @@
### Opening a local SVG file { #localFile}
In situations where you want to open SVG files locally on the machine where you are running Squiggle, you can use **File→Open File** menu item to open that file, or use the **Ctrl-F** key accelerator. Doing so brings up a file chooser that lets you select the file you want to view.
-<div class="figure">  </div>
+ 
## Opening an SVG file from the web { #urlFile}
There are many situations where the SVG content you want to view is not local to the machine where Squiggle is running. In that case, you can use the **File→Open Location** menu item, or use the **Ctrl-A** key accelerator to open that page. Doing so brings up a dialog box where you can type in the URL for the file you want to view.
-<div class="figure">  </div>
+ 
## Using the location bar text field to view an SVG file { #locationBar}
When you know the URL of the document you want to view, you can enter it directly in the location bar text field at the top of Squiggle, the same way you can enter a URL in an HTML browser.
-<div class="figure">  </div>
+ 
## Browsing SVG files { #browsing}
As with HTML content, it is common to navigate back and forth between SVG files (remember that SVG files contain hyperlinks, just like HTML does) and, as described later in this document, it is possible to [zoom](#zoomInOut) into SVG documents, [pan](#panning) and [rotate](#rotating).
-<div class="figure">  </div>
+ 
Squiggle offers multiple features to help you browse SVG files:
@@ -141,7 +141,7 @@
The **View→Previous Transform** menu item (**Ctrl-K**) and the **View→Next Transform** menu item (**Ctrl-L**) let you go to the previous or next view of the document. This is useful when, for example, you [pan](#panning) or [rotate](#rotating) the document and want to go back to the previous view you had of the document (i.e., before you panned or rotated it).
### Viewing multiple SVG files { #viewingMultiple}
-<div class="figure">  </div>
+ 
Squiggle can display multiple files simultaneously in different windows. To view a new file in a separate window, simply select the **File→New Window** menu item or use the **Ctrl-N** keyboard accelerator.
### Reloading an SVG document { #reloading}
@@ -160,18 +160,18 @@
### Viewing the source { #viewingSource}
-<div class="figure">  </div>
+ 
When the browser displays an SVG file, you can select the **View→View Source...** menu item or use the **Ctrl-U** keyboard accelerator to view the source code.
### Viewing the document tree { #viewingTree}
-<div class="figure">  </div>
+ 
When the browser displays an SVG file, you can select the **View→DOM Viewer...** menu item or use the **Ctrl-D** keyboard accelerator to open a window that shows the SVG document in the form of a tree. The window lets you navigate the tree, select individual elements, such as a path elements, and view the attributes and CSS values that apply to these elements. While the View Source window shows the SVG source as it was when it was loaded, the DOM Viewer window reflects the current state of the document, including any modifications that have occurred due to script.
## Configuring Squiggle { #configuring}
The **Edit→Preferences** menu item or **Ctrl-G** brings up the dialog box shown in the following figure.
-<div class="figure">  </div>
+ 
This dialog contains several types of options, which can be selected with the left-hand side list. For each type of option, a panel lets you configure various browser parameters:
@@ -246,7 +246,7 @@
- If the mouse is over the document in the display area, you can press the **Ctrl key** then **click the left mouse button and drag** to select the area of interest in the document. This can only be used to zoom into a document.
- If the mouse is over the document in the display area, you can press the **Shift key** then **click the right mouse button and drag** it. This is called the *real time* zoom and can be used both for zooming in and out.
-<div class="figure">  </div><div class="figure">  </div>
+  
## Panning a document { #panning}
@@ -256,7 +256,7 @@
- With the mouse cursor over the SVG document, **press the Shift key** and then **click and drag the left mouse button** to a new location. When you release the mouse, the document will be translated to the new mouse location.
- If you have the [thumbnail](#thumbnail) open, you can select the marker showing the current area of interest and move it to the desired location.
-<div class="figure">  </div>
+ 
## Rotating a document { #rotating}
@@ -269,4 +269,4 @@
### Thumbnail { #thumbnail}
Panning in the document window can be difficult after you have zoomed into a document because you cannot see the whole document. Panning on large documents (or with a large zoom factor) is made easy by the thumbnail that you can bring up through the **View→Thumbnail** menu item or the **Ctrl-Y** keyboard accelerator. The thumbnail shows a rectangular marker that represents the “Area of Interest”, i.e., the region currently displayed in the window (the visible portion of the document). You can **drag out a rectangular marker with the left mouse button pushed down** to select a new area of interest which will then be shown in the main window.
-<div class="figure">  </div>
\ No newline at end of file
+ 
\ No newline at end of file
diff --git a/content/batik/using/architecture.mdtext b/content/batik/using/architecture.mdtext
index 8dacb43..3c324b9 100644
--- a/content/batik/using/architecture.mdtext
+++ b/content/batik/using/architecture.mdtext
@@ -6,7 +6,7 @@
This document briefly describes the Batik architecture and the role of each of its modules. For detailed module design, you can refer to the Batik UML diagrams [Object by Design](http://opensource.objectsbydesign.com/batik/index.html) or [yWorks](http://www.yworks.com/products/yDoc/showcase/batik-1.5/).
The Batik modules are of one of three types: application modules, core modules and low level modules. The following figure illustrates these three module types.
-<div class="figure">  </div>
+ 
[Application modules](#applicationComponents) illustrate how to use the core modules and let users evaluate the Batik software by experimenting with its features.
The [Core modules](#coreComponents) are the heart of Batik and the primary deliverables for the projects. These are the modules developers use to manipulate, generate, create, convert, render and view SVG content.
diff --git a/content/batik/using/svg-generator.mdtext b/content/batik/using/svg-generator.mdtext
index 2fd9327..1052161 100644
--- a/content/batik/using/svg-generator.mdtext
+++ b/content/batik/using/svg-generator.mdtext
@@ -2,7 +2,7 @@
#SVG Generator: SVGGraphics2D
-<div class="figure">  </div>
+ 
As SVG is emerging as a promising graphics format for a wide range of domains and applications, bridging it with Java becomes important. This page explains how Batik’s [SVGGraphics2D](../javadoc/org/apache/batik/svggen/SVGGraphics2D.html), referred to as the SVG Generator, makes this possible.
## The SVGGraphics2D class { #whatIsIt}
@@ -18,7 +18,7 @@
- it offers the user the ability to use the DOM API to manipulate the generated document.
-<div class="figure">  </div>
+ 
The above figure shows how the generator works with the DOM API. The W3C has defined an API for representing XML content with a Java object. That API allows programmers to manipulate, create, and/or modify XML content in memory. The DOM API contains interfaces such as [Document](http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/Document.html), [Element](http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/Element.html), and [Attr](http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/Attr.html), which model the Java programming language equivalent of XML documents, elements and attributes.
The generator manages a tree of DOM objects that represent the SVG content corresponding to the rendering calls made on the `SVGGraphics2D` instance. In other words, every time a program invokes a rendering method, such as `fillRect`, on a `SVGGraphics2D` instance, a new DOM object, representing the SVG equivalent, is appended to the DOM tree. For example, a `rect` element will be appended after the `fillRect` method has been invoked).
