| <?xml version="1.0"?> |
| <!DOCTYPE document SYSTEM "./dtd/document-v10.dtd"> |
| |
| <!-- ========================================================================= --> |
| <!-- Copyright (C) The Apache Software Foundation. All rights reserved. --> |
| <!-- --> |
| <!-- This software is published under the terms of the Apache Software License --> |
| <!-- version 1.1, a copy of which has been included with this distribution in --> |
| <!-- the LICENSE file. --> |
| <!-- ========================================================================= --> |
| |
| <!-- ========================================================================= --> |
| <!-- author vincent.hardy@eng.sun.com --> |
| <!-- version $Id$ --> |
| <!-- ========================================================================= --> |
| |
| <document> |
| <header> |
| <title>Batik - SVG Browser</title> |
| <subtitle>A cross platform SVG Browser</subtitle> |
| <authors> |
| <person name="Vincent Hardy" email="vincent.hardy@eng.sun.com"/> |
| </authors> |
| </header> |
| |
| <body> |
| <s1 title="Introduction"> |
| <!-- <figure src="images/viewerBanner.jpg" alt="Batik Browser"/> --> |
| <p> |
| This page describes the main features of the SVG Browser that comes with Batik. |
| It discusses the following:</p> |
| <ul> |
| <li><link href="#downloading">Downloading and installing the browser</link></li> |
| <li><link href="#starting">Starting the browser</link></li> |
| <li><link href="#viewing">Viewing SVG documents</link></li> |
| <li><link href="#exportAndPrint">Printing and Converting SVG files</link></li> |
| <li><link href="#inspectingSVGSourceContent">Inspecting the SVG source</link></li> |
| <li><link href="#configuring">Configuring the SVG Browser</link></li> |
| <li><link href="#zooming">Navigating SVG documents (zooming, panning, rotating, transform, thumbnail)</link></li> |
| </ul> |
| |
| </s1> |
| |
| <anchor id="downloading" /> |
| <s1 title="Downloading the browser"> |
| |
| <p>Refer to the <link href="dist">download area</link> to find out how to |
| download Batik. Remember that you can get either the developer distribution |
| or the binary distribution.</p> |
| <p>Refer to the <link href="install.html">installation page</link> for instructions |
| on how to install the Batik download on your system.</p> |
| </s1> |
| |
| <anchor id="starting" /> |
| <s1 title="Starting the browser"> |
| <p>The method for starting the browser depends on the distribution of Batik |
| that you chose to download. The following describes how to start the browser |
| for each distribution</p> |
| |
| <s2 title="Starting the browser for the binary distribution"> |
| |
| <p>If you downloaded the binary distribution of Batik, you should have |
| gotten a file called <em>batik-1.0.zip</em>, which, when expanded, |
| created a <em>batik-svgbrowser.jar</em> file. To start the browser, |
| type the following on the command line:</p> |
| <p><em>cd <installationDirectory></em></p> |
| <p><em>java -jar batik-svgbrowser.jar</em></p> |
| <p>You can pass options to the command line:</p> |
| <p><em>java -jar batik-svgbrowser.jar [-font-size <fontSize>] [svgURL]*</em></p> |
| <p>Where:</p> |
| <ul> |
| <li><em>-font-size <fontSize></em> will make the browser use small fonts in the GUI.</li> |
| <li><em>[svgURL]*</em> the URLs for the SVG files the browser should open when it starts</li> |
| </ul> |
| <p>For example:</p> |
| <ul> |
| <li><em>java -jar batik-svgbrowser.jar -font-size 10</em> starts the browser with small fonts.</li> |
| <li><em>java -jar batik-svgbrowser.jar -font-size 10 samples/batikLogo.svg</em> starts the browser with |
| the batikLogo.svg file open (and small fonts, |
| because of -font-size)</li> |
| </ul> |
| </s2> |
| |
| <s2 title="Starting the browser for the developer distribution"> |
| |
| <p>If you downloaded the developer distrubution of Batik, you should have gotten |
| a zip file that expanded into an xml-batik directory. In that directory, you |
| can find build scripts for the platform you are running on. For example, there is |
| a build.bat script for users of the Windows platform and there is a build.sh script |
| for UNIX users.</p> |
| <p>To start the browser you should:</p><ul> |
| <li>Make sure the xml-batik directory is in your PATH environment variable</li> |
| <li>Make sure the ANT_HOME environment variable is set to the xml-batik directory</li> |
| <li>Make sure that your JAVA_HOME environment variable is set to your JDK installation |
| directory</li> |
| <li>Open a command line window and go to the xml-batik directory where the Batik |
| distribution was expanded</li> |
| <li><strong>UNIX users</strong>. If you have not done so already, make the build.sh script |
| executable:<br /> |
| <em>chmod +x build.sh</em></li> |
| <li>At the command prompt, type: <br /> |
| <strong>Windows: </strong><em>build svgbrowser</em><br /> |
| <strong>UNIX: </strong><em>build.sh svgbrowser</em><br /> |
| This will start the browser</li> |
| </ul> |
| <p>You can pass options to the browser as follows:</p> |
| <p><strong>Windows: </strong><em>build svgbrowser [-font-size <fontSize>] [svgURL]*</em></p> |
| <p><strong>UNIX: </strong><em>build.sh svgbrowser [-font-size <fontSize>] [svgURL]*</em></p> |
| <p>Refer to "Starting the browser for the binary distribution" for an explanation of these |
| options</p> |
| </s2> |
| |
| <s2 title="SVG browser screen shot"> |
| <p>The following image shows the result of starting the browser, in the binary or |
| developer distribution, with the <code>-font-size 10 samples/batikFX.svg</code> options.</p> |
| <figure src="images/svgviewerDefaultRegular.jpg" alt="Batik Browser"/> |
| |
| </s2> |
| </s1> |
| |
| <anchor id="viewing"/> |
| <s1 title="Viewing SVG Files"> |
| <p>The browser has several features to view and browse SVG files:</p> |
| <ul> |
| <li><link href="#localFile">Opening a local SVG file</link></li> |
| <li><link href="#urlFile">Opening an SVG file from the web</link></li> |
| <li><link href="#locationBar">Using the location text field to view an SVG file</link></li> |
| <li><link href="#browsing">Browsing SVG files</link></li> |
| <li><link href="#viewingMultiple">Viewing multiple SVG files</link></li> |
| </ul> |
| |
| <anchor id="localFile" /> |
| <s2 title="Opening a local SVG file"> |
| |
| <p>In situations where you have an SVG file locally on the machine where you are running the |
| Batik SVG browser, you can use the "File->Open File" menu item to open that file, or use |
| the "Ctrl-F" key accelerator. Doing so brings up a file choser that lets you select the file |
| you want to view.</p> |
| |
| <figure src="images/svgviewerFileOpen.gif" alt="File Open in SVG Browser"/> |
| |
| </s2> |
| |
| <anchor id="urlFile" /> |
| <s2 title="Opening an SVG file from the Web"> |
| |
| <p>There are many situations where the SVG content you want to view is not local to the machine |
| where the browser is running. In that case, you can use the "File->Open Page" menu item, or use |
| the "Ctrl-O" 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.</p> |
| |
| <figure src="images/svgviewerOpenPage.gif" alt="Open Page in SVG Browser"/> |
| |
| </s2> |
| |
| <anchor id="locationBar" /> |
| <s2 title="Using the location text field to view an SVG file"> |
| |
| <p>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 the SVG browser, the same way you can enter a |
| URL in an HTML browser</p> |
| |
| <figure src="images/svgviewerLocationBar.gif" alt="Location Bar in SVG Browser"/> |
| </s2> |
| |
| <anchor id="browsing" /> |
| <s2 title="Browsing SVG Files"> |
| |
| <p>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 into SVG documents, pan and rotate.</p> |
| <figure src="images/svgviewerBrowsing.gif" alt="Browsing SVG files" /> |
| <p>The Batik browser offers multiple features to help you browse SVG files:</p> |
| <ul> |
| <li><strong>Navigating between files</strong>. The "Go->Back" menu item (or the Ctrl-left arrow |
| keyboard acceleration) and the "Go->Forward" (or the Ctrl-right arrow keyboard acceleration) |
| let you move to the previous and next visited SVG documents</li> |
| <li><strong>History</strong>. The "Go" menu also contains a list of the visited SVG documents, |
| which gives you a way to randomly access any document you have already visited.</li> |
| <li><strong>Navigation between views</strong>. The "View->Previous Transform" menu item (Ctrl-L) |
| and the "View->Next Transform" menu item (Ctrl-N) let you go to the previous or next view |
| you have had of a document. This is useful when, for example, you pan or rotate and document |
| and want to go back to any previous view you had of the document (i.e., before you panned or |
| rotated it).</li> |
| </ul> |
| </s2> |
| |
| <anchor id="viewingMultiple" /> |
| <s2 title="Viewing multiple SVG files"> |
| |
| <figure src="images/svgviewerMultipleFiles.gif" alt="Viewing multiple files" /> |
| <p>The Batik SVG Browser can display multiple files simultaneously in different windows. To view a |
| new file in a separate window, simply select the "File-> Create New Window" menu item or use |
| the Ctrl-N keyboard accelerator.</p> |
| </s2> |
| |
| <s2 title="Reloading an SVG document"> |
| |
| <p>When working on an SVG document, you may want the browser to reprocess a document that you |
| have modified. The "File-> Reload Document" menu item or the Ctrl-R keyboard accelerator will cause the |
| document to be reprocessed by the browser.</p> |
| </s2> |
| </s1> |
| |
| <anchor id="exportAndPrint" /> |
| <s1 title="Exporting and Printing SVG documents"> |
| <p>The "File->Print" menu will print the currently displayed SVG document when selected.</p> |
| <p>The "File->Export As" menu offers the option to export the currently displayed SVG document |
| to various raster formats. Currently, the browser supports the PNG, JPEG and TIFF formats.</p> |
| </s1> |
| |
| <anchor id="inspectingSVGSourceContent" /> |
| <s1 title="Inspecting the SVG Source"> |
| |
| <p>The browser offers two ways to inspect the source of an |
| SVG document: viewing the plain source or viewing the |
| document tree. Both are explained hereafter.</p> |
| <anchor id="viewingSource" /> |
| <s2 title="Viewing the source"> |
| |
| <figure src="images/svgviewerViewSource.gif" alt="Viewing the source code" /> |
| <p>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.</p> |
| </s2> |
| |
| <anchor id="viewingTree" /> |
| <s2 title="Viewing the document tree"> |
| <figure src="images/svgviewerViewTree.gif" alt="Viewing the document tree" /> |
| <p>When the browser displays an SVG file, you can select the "View-> DOM Viewer..." |
| menu item or use the Ctrl-T keyboard accelerator to open a dialog that shows the SVG |
| document in the form of a tree. The dialog lets you navigate the tree, select individual |
| elements, such as a path element, and view the attributes and CSS values that apply to |
| these elements.</p> |
| </s2> |
| </s1> |
| |
| <anchor id="configuring"/> |
| <s1 title="Configuring the SVG Browser"> |
| |
| <p>The "Edit->Preferences" menu brings up the dialog box shown in the following |
| figure.</p> |
| <figure src="images/svgviewerPreferences.gif" alt="Configuring the SVG Browser" /> |
| |
| <p>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:</p> |
| <ul> |
| <li><strong>Network Options Panel</strong>. This panel lets you configure the |
| proxy server to use if you are working from behind a firewall.</li> |
| <li><strong>Languages Panel</strong>. This is the panel shown in the above |
| figure. That panel lets you select your languages. The user language can |
| be used in SVG documents to choose between alternate contents. For example, |
| open the samples/moonPhases.svg example. Then, change the user language to |
| french and reload the document (Ctrl-R). You will see that the text is now |
| displayed in french. You can do the same with Japanese and the text will be |
| shown in Japanes.</li> |
| <li><strong>Browser Options Panel</strong>. This panel lets you choose some |
| optional behaviors: |
| <ul> |
| <li>Show Rendering. When on, the browser will update the canvas |
| while processing an SVG document. This turns on progressive rendering.</li> |
| <li>Auto Adjust Window. When on, the browser window is resized to fit |
| any newly loaded document</li> |
| <li>Enable Double Buffering. When on, the browser uses additional |
| memory resources which improves the quality of effects such as zooming |
| and panning.</li> |
| <li>Show debug traces. When on, so debug messages will be printed to |
| the standard output. This is only for developers.</li> |
| </ul> |
| </li> |
| <li><strong>Stylesheet Panel</strong>. This panel lets you specify a user |
| stylesheet which can override some of the default settings in viewed SVG |
| documents. This might be useful if you want, for example, to override the |
| font size used in text elements.</li> |
| </ul> |
| </s1> |
| |
| <anchor id="zooming" /> |
| <s1 title="Navigating SVG documents: Zooming, panning, rotating, transform and thumbnail"> |
| |
| <p>The Batik browser offers multiple way to navigate SVG documents:</p> |
| <ul> |
| <li><link href="#zoomInOut">Zooming in and out</link></li> |
| <li><link href="#panning">Panning</link></li> |
| <li><link href="#rotating">Rotating</link></li> |
| <li><link href="#transform">Arbitrary Transforms</link></li> |
| <li><link href="#thumbnail">Thumbnail</link></li> |
| </ul> |
| |
| <anchor id="zoomInOut" /> |
| <s2 title="Zooming in and out"> |
| <p>There are several methods to zoom in or out an SVG Document:</p> |
| <ul> |
| <li>You can select the "View -> Zoom In/Out" menu item</li> |
| <li>You can click on the "Zoom In/Out" tool bar button (the ones that show a magnifying glass |
| with a "+/-" signs)</li> |
| <li>You can use the "Ctrl+I" and "Ctrl+O" keyboard acceleration</li> |
| <li>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.</li> |
| <li>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.</li> |
| </ul> |
| |
| <figure src="images/svgviewerZoomin.gif" alt="Zooming in an SVG document" /> |
| <figure src="images/svgviewerAOI.gif" alt="Zooming in an SVG document" /> |
| </s2> |
| |
| |
| <anchor id="panning" /> |
| <s2 title="Panning a document"> |
| <p>Some documents are too big to fit into the browser, especially when you zoom in with a |
| large zoom factor. In these circumstances, it is usefull to be able to 'move around' the |
| document and pan to view different parts of the documents. Again, there are multiple ways |
| to do this:</p> |
| <ul> |
| <li>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.</li> |
| <li>If you have the thumbnail open, you can select the marker showing the current |
| area of interest and move it to the desired location</li> |
| </ul> |
| <figure src="images/svgviewerPan.gif" alt="Panning in an SVG document" /> |
| </s2> |
| |
| <anchor id="rotating" /> |
| <s2 title="Rotating a document"> |
| <p>It is sometimes useful to be able to rotate a document (maps for example). You can |
| do this in the Batik browser by first pressing the Ctrl key and then clicking and dragging |
| the right mouse button to a new location. The browser will dynamically rotate the image |
| as you move your cursor. When you are satisfied with that angle, you can release |
| the mouse button and the document will be displayed with that new angle. |
| </p> |
| </s2> |
| |
| <anchor id="transform" /> |
| <s2 title="Using the Transform Dialog"> |
| |
| <p>While the mouse and keyboard interactions give interactive way to navigate an |
| SVG document, it is sometimes desirable to be able to define precisely the |
| amount of zoom, pan or rotation desired. The Transform dialog, available through |
| the "View->Transform" (Ctrl-S) menu offers that feature.</p> |
| </s2> |
| |
| <anchor id="thumbnail" /> |
| <s2 title="Thumbnail"> |
| <p>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 Ctrl-Y keyboard acceleration. 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 that little marker with the left mouse button and drag it to another area |
| of interest to view a different portion of the document in the main window.</p> |
| <figure src="images/svgviewerThumbnail.gif" alt="SVG Browser Thumbnail" /> |
| </s2> |
| </s1> |
| |
| </body> |
| </document> |
