SVG Browser

Batik includes a full-featured SVG Browser called Squiggle. Squiggle can load and display SVG documents. It can display multiple documents at once, display the source of the document, and save the content of the document as a JPEG, PNG, or TIFF. It can also print SVG documents to a printer and generate thumbnail images. To run Squiggle, you need to execute the following command:

java –jar batik-squiggle.jar [-font-size ] [ SVG URL ]

As usual, this command assumes that batik-squiggle.jar is in the current directory. If it isn’t, supply the full path to the jar file. If you like, you can specify the size of fonts using the -font-size option. You can also supply the URL of an SVG document, although this isn’t necessary. Squiggle provides a number of different ways for you to open an SVG document using the File menu. You can open files from the filesystem or from the Internet without any problems.

Squiggle also allows you to manipulate the image in the browser. You can zoom the document in or out (hold Ctrl and use the left mouse button to drag out a rectangle of the area you want to zoom into) and pan it left or right (by holding down the Shift key and dragging with the mouse). You can also rotate the document by holding the Ctrl key and dragging with the right mouse button. The following figure shows the effect of rotating an SVG file. You can also specify a transform very precisely by opening the transform dialog (with Ctrl-E), where you can type the exact values you want for a transformation.

As an aid to debugging, Squiggle lets you view the source of the SVG document you are currently working with. The text editor view is similar to the view you’d get if you did a View Source in your favorite Web browser. Squiggle also provides a structured DOM tree inspector that lets you examine the SVG DOM tree your document is using. The inspector shows a tree control that represents the structure of the DOM, and panels that show all the attributes attached to the particular element you’re looking at. This is easier to use when you need to make sure the correct values were set on the correct attributes. This figure shows the DOM inspector in action: