| <?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 Viewer</title> |
| <subtitle>A cross platform SVG Viewer</subtitle> |
| <authors> |
| <person name="Vincent Hardy" email="vincent.hardy@eng.sun.com"/> |
| </authors> |
| </header> |
| |
| <body> |
| <s1 title="Introduction"> |
| <figure src="images/viewer.jpg" alt="Batik Viewer"/> |
| <p> |
| This page describes the main features of the SVG Viewer that comes with Batik. |
| It discusses the following:</p> |
| <ul> |
| <li><link href="#downloading">Downloading the viewer</link></li> |
| <li><link href="#starting">Starting the viewer</link></li> |
| <li><link href="#viewing">Viewing an SVG file</link></li> |
| <li><link href="#viewingMultiple">Viewing multiple SVG files</link></li> |
| <li><link href="#viewingSource">Viewing the source</link></li> |
| <li><link href="#viewingTree">Viewing the document tree</link></li> |
| <li><link href="#zooming">Zooming, panning and rotating documents. Thumbnail</link></li> |
| </ul> |
| |
| </s1> |
| |
| <anchor id="downloading" /> |
| <s1 title="Downloading the viewer"> |
| |
| <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> |
| </s1> |
| |
| <anchor id="starting" /> |
| <s1 title="Starting the viewer"> |
| <p>The method for starting the viewer depends on the distribution of Batik |
| that you chose to download. The following describes how to start the viewer |
| for each distribution</p> |
| |
| <s2 title="Starting the viewer for the binary distribution"> |
| |
| <p>If you downloaded the binary distribution of Batik, you should have |
| gotten a file called <em>batik-1.0beta.zip</em>, which, when expanded, |
| created a <em>batik-svgviewer.jar</em> file. To start the viewer, |
| type the following on the command line:</p> |
| <p><em>cd <installationDirectory></em></p> |
| <p><em>java -jar batik-svgviewer.jar</em></p> |
| <p>You can pass options to the command line:</p> |
| <p><em>java -jar batik-svgviewer.jar [-sf] [-lnf [lookAndFeelName]] [svgURL]</em></p> |
| <p>Where:</p> |
| <ul> |
| <li><em>-sf</em> will make the viewer use small fonts in the GUI.</li> |
| <li><em>-lnf [lookAndFeelName]</em> will make the user use the [lookAndFeelName] look |
| and feel, which must be a Swing Look and Feel.</li> |
| <li><em>[svgURL]</em> the URL for the SVG file the viewer should open when it starts</li> |
| </ul> |
| <p>For example:</p> |
| <ul> |
| <li><em>java -jar batik-svgviewer.jar -sf</em> starts the viewer with small fonts.</li> |
| <li><em>java -jar batik-svgviewer.jar -lnf com.sun.java.swing.plaf.motif.MotifLookAndFeel</em> starts the viewer with |
| the Motif look and feel. The default look and feel is Metal, the default Swing look and feel</li> |
| <li><em>java -jar batik-svgviewer.jar -sf samples/batikLogo.svg</em> starts the viewer with |
| the batikLogo.svg file open (and small fonts, |
| because of -sf)</li> |
| </ul> |
| </s2> |
| |
| <s2 title="Starting the viewer for the developer distribution"> |
| |
| <p>If you downloaded the developer distrubution of Batik, you should have gotten |
| a zip or tar 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 viewer 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 svgviewer</em><br /> |
| <strong>UNIX: </strong><em>build.sh svgviewer</em><br /> |
| This will start the viewer</li> |
| </ul> |
| <p>You can pass options to the viewer as follows:</p> |
| <p><strong>Windows: </strong><em>build svgviewer -Dargs="[-sf] [-lnf [lookAndFeelName]] [svgURL]"</em></p> |
| <p><strong>UNIX: </strong><em>build.sh svgviewer -Dargs="[-sf] [-lnf [lookAndFeelName]] [svgURL]"</em></p> |
| <p>Refer to "Starting the viewer for the binary distribution" for an explanation of these |
| options</p> |
| </s2> |
| |
| <s2 title="SVG viewer screen shot"> |
| |
| <figure src="images/svgviewerDefaultRegular.jpg" alt="Batik Viewer"/> |
| |
| </s2> |
| </s1> |
| |
| <anchor id="viewing"/> |
| <s1 title="Viewing an SVG file"> |
| <p>There are several ways to view an SVG file. The following sections explain each method</p> |
| |
| <s2 title="Opening a local SVG file"> |
| |
| <figure src="images/svgviewerFileOpen.gif" alt="File Open in SVG Viewer"/> |
| <p>In situations where you have an SVG file locally on the machine where you are running the |
| Batik SVG viewer, you can use the "File->File Open" 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> |
| |
| </s2> |
| |
| <s2 title="Opening an SVG file from the Web"> |
| |
| <figure src="images/svgviewerOpenPage.gif" alt="Open Page in SVG Viewer"/> |
| <p>There are many situations where the SVG content you want to view is not local to the machine |
| where the viewer 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> |
| |
| </s2> |
| |
| <s2 title="Using the location text field to view an SVG file"> |
| |
| <figure src="images/svgviewerLocationBar.gif" alt="Location Bar in SVG Viewer"/> |
| <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 viewer, the same way you can enter a |
| URL in an HTML browser</p> |
| |
| </s2> |
| |
| <s2 title="Setting up a proxy server for the Batik SVG viewer"> |
| |
| <p>When you are accessing the Web through a firewall and the SVG content you want to |
| access is on the Web, you will need to use a proxy server to access that content, |
| the same way you need to set up a proxy server for your HTML browser. </p> |
| <p>For users of the binary distribution, you need to type, at the command prompt:</p> |
| <p><em>java -Dhttp.proxyHost=<proxyHost> -Dhttp.proxyPort=<proxyPort> -jar batik-svgviewer.jar</em></p> |
| <p>For example, if your proxy is firewall.eng.mycompany.com on port 8080:</p> |
| <p><em>java -Dhttp.proxyHost=firewall.eng.mycompany.com -Dhttp.proxyPort=8080 -jar batik-svgviewer.jar</em></p> |
| <p /> |
| <p>For users of the developer distribution, you need to edit the <em>build.xml</em> file |
| in the root directory to set the equivalent properties:</p> |
| <source> |
| <java fork="yes" |
| classname="${class-prefix}.apps.svgviewer.Main" |
| jvmargs="-DproxyHost=firewall.eng.mycompany.com -DproxyPort=8080"> |
| <classpath> |
| <pathelement location="${dest}" /> |
| <path refid="libs-classpath"/> |
| <pathelement location="resources" /> |
| </classpath> |
| <arg value="${args}"/> |
| </java> |
| </source> |
| </s2> |
| |
| </s1> |
| |
| <anchor id="viewingMultiple" /> |
| <s1 title="Viewing multiple SVG files"> |
| |
| <figure src="images/svgviewerMultipleFiles.gif" alt="Viewing multiple files" /> |
| <p>The Batik SVG Viewer 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.</p> |
| </s1> |
| |
| <anchor id="viewingSource" /> |
| <s1 title="Viewing the source"> |
| |
| <figure src="images/svgviewerViewSource.gif" alt="Viewing the source code" /> |
| <p>When the viewer 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> |
| </s1> |
| |
| <anchor id="viewingTree" /> |
| <s1 title="Viewing the document tree"> |
| <figure src="images/svgviewerViewTree.gif" alt="Viewing the document tree" /> |
| <p>When the viewer displays an SVG file, you can select the "View-> View Document Tree..." |
| 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 filter element, and view the attributes and CSS values that apply to |
| these elements.</p> |
| </s1> |
| |
| <anchor id="zooming" /> |
| <s1 title="Zooming, panning and rotating documents"> |
| |
| <s2 title="Zooming in"> |
| <figure src="images/svgviewerZoomin.gif" alt="Zooming in an SVG document" /> |
| <figure src="images/svgviewerAOI.gif" alt="Zooming in an SVG document" /> |
| <p>There are several methods to zoom in an SVG Document:</p> |
| <ul> |
| <li>You can select the "View -> Zoom In" menu item</li> |
| <li>You can click on the "Zoom In" tool bar button (the one that shows a magnifying glass |
| with a "+" sign)</li> |
| <li>You can use the "Ctrl+Shift+P" 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</li> |
| </ul> |
| </s2> |
| |
| |
| <s2 title="Zooming out"> |
| <figure src="images/svgviewerZoomout.gif" alt="Zooming out an SVG document" /> |
| <p>There are several methods to zoom out in an SVG Document:</p> |
| <ul> |
| <li>You can select the "View -> Zoom Out" menu item</li> |
| <li>You can click on the "Zoom Out" tool bar buttom (the one that shows a magnifying glass |
| with a "-" sign)</li> |
| <li>You can use the "Ctrl+Shift+O" keyboard acceleration</li> |
| </ul> |
| </s2> |
| |
| <s2 title="Restoring the original size of a document"> |
| <figure src="images/svgviewerZoomRestore.gif" alt="Restoring the initial zoom in an SVG document" /> |
| <p>Sometimes, after zooming, panning and rotating a document, it is useful to be able |
| to restore its original size, i.e., view it as it was first loaded:</p> |
| <ul> |
| <li>You can select the "View -> Initial Zoom" menu item</li> |
| <li>You can click on the "Initial Zoom" tool bar buttom (the one that shows a square with four |
| arrows pointing in the North, East, South and West directions)</li> |
| <li>You can use the "Ctrl+1" keyboard acceleration</li> |
| </ul> |
| </s2> |
| |
| |
| <s2 title="Panning a document"> |
| <figure src="images/svgviewerPan.gif" alt="Panning in an SVG document" /> |
| <p>Some documents are too big to fit into the viewer, 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 market showing the current |
| area of interest and move it to the desired location</li> |
| </ul> |
| </s2> |
| |
| <s2 title="Rotating a document"> |
| <figure src="images/svgviewerRotate.gif" alt="Rotating an SVG document" /> |
| <p>It is sometimes useful to be able to rotate a document (maps for example). You can |
| do this in the Batik viewer by first pressing the Ctrl key and then clicking and dragging |
| the left mouse button to a new location. A marker will show the rotation angle corresponding |
| to the new mouse cursor location. When you are satisfied with that angle, you can release |
| the mouse button and the document will be displayed with the rotation you have specified. |
| </p> |
| </s2> |
| |
| <s2 title="Thumbnail"> |
| <figure src="images/svgviewerThumbnail.gif" alt="SVG Viewer 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 -> View Document Thumbnail" menu item or Ctrl-O 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 grag 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> |
| </s2> |
| </s1> |
| |
| </body> |
| </document> |
