You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@xmlgraphics.apache.org by bu...@apache.org on 2012/04/15 07:46:24 UTC
svn commit: r813020 [5/8] - in /websites/staging/xmlgraphics/trunk/content:
./ batik/ batik/demo/ batik/dev/ batik/tools/ batik/using/
batik/using/scripting/
Added: websites/staging/xmlgraphics/trunk/content/batik/tools/browser.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/tools/browser.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/tools/browser.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,269 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>Squiggle, the SVG Browser</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>Squiggle, the SVG Browser</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a> » <a href="/batik/tools/">Tools</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><p>This page describes the main features of Squiggle, the SVG browser that comes with Batik.</p>
+<h1 id="downloading">Downloading the browser</h1>
+<p>Refer to the <a href="../download.cgi">download page</a> to find out how to download Batik. Refer to the <a href="../install.html">installation page</a> for instructions on how to install the Batik download on your system.</p>
+<h1 id="starting">Starting the browser</h1>
+<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 (binary and source).</p>
+<h2 id="starting-binary">Starting the browser for the binary distribution</h2>
+<p>If you downloaded the <a href="../install.html#distributions">binary distribution</a> of Batik, you should have a file called <code>batik-1.6.zip</code> (or similar), which, when expanded, created a <code>batik-squiggle.jar</code> file. To start the browser, type the following on the command line:
+cd installation-directory
+java -jar batik-squiggle.jar
+You can pass options on the command line:
+java -jar batik-squiggle.jar [-font-sizefont-size] [URIs]
+where:</p>
+<dl>
+<dt><strong>-font-size</strong> <em>font-size</em></dt>
+<dd>specifies the font size to use in windows and menus, and</dd>
+<dt><em>[URIs]</em></dt>
+<dd>specifies the URIs for the SVG documents the browser should open when it starts.</dd>
+</dl>
+<p>For example:
+java -jar batik-squiggle.jar -font-size 10
+starts the browser with a small widget text font size, and:
+java -jar batik-squiggle.jar -font-size 10 samples/batikLogo.svg
+starts the browser with the <code>batikLogo.svg</code> file open and uses a small widget text font size.</p>
+<p>If you are using Mac OS X, and you have generated the Squiggle application bundle, you can use its icon to start the browser. This is the preferred way to start the browser under Mac OS X, as it ensures better integration with the operating system (a nicer looking menu and dock icon).</p>
+<h2 id="starting-source">Starting the browser for the source distribution</h2>
+<p>If you downloaded the <a href="../install.html#distributions">source distribution</a> of Batik, you should have a zip file called <code>batik-src-1.6.zip</code> (or similar) that expanded into a directory called <code>xml-batik</code> or<code>batik- <em>version</em> </code>. In that directory, you can find build scripts for the platform you are running on. For example, there is a <code>build.bat</code> script for users of the Windows platform and there is a <code>build.sh</code> script for UNIX users.</p>
+<p>To start the browser you should:</p>
+<ul>
+<li>
+<p>Make sure that your <code>JAVA_HOME</code> environment variable is set to your JDK installation directory</p>
+</li>
+<li>
+<p>Open a command line window and change to the <code>xml-batik</code> or<code>batik- <em>version</em> </code>directory where the Batik distribution was expanded</p>
+</li>
+<li>
+<p>For Windows, type the following at the command prompt:
+build squiggle
+and for Unix and Mac OS X:
+./build.sh squiggle
+This will start the browser.</p>
+</li>
+</ul>
+<p>You can pass options to the browser as follows, for Windows:
+build squiggle [-font-sizefont-size] [URIs]
+and for Unix:
+./build.sh squiggle [-font-sizefont-size] [URIs]
+Refer to <a href="#starting-binary">âStarting the browser for the binary distributionâ</a> for an explanation of these options.</p>
+<p>Note that the number of files that can be opened on Windows from the command line is limited because batch files take at most 9 parameters.</p>
+<h2 id="screenshot">Squiggle screenshot</h2>
+<p>The following image shows the result of starting the browser, from the binary or source distribution, with the <code>-font-size 10
+ samples/batikFX.svg</code> options.
+<div class="figure"> <img alt="Screenshot of Squiggle showing the batikFX.svg sample" src="images/svgviewerDefaultRegular.png" title="" /> </div></p>
+<h1 id="viewing">Viewing SVG documents</h1>
+<p>The browser has several features to view and browse SVG documents:</p>
+<ul>
+<li>
+<p><a href="#localFile">Opening a local SVG file</a> </p>
+</li>
+<li>
+<p><a href="#urlFile">Opening an SVG file from the web</a> </p>
+</li>
+<li>
+<p><a href="#locationBar">Using the location text field to view an SVG file</a> </p>
+</li>
+<li>
+<p><a href="#browsing">Browsing SVG files</a> </p>
+</li>
+<li>
+<p><a href="#viewingMultiple">Viewing multiple SVG files</a> </p>
+</li>
+</ul>
+<h2 id="localFile">Opening a local SVG file</h2>
+<p>In situations where you want to open SVG files locally on the machine where you are running Squiggle, you can use <strong>FileâOpen File</strong> menu item to open that file, or use the <strong>Ctrl-F</strong> key accelerator. Doing so brings up a file chooser that lets you select the file you want to view.
+<div class="figure"> <img alt="Screenshot of Squiggle showing the 'FileâOpen' menu and file chooser" src="images/svgviewerFileOpen.png" title="" /> </div></p>
+<h2 id="urlFile">Opening an SVG file from the web</h2>
+<p>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 <strong>FileâOpen Location</strong> menu item, or use the <strong>Ctrl-A</strong> 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"> <img alt="Screenshot of Squiggle showing the 'FileâOpen Location' menu and window" src="images/svgviewerOpenPage.png" title="" /> </div></p>
+<h2 id="locationBar">Using the location bar text field to view an SVG file</h2>
+<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 Squiggle, the same way you can enter a URL in an HTML browser.
+<div class="figure"> <img alt="Screenshot of Squiggle showing the location bar" src="images/svgviewerLocationBar.png" title="" /> </div></p>
+<h2 id="browsing">Browsing SVG files</h2>
+<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 <a href="#zoomInOut">zoom</a> into SVG documents, <a href="#panning">pan</a> and <a href="#rotating">rotate</a> .
+<div class="figure"> <img alt="Screnshot of Squiggle showing the 'Go' menu" src="images/svgviewerBrowsing.png" title="" /> </div>
+Squiggle offers multiple features to help you browse SVG files:</p>
+<dl>
+<dt>Navigating between files</dt>
+<dd>The <strong>GoâBack</strong> menu item (or the <strong>Ctrl-left arrow</strong> keyboard accelerator) and the <strong>GoâForward</strong> menu item (or the <strong>Ctrl-right arrow</strong> keyboard accelerator) let you move to the previous and next visited SVG documents.</dd>
+<dt>History</dt>
+<dd>The <strong>Go</strong> menu also contains a list of previously viewed SVG documents, which gives you a way to randomly access any document you have already visited.</dd>
+<dt>Navigating between views</dt>
+<dd>The <strong>ViewâPrevious Transform</strong> menu item ( <strong>Ctrl-K</strong> ) and the <strong>ViewâNext Transform</strong> menu item ( <strong>Ctrl-L</strong> ) let you go to the previous or next view of the document. This is useful when, for example, you <a href="#panning">pan</a> or <a href="#rotating">rotate</a> the document and want to go back to the previous view you had of the document (i.e., before you panned or rotated it).</dd>
+</dl>
+<h2 id="viewingMultiple">Viewing multiple SVG files</h2>
+<p><div class="figure"> <img alt="Screenshot of Squiggle with two windows open" src="images/svgviewerMultipleFiles.png" title="" /> </div>
+Squiggle can display multiple files simultaneously in different windows. To view a new file in a separate window, simply select the <strong>FileâNew Window</strong> menu item or use the <strong>Ctrl-N</strong> keyboard accelerator.</p>
+<h2 id="reloading">Reloading an SVG document</h2>
+<p>When working on an SVG document, you may want the browser to reprocess a document that you have modified. The <strong>FileâReload Document</strong> menu item or the <strong>Ctrl-R</strong> keyboard accelerator will cause the document to be reprocessed by the browser.</p>
+<h1 id="exportAndPrint">Exporting and printing SVG documents</h1>
+<p>The <strong>FileâPrint</strong> menu item or <strong>Ctrl-P</strong> will print the currently displayed SVG document.</p>
+<p>The <strong>FileâExport As</strong> menu item offers the option to export the currently displayed SVG document to various raster formats. Currently, the browser supports the<abbr title="Portable Network Graphics">PNG</abbr>,<abbr title="Joint Photographic Expert Group">JPEG</abbr>and<abbr title="Tagged Image File Format">TIFF</abbr>formats.</p>
+<h1 id="inspecting">Inspecting the SVG source</h1>
+<p>The browser offers two ways to inspect the source of an SVG document: <a href="#viewingSource">viewing the plain source</a> or <a href="#viewingTree">viewing the document tree</a> . Both are explained below.</p>
+<h2 id="viewingSource">Viewing the source</h2>
+<p><div class="figure"> <img alt="Screenshot of Squiggle showing the 'ViewâView Source' menu item and the source window" src="images/svgviewerViewSource.png" title="" /> </div>
+When the browser displays an SVG file, you can select the <strong>ViewâView Source...</strong> menu item or use the <strong>Ctrl-U</strong> keyboard accelerator to view the source code.</p>
+<h2 id="viewingTree">Viewing the document tree</h2>
+<p><div class="figure"> <img alt="Screenshot of Squiggle showing the 'ViewâDOM Viewer...' menu item and the DOM viewer window" src="images/svgviewerViewTree.png" title="" /> </div>
+When the browser displays an SVG file, you can select the <strong>ViewâDOM Viewer...</strong> menu item or use the <strong>Ctrl-D</strong> 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.</p>
+<h1 id="configuring">Configuring Squiggle</h1>
+<p>The <strong>EditâPreferences</strong> menu item or <strong>Ctrl-G</strong> brings up the dialog box shown in the following figure.
+<div class="figure"> <img alt="Screenshot of Squiggle with the Preferences window open" src="images/svgviewerPreferences.png" title="" /> </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:</p>
+<dl>
+<dt>General panel</dt>
+<dd>This panel lets you choose some optional behavior:</dd>
+<dt>Enable double buffering</dt>
+<dd>When on, the browser uses additional memory resources which improves the quality of effects such as zooming and panning.</dd>
+<dt>Show Rendering</dt>
+<dd>When on, the browser will update the canvas while processing an SVG document. This turns on progressive rendering.</dd>
+<dt>Automatically resize window to document size</dt>
+<dd>When on, the browser window is resized to fit any newly loaded document.</dd>
+<dt>Animation rate limiting</dt>
+<dd>This set of radio buttons determines how often animation updates are performed. This can be set as a maximum percentage of CPU time to use, a maximum number of frames per second, or to perform as many updates as possible (unlimited).</dd>
+<dt>Print debugging information to console</dt>
+<dd>When on, some debug messages will be printed to the standard output. This is will likely interest only developers.</dd>
+<dt>Use a validating XML parser</dt>
+<dd>When on, the XML parser used to load documents will be in validating mode. This means that the document will be validated against the DTD when it is loaded, and external DTD subsets will be fetched.</dd>
+<dt>Security panel</dt>
+<dd>This panel has options relating to the script and resource access in documents.</dd>
+<dt>Language panel</dt>
+<dd>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 <code>samples/moonPhases.svg</code> example. Then, change the user language to French and <a href="#reloading">reload</a> the document ( <strong>Ctrl-R</strong> ). 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 Japanese.</dd>
+<dt>Stylesheet panel</dt>
+<dd>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.</dd>
+<dt>Network panel</dt>
+<dd>This panel lets you configure the proxy server to use if you are working from behind a firewall.</dd>
+</dl>
+<h1 id="zooming">Navigating SVG documents: zooming, panning, rotating, transform and thumbnail</h1>
+<p>The Batik browser offers multiple way to navigate SVG documents:</p>
+<ul>
+<li>
+<p><a href="#zoomInOut">Zooming in and out</a> </p>
+</li>
+<li>
+<p><a href="#panning">Panning</a> </p>
+</li>
+<li>
+<p><a href="#rotating">Rotating</a> </p>
+</li>
+<li>
+<p><a href="#transform">Arbitrary transforms</a> </p>
+</li>
+<li>
+<p><a href="#thumbnail">Thumbnail</a> </p>
+</li>
+</ul>
+<h2 id="zoomInOut">Zooming in and out</h2>
+<p>There are several methods to zoom in or out an SVG document:</p>
+<ul>
+<li>
+<p>You can select the <strong>ViewâZoom In</strong> or <strong>ViewâZoom Out</strong> menu item.</p>
+</li>
+<li>
+<p>You can <strong>click</strong> on the <strong>Zoom In/Out</strong> tool bar buttons (the ones that show a magnifying glass with <strong>+/-</strong> signs).</p>
+</li>
+<li>
+<p>You can use the <strong>Ctrl+I</strong> and <strong>Ctrl+O</strong> keyboard accelerators.</p>
+</li>
+<li>
+<p>If the mouse is over the document in the display area, you can press the <strong>Ctrl key</strong> then <strong>click the left mouse button and drag</strong> to select the area of interest in the document. This can only be used to zoom into a document.</p>
+</li>
+<li>
+<p>If the mouse is over the document in the display area, you can press the <strong>Shift key</strong> then <strong>click the right mouse button and drag</strong> it. This is called the <em>real time</em> zoom and can be used both for zooming in and out.
+<div class="figure"> <img alt="Screenshot of Squiggle showing the Zoom In and Zoom Out menu items and tool bar buttons" src="images/svgviewerZoomin.png" title="" /> </div><div class="figure"> <img alt="Screenshot of Squiggle zooming to an area of interest" src="images/svgviewerAOI.png" title="" /> </div><anchor id="panning"></anchor></p>
+</li>
+</ul>
+<h2 id="panning">Panning a document</h2>
+<p>Some documents are too big to fit into the browser, especially when you <a href="#zoomInOut">zoom</a> in with a large zoom factor. In these circumstances, it is useful 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>
+<p>With the mouse cursor over the SVG document, <strong>press the Shift key</strong> and then <strong>click and drag the left mouse button</strong> to a new location. When you release the mouse, the document will be translated to the new mouse location.</p>
+</li>
+<li>
+<p>If you have the <a href="#thumbnail">thumbnail</a> open, you can select the marker showing the current area of interest and move it to the desired location.
+<div class="figure"> <img alt="Screenshot of Squiggle illustrating the panning gesture" src="images/svgviewerPan.png" title="" /> </div></p>
+</li>
+</ul>
+<h2 id="rotating">Rotating a document</h2>
+<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 <strong>Ctrl key</strong> and then <strong>clicking and dragging the right mouse button</strong> 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>
+<h2 id="transform">Using the Transform dialog</h2>
+<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 <a href="#zoomInOut">zoom</a> , <a href="#panning">pan</a> or <a href="#rotating">rotation</a> desired. The Transform dialog, available through the <strong>ViewâTransform</strong> menu ( <strong>Ctrl-E</strong> ) offers that feature.</p>
+<h2 id="thumbnail">Thumbnail</h2>
+<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 <strong>ViewâThumbnail</strong> menu item or the <strong>Ctrl-Y</strong> 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 <strong>drag out a rectangular marker with the left mouse button pushed down</strong> to select a new area of interest which will then be shown in the main window.
+<div class="figure"> <img alt="Screenshot of Squiggle showing the Thumbnail window" src="images/svgviewerThumbnail.png" title="" /> </div></p></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
Added: websites/staging/xmlgraphics/trunk/content/batik/tools/font-converter.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/tools/font-converter.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/tools/font-converter.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,108 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>SVG Font Converter</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>SVG Font Converter</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a> » <a href="/batik/tools/">Tools</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><p>The TrueType Font to SVG ( <code>ttf2svg</code> ) application lets you convert a range of characters from a TrueType Font into the SVG font format.</p>
+<h1 id="running">Running the font converter</h1>
+<p>If you are using the Batik binary distribution, type the following at the command line:
+java -jar batik-ttf2svg.jar OPTIONS
+If you are using the Batik source distribution, type the following at the command line:
+build ttf2svg OPTIONS
+In both cases, the options are the same:
+ttf-path[-lrange-begin] [-hrange-end] [-autorange] [-ascii] [-idid] [-ooutput-path] [-testcard]
+where:</p>
+<dl>
+<dt><em>ttf-path</em></dt>
+<dd>specifies the TrueType Font file containing the characters to be converted,</dd>
+<dt><strong>-l</strong> <em>range-begin</em> <strong>-h</strong> <em>range-end</em></dt>
+<dd>specifies the range of characters (by codepoint, in decimal) to be converted,</dd>
+<dt><strong>-autorange</strong></dt>
+<dd>automatically determines the available character range, instead of using the default, ASCII printable characters (ranging from 32 to 126),</dd>
+<dt><strong>-ascii</strong></dt>
+<dd>forces usage of the ASCII character map in the font, instead of the Unicode character map,</dd>
+<dt><strong>-id</strong> <em>id</em></dt>
+<dd>specifies the value for the <code>id</code> attribute of the generated <code>font</code> element,</dd>
+<dt><strong>-o</strong> <em>output-path</em></dt>
+<dd>specifies the pathname of the output SVG document containing the generated SVG font, and</dd>
+<dt><strong>-testcard</strong></dt>
+<dd>specifies that a sequence of SVG <code>text</code> elements should be appended to the output SVG file to test the characters in the SVG font, providing an easy way to validate that generated SVG font visually.</dd>
+</dl>
+<p>For example:
+java -jar batik-ttf2svg.jar /usr/home/myFont.ttf -l 48 -h 57 -id MySVGFont -o mySVGFont.svg -testcard
+will convert characters 48 to 57, i.e., <code>'0'</code> to <code>'9'</code> , in the <code>myFont.ttf</code> file into their SVG equivalent in the <code>mySVGFont.svg</code> file, appending a test card so that the font can be visualized.
+<anchor id="useCases"></anchor></p>
+<h1 id="use-cases">Use cases</h1>
+<p>The TrueType Font converter application is helpful to be able to embed font definitions in SVG files. This will ensure that the SVG document will look exactly the same on all platform by not relying on system fonts.</p>
+<p>Note that users of the tool should make sure that they have the right to embed the font before embedding it in an SVG file and should refer to the font license for information. Note that TrueType Font files contain a flag that defines the âembeddabilityâ of a font and there are tools for checking that flag.</p></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
Added: websites/staging/xmlgraphics/trunk/content/batik/tools/index.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/tools/index.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/tools/index.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>About the tools</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>About the tools</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a> » <a href="/batik/tools/">Tools</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><p>The Batik distribution contains several pre-packaged demos:</p>
+<dl>
+<dt>Squiggle SVG Browser</dt>
+<dd>The <a href="../tools/browser.html">Squiggle SVG Browser</a> lets you view SVG file, zoom, pan and rotate in the content and select text items in the image and much more.</dd>
+<dt>SVG Rasterizer</dt>
+<dd>The <a href="../tools/rasterizer.html">SVG Rasterizer</a> is a utility that can convert SVG files to a raster format. The tool can convert individual files or sets of files, making it easy to convert entire directories of SVG files. The supported formats are JPEG,<abbr title="Portable Network Graphics">PNG</abbr>, and<abbr title="Tagged Image File Format">TIFF</abbr>, however the design allows new formats to be added easily. In addition (and despite the name) the rasterizer tool can also convert SVG files into<abbr title="Portable Document Format">PDF</abbr>.</dd>
+<dt>SVG Font Converter</dt>
+<dd>The <a href="../tools/font-converter.html">SVG Font Converter</a> lets developers convert character ranges from the True Type Font format to the SVG Font format to embed in SVG documents. This allows SVG document to be fully self-contained and have their rendered identically on all systems.</dd>
+<dt>SVG Pretty Printer</dt>
+<dd>The <a href="../tools/pretty-printer.html">SVG Pretty Printer</a> lets developers âpretty-upâ their SVG files and get their tabulations and other cosmetic parameters in order. It can also be used to modify the DOCTYPE declaration on SVG files.</dd>
+</dl></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
Added: websites/staging/xmlgraphics/trunk/content/batik/tools/pretty-printer.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/tools/pretty-printer.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/tools/pretty-printer.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,135 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>SVG Pretty Printer</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>SVG Pretty Printer</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a> » <a href="/batik/tools/">Tools</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><p>This page describes the features of the SVG pretty printer utility that comes with the Batik distribution. The SVG pretty printer is a utility that can format SVG files. The tool formats an SVG document according to the arguments passed on the command line.</p>
+<h1 id="downloading">Downloading the pretty printer</h1>
+<p>Refer to the <a href="../install.html">install page</a> and the <a href="../download.cgi">download page</a> to find out what to download and how to download it. Remember that you can get either the source or binary distribution.</p>
+<h1 id="using">Pretty printing an SVG file</h1>
+<p>The method for starting the pretty-printer depends on the distribution of Batik that you chose to download. The following describes how to run the pretty printer for each distribution.</p>
+<h2 id="using-binary">Using the binary distribution</h2>
+<p>If you downloaded the binary distribution of Batik, you should have a file called <code>batik-1.6.zip</code> (or similar), and, after expanding that file, a jar file called <code>batik-svgpp.jar</code> . To start the pretty printer, open a console, change to the directory where you expanded the distribution (and where <code>batik-svgpp.jar</code> is located) and simply type the following at the command prompt:
+java -jar batik-svgpp.jar [OPTIONS] FILES
+For example, if you type:</p>
+<p><code>java -jar batik-svgpp.jar samples/batikFX.svg</code> </p>
+<p>you will see the indented document written to standard output.</p>
+<p>For the options:</p>
+<dl>
+<dt><strong>-newline cr</strong> <em>|</em> <strong>cr-lf</strong> <em>|</em> <strong>lf</strong></dt>
+<dd>specifies the newline character(s) generated in the printed document, the default being <code>lf</code> (Unix-style newlines),</dd>
+<dt><strong>-tab-width</strong> <em>number</em></dt>
+<dd>specifies the tabulation width, the default being 4,</dd>
+<dt><strong>-doc-width</strong> <em>number</em></dt>
+<dd>specifies the maximum number of columns for the whole document, the default being 80,</dd>
+<dt><strong>-no-format</strong></dt>
+<dd>specifies that the current indentation should be preserved, useful for performing doctype or newline substitutions,</dd>
+<dt><strong>-xml-decl</strong> <em>string</em></dt>
+<dd>specifies the XML declaration,</dd>
+<dt><strong>-doctype change</strong> <em>|</em> <strong>remove</strong></dt>
+<dd>specifies whether the doctype should be changed or removed,</dd>
+<dt><strong>-publid-id</strong> <em>string</em></dt>
+<dd>specifies the public ID to in the doctype declaration, when <code>-doctype change</code> is specified, and</dd>
+<dt><strong>-system-id</strong> <em>string</em></dt>
+<dd>specifies the system ID to in the doctype declaration, when <code>-doctype change</code> is specified.</dd>
+</dl>
+<p>For example:
+java -jar batik-svgpp.jar -tab-width 2 -newline cr-lf src.svg dest.svg
+will format <code>src.svg</code> and write it to <code>dest.svg</code> using a tabulation width of 2 and Windows-style newlines, and:
+java -jar batik-svgpp.jar -no-format -doctype change -public-id "-//W3C//DTD SVG 1.1//EN" \
+ -system-id "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" src.svg dest.svg
+will format <code>src.svg</code> and write it to <code>dest.svg</code> unchanged, except for the doctype public and system IDs, which will be replaced by those specified.</p>
+<h2 id="using-source">Using the source distribution</h2>
+<p>If you downloaded the source distribution of Batik, you will have a zip or tar file that expanded into a directory called <code>xml-batik</code> or<code>batik- <em>version</em> </code>. In that directory, you can find build scripts for the platform you are running on. For example, there is a <code>build.bat</code> script for users of the Windows platform and there is a <code>build.sh</code> script for UNIX users.</p>
+<p>To start the pretty printer you should:</p>
+<ul>
+<li>
+<p>Make sure that your <code>JAVA_HOME</code> environment variable is set to your JDK installation directory.</p>
+</li>
+<li>
+<p>Open a command line window and go to the <code>xml-batik</code> or<code>batik- <em>version</em> </code>directory where the Batik distribution was expanded.</p>
+</li>
+<li>
+<p>For windows, type the following at the command prompt:
+build svgpp
+and for Unix:
+./build.sh svgpp
+This will print out a help message for the pretty printer.</p>
+</li>
+</ul>
+<p>You can pass options to the rasterizer as follows, for Windows:
+build svgpp [OPTIONS] FILES
+and for Unix:
+./build.sh svgpp [OPTIONS] FILES
+Refer to <a href="#using-binary">âUsing the binary distributionâ</a> for an explanation of these options.</p></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
Added: websites/staging/xmlgraphics/trunk/content/batik/tools/rasterizer.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/tools/rasterizer.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/tools/rasterizer.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,288 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>SVG Rasterizer</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>SVG Rasterizer</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a> » <a href="/batik/tools/">Tools</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><p>This page describes the features of the SVG Rasterizer utility that comes with the Batik distribution. The SVG Rasterizer is a utility that can convert SVG files to a raster format. The tool can convert individual files or sets of files, making it easy to convert entire directories of SVG files. The provided formats are<abbr title="Joint Photography Expert Group">JPEG</abbr>,<abbr title="Portable Network Graphics">PNG</abbr>and<abbr title="Tagged Image File Format">TIFF</abbr>, however the design allows new formats to be added easily. In addition, the rasterizer can (despite its name) transcode to<abbr title="Portable Document Format">PDF</abbr>.</p>
+<h1 id="downloading">Downloading the rasterizer</h1>
+<p>Refer to the <a href="../install.html">install page</a> and the <a href="../download.cgi">download area</a> to find out what to download and how to install it. Remember that you can get either the source or binary distribution.</p>
+<h1 id="using">Rasterizing one or several SVG files</h1>
+<p>The method for starting the rasterizer depends on the distribution of Batik that you chose to download. The following describes how to start the viewer for each distribution.</p>
+<h2 id="using-binary">Using the binary distribution</h2>
+<p>If you downloaded the binary distribution of Batik, you should have a file called <code>batik-1.6.zip</code> (or similar), and, after expanding that file, a jar file called <code>batik-rasterizer.jar</code> . To start the rasterizer, open a console, go to the directory where you expanded the distribution (and where <code>batik-rasterizer.jar</code> is located) and simply type the following at the command prompt:
+java -jar batik-rasterizer.jar FILES
+For example, if you type:
+java -jar batik-rasterizer.jar samples/batikFX.svg
+you will see the following printout:
+Converting file: samples/BatikFX.svg to samples/BatikFX.png
+Once the conversion is complete, you will find a <code>batikFX.png</code> file in the samples directory.</p>
+<p>You can pass options on the command line:
+java -jar batik-rasterizer.jar [OPTIONS] FILES
+where, as options:</p>
+<dl>
+<dt><strong>-d</strong> <em>dir|file</em></dt>
+<dd>specifies the output directory, or the output file if there is only a single input file,</dd>
+<dt><strong>-m</strong> <em>mime-type</em></dt>
+<dd>specifies the output MIME type, which should be one of <code>image/png</code> , <code>image/jpeg</code> , <code>image/tiff</code> or <code>application/pdf</code> ,</dd>
+<dt><strong>-w</strong> <em>width</em></dt>
+<dd>specifies the output width as a floating point value,</dd>
+<dt><strong>-h</strong> <em>height</em></dt>
+<dd>specifies the output height as a floating point value,</dd>
+<dt><strong>-maxw</strong> <em>width</em></dt>
+<dd>specifies the maximum output width as a floating point value,</dd>
+<dt><strong>-maxh</strong> <em>height</em></dt>
+<dd>specifies the maximum output height as a floating point value,</dd>
+<dt><strong>-a</strong> <em>x</em> <strong>,</strong> <em>y</em> <strong>,</strong> <em>width</em> <strong>,</strong> <em>height</em></dt>
+<dd>specifies the area of interest (as floating point values) of the SVG file to rasterize (and if not specified, will be determined by the <code>width</code> / <code>height</code> / <code>viewBox</code> attributes if specified in the document, and be 0,0,400,400 otherwise),</dd>
+<dt><strong>-bg</strong> <em>alpha</em> <strong>.</strong> <em>red</em> <strong>.</strong> <em>green</em> <strong>.</strong> <em>blue</em></dt>
+<dd>specifies the background fill color as an ARGB quadruple, where each component is an integer in the range 0â255,</dd>
+<dt><strong>-cssMedia</strong> <em>media</em></dt>
+<dd>specifies the CSS media type used for matching CSS rules,</dd>
+<dt><strong>-cssAlternate</strong> <em>file|uri</em></dt>
+<dd>specifies the CSS alternate stylesheet to use,</dd>
+<dt><strong>-cssUser</strong> <em>file|uri</em></dt>
+<dd>specifies the CSS user stylesheet to use in addition to any other referenced or embedded stylesheets,</dd>
+<dt><strong>-font-family</strong> <em>defaultFontFamily</em></dt>
+<dd>specifies default font family to be used when none is specified,</dd>
+<dt><strong>-lang</strong> <em>language-code</em></dt>
+<dd>specifies the <a href="http://www.faqs.org/rfcs/rfc3066.html">RFC 3066</a> language code to use,</dd>
+<dt><strong>-q</strong> <em>quality</em></dt>
+<dd>specifies the quality of the output image, as a floating point number in the range 0 < <em>quality</em> < 1 when generating JPEG images,</dd>
+<dt><strong>-indexed</strong> <em>1|2|4|8</em></dt>
+<dd>specifies the number of bits per pixel of the output image, using an adaptive pallete, resulting in an indexed image when generating PNG images,</dd>
+<dt><strong>-dpi</strong> <em>resolution</em></dt>
+<dd>specifies the resolution of the output image in dots per inch,</dd>
+<dt><strong>-validate</strong></dt>
+<dd>specifies that the source SVG files must be validated against their DTDs,</dd>
+<dt><strong>-onload</strong></dt>
+<dd>specifies that the SVG files should be rasterized after dispatching the SVG load event,</dd>
+<dt><strong>-snapshotTime</strong></dt>
+<dd>specifies the document time that should be seeked to before rasterizing the document, implying -onload,</dd>
+<dt><strong>-scriptSecurityOff</strong></dt>
+<dd>specifies that any security checks on the scripts running as a result of dispatching the SVG load event will be bypassed,</dd>
+<dt><strong>-anyScriptOrigin</strong></dt>
+<dd>specifies that scripts can be loaded from any location, while by default they can only be loaded from the same location as the document, and</dd>
+<dt><strong>-scripts</strong> <em>allowed-script-types</em></dt>
+<dd>specifies a list of script types (i.e., values for the <code>type</code> attribute on <code>script</code> elements) that should be loaded.</dd>
+</dl>
+<p>For example:
+java -jar batik-rasterizer.jar -d myDir -m image/jpeg samples/*.svg
+will generate JPEG images for all the SVG files found in the samples directory.</p>
+<h2 id="usingSource">Using the source distribution</h2>
+<p>If you downloaded the source distribution of Batik, you got a zip or tar file that expanded into a directory called <code>xml-batik</code> or<code>batik- <em>version</em> </code>. In that directory, you can find build scripts for the platform you are running on. For example, there is a <code>build.bat</code> script for users of the Windows platform and there is a <code>build.sh</code> script for UNIX users.</p>
+<p>To start the rasterizer you should:</p>
+<ul>
+<li>
+<p>Make sure that your <code>JAVA_HOME</code> environment variable is set to your JDK installation directory.</p>
+</li>
+<li>
+<p>Open a command line window and go to the <code>xml-batik</code> or<code>batik- <em>version</em> </code>directory where the Batik distribution was expanded.</p>
+</li>
+<li>
+<p>For windows, type the following at the command prompt:
+build svgrasterizer
+and for Unix:
+./build.sh svgrasterizer
+This will print out a help message for the rasterizer.</p>
+</li>
+</ul>
+<p>You can pass options to the rasterizer as follows, for Windows:
+build svgrasterizer [OPTIONS] FILES
+and for Unix:
+./build.sh svgrasterizer [OPTIONS] FILES
+Refer to <a href="#using-binary">âUsing the binary distributionâ</a> for an explanation of the options.</p>
+<h1 id="task">Rasterizer Ant task</h1>
+<p>The Rasterizer task is an <a href="http://ant.apache.org/">Ant</a> version of the rasterizer utility. It fulfills the same basic purpose as the utility but has a different syntax and a slightly different set of features.</p>
+<p>The task is able to produce four raster formats:<abbr title="Portable Network Graphics">PNG</abbr>,<abbr title="Joint Photographic Expert Group">JPEG</abbr>,<abbr title="Tagged Image File Format">TIFF</abbr>and<abbr title="Portable Document Format">PDF</abbr>.</p>
+<h2 id="initTask">Using the rasterizer task</h2>
+<p>The first thing to do is to compile rasterizer task classes. Download the source distribution of Batik and see the <code>README</code> file in the <code>contrib/rasterizertask</code> directory for more instructions. The build procedure works the same way as when building Batik itself.</p>
+<p>After building, ensure that the generated <code>batik-rasterizer.jar</code> and the classes (or jar file) of the rasterizer task are in your <code>CLASSPATH</code> .</p>
+<p>Next you have to define the task in your Ant project. To do this, add the following line either after the <code>project</code> start tag or after the <code>target</code> start tag in the target you are using the rasterizer task:
+ <taskdef name="rasterize"
+ classname="org.apache.tools.ant.taskdefs.optional.RasterizerTask"/>
+Now you can use the rasterizer task in your project. See the <a href="#taskParameters">parameters section</a> for an explanation of the available parameters or the <a href="#taskExamples">examples section</a> to see few usage examples.</p>
+<h2 id="taskParameters">Parameters of the Ant task</h2>
+<p>The following table lists the attributes that may be specified on the <code>rasterize</code> task element.</p>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Description</th>
+<th>Required</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>result</td>
+<td>Sets the type of the result image. Only one of the following values must be used: <code>image/png</code> , <code>image/jpeg</code> , <code>image/tiff</code> and <code>application/pdf</code> . The value must be in lowercase letters.</td>
+<td>Yes</td>
+</tr>
+<tr>
+<td>height</td>
+<td>Sets the height of the result image in pixels. The task calculates the height from the SVG file if this parameter has not been set. The rasterizer keeps the aspect ratio of the SVG file even if the both <code>height</code> and <code>width</code> have been set.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>width</td>
+<td>Sets the width of the result image in pixels. The task calculates the width from the SVG file if this parameter has not been set. The rasterizer keeps the aspect ratio of the SVG file even if the both <code>height</code> and <code>width</code> have been set.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>maxheight</td>
+<td>Sets the maximum height of the result image in pixels. The image wonât be higher than defined in this parameter, regardless of the size set in the image itself or in other parameters. This is a floating point value.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>maxwidth</td>
+<td>Sets the maximum width of the result image in pixels. The image wonât be wider than defined in this parameter, regardless of the size set in the image itself or in other parameters. This is a floating point value.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>quality</td>
+<td>Sets the quality of the produced image. The value must be greater than 0 but smaller than 1, larger numbers meaning higher quality. The quality value is used only with JPEG images. The default quality value is 0.99.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>area</td>
+<td>Defines the area in the SVG file which will be rasterized. Parts outside this area are discarded and donât show in the result image. The area attribute value has four integers separated by commas. The first two integers set the x and y coordinates of the upper left corner of the area, respectively. The last two integers set the width and height of the area, respectively. For example, <code>10, 20, 100, 200</code> sets the rectangular area from point <code>10, 10</code> to point <code>110, 220</code> . The specified area is applied to all images if more than one file is rasterized during one task.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>bg</td>
+<td>Sets the background color of the result image. The <code>bg</code> attribute value is either three or four integers separated with commas. The four values are alpha channel, red, green, and blue, respectively. If only three values are given, then the values are red, green, and blue and the alpha channel is automatically set to 255 (opaque). All values have to between 0 and 255. The default value is none which means that background is transparent and not filled with any color.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>media</td>
+<td>CSS media type that is used to select a CSS stylesheet. The selected stylesheet is then used to rasterize the SVG files. Only the visual media group is supported (see the <a href="http://www.w3.org/TR/REC-CSS2/">CSS2 specification</a> for more information about media groups). The default value is <code>screen</code> .</td>
+<td>No</td>
+</tr>
+<tr>
+<td>dpi</td>
+<td>Resolution for the result image. The attribute value is used to compute the âpixel to millimeterâ ratio used when processing SVG files. The default value is 96.</td>
+<td>No</td>
+</tr>
+<tr>
+<td>lang</td>
+<td>Language which is used select language specific areas from the SVG file during the rasterizing process. The valid values are defined in <a href="http://www.faqs.org/rfcs/rfc3066.html">RFC3066</a> . The default value is <code>en</code> .</td>
+<td>No</td>
+</tr>
+<tr>
+<td>src</td>
+<td>Name of a one input file. Use this parameter to convert just one file whose name and location are known. The <code>dest</code> parameter must also be given.</td>
+<td>One of the following is required: <code>src</code> attribute, <code>srcdir</code> attribute or <code>fileset</code> element(s).</td>
+</tr>
+<tr>
+<td>dest</td>
+<td>Name of a one output file. Used this with <code>src</code> parameter only. The output directory is created if it doesnât exist.</td>
+<td>Required if <code>src</code> is used.</td>
+</tr>
+<tr>
+<td>srcdir</td>
+<td>Name of the input directory. <code>srcdir</code> and <code>fileset</code> elements can be combined and <code>srcdir</code> can be omitted if there is at least one <code>fileset</code> child element. <code>srcdir</code> file selection can be controlled with <code>include</code> , <code>exclude</code> , etc. child elements. Note that without control parameters the task tries to rasterize <em>all</em> files in the given directory.</td>
+<td>One of the following is required: <code>src</code> attribute, <code>srcdir</code> attribute or <code>fileset</code> element(s).</td>
+</tr>
+<tr>
+<td>destdir</td>
+<td>Name of an output directory. Use this with the <code>srcdir</code> attribute or <code>fileset</code> elements. The task generates the names of the output images by changing the suffix of the input file names to correspond the result image type. A suffix is added if the input file doesnât have one. Output directories are created if they donât exist.</td>
+<td>Required if <code>srcdir</code> attribute or <code>fileset</code> elements are used.</td>
+</tr>
+<tr>
+<td>classname</td>
+<td>Class name of the XML parser used to parse SVG images. The value can be either the complete classname with package information included or the special name <code>jaxp</code> , which means any available parser in the <code>CLASSPATH</code> that supports JAXP. See the Batik code for the default value.</td>
+<td>No</td>
+</tr>
+</tbody>
+</table>
+<p>You can use <code>fileset</code> elements to select input files and directories. See the <a href="http://ant.apache.org/">Ant</a> documentation to learn how to use <a href="http://ant.apache.org/manual/CoreTypes/fileset.html">filesets</a> .</p>
+<h2 id="taskExamples">Examples of using the rasterizer task</h2>
+<p>The following example is the complete Ant project that converts an SVG image (called <code>input.svg</code> ) to a PNG image (called <code>output.png</code> ):
+<?xml version="1.0"?></p>
+<project name="RasterizerExample" default="main" basedir=".">
+
+ <taskdef name="rasterize"
+ classname="org.apache.tools.ant.taskdefs.optional.RasterizerTask"/>
+
+ <target name="main">
+ <rasterize result="image/png" src="input.svg" dest="output.png"/>
+ </target>
+</project>
+
+<p>The next example is just one task in a project. It converts all files with a <code>.svg</code> suffix in the <code>images</code> directory and all files in the <code>images2</code> directory to TIFF images. The resulting image files are placed in the <code>results</code> directory.
+ <rasterize result="image/tiff" destdir="results">
+ <fileset dir="images">
+ <include name="**/*.svg"/>
+ </fileset>
+ <fileset dir="images2"/>
+ </rasterize></p></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
Added: websites/staging/xmlgraphics/trunk/content/batik/uses.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/uses.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/uses.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,139 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>Projects using Batik</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>Projects using Batik</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><div class="toc">
+<ul>
+<li><a href="#examples-of-projects-and-products-using-batik-examplesofprojectsandproductsusingbatik">Examples of projects and products using Batik # {#Examples+of+projects+and+products+using+Batik}</a></li>
+</ul>
+</div>
+<h1 id="examples-of-projects-and-products-using-batik-examplesofprojectsandproductsusingbatik">Examples of projects and products using Batik # {#Examples+of+projects+and+products+using+Batik}</h1>
+<p>While it is hard to track projects and products which are using Batik, here are a few that are known of:</p>
+<ul>
+<li>
+<p><a href="http://cocoon.apache.org/">The Apache Cocoon project</a> uses Batik to rasterize SVG images.</p>
+</li>
+<li>
+<p><a href="http://xmlgraphics.apache.org/fop/">The Apache FOP project</a> uses Batik to handle SVG images. It uses the SVG rasterizer and extends the Batik transcoder architecture to offer SVG to PDF conversion.</p>
+</li>
+<li>
+<p><a href="http://www.exurbi.com/">eDoc Studio</a> , a page layout package, uses the Batik SVG generator to export pages to SVG.</p>
+</li>
+<li>
+<p><a href="http://www.elixirtech.com/ElixirReport">ElixirTechâs ElixirReport</a> uses Batik for charting and for its SVG component.</p>
+</li>
+<li>
+<p><a href="http://glipssvgeditor.sourceforge.net/">GLIPS Graffiti</a> is an Open Source Extensible Full Feature Native SVG Editor.</p>
+</li>
+<li>
+<p><a href="http://www2.ilog.com/preview/Discovery/">ILOG Discovery Preview</a> , a free visual data analysis tool letting you visualize and edit data sets in a very wide variety of views (2D graphs and charts, various kinds of treemaps, parallel coordinates, parallel histograms and much more), uses the Batik SVG export module.</p>
+</li>
+<li>
+<p><a href="http://www.ilog.com/products/jviews">ILOG JViews Component Suite</a> , a product for advanced visualization, uses and extends the Batik SVG export module.</p>
+</li>
+<li>
+<p><a href="http://www.object-refinery.com/jfreechart/index.html">The JFreeChart Project</a> uses Batik to export charts in the SVG format.</p>
+</li>
+<li>
+<p><a href="http://lagoon.sourceforge.net/">Lagoon</a> , an XML-based framework for web site maintenance, uses the Batik SVG Rasterizer to render SVG as bitmap graphics for web publishing.</p>
+</li>
+<li>
+<p><a href="http://www.throneworld.com/lords/gms/dev.html">Lords Map</a> is a program to allow players and visitors to view the current map of various campaigns. Lords Map uses Batikâs SVG DOM and SVG Generator.</p>
+</li>
+<li>
+<p><a href="http://luxor-xul.sourceforge.net/index.html">Luxor XUL</a> is a free, open-source XML User Interface Language (XUL) toolkit in Java released under the GNU GPL that supports hand-picked Mozilla XUL goodies and also includes a ultra-lightweight, multi-threaded web server, a portal engine, a scripting engine, a template engine and much more. Gerard Bauer, the Luxor project lead, has written an extensive <a href="http://luxor-xul.sourceforge.net/talk/jug-nov-2002/slides.html">SVG presentation</a> .</p>
+</li>
+<li>
+<p><a href="http://www.optimalj.com">OptimalJ</a> , a UML Class Diagram Editor for NetBeans, uses Batik to export SVG.</p>
+</li>
+<li>
+<p><a href="http://otn.oracle.com/products/jdev/content.html">Oracle Corp.âs JDeveloper10i</a> uses Batik to export class diagrams in SVG. It uses the SVG export module.</p>
+</li>
+<li>
+<p><a href="http://www.kiyut.com/">Sketsa</a> is a vector drawing application based on Batik. With Sketsa, you can create vector graphics that can be scaled and printed at any resolution, without losing detail or clarity.</p>
+</li>
+<li>
+<p><a href="http://dannyayers.com/2005/10/18/svolgo-redux/">Svolgo</a> , a Graph Visualisation/Transformation Framework for the Semantic Web Cross-model transformation, node and arc diagrams, representation in SVG. This project uses Batikâs SVG DOM implementation.</p>
+</li>
+<li>
+<p><a href="http://volity.net/">Volity</a> is an open platform for Internet-based multiplayer casual gaming. Its official client, <a href="http://volity.org/projects/gamut/">Gamut</a> , uses Batik, allowing developers to create game UI files that use ECMAScript-driven SVG.</p>
+</li>
+<li>
+<p><a href="http://pear.php.net/package/XML_svg2image">XML_svg2image</a> is a PHP class which translates SVG files to PNG or JPEG using Batik.</p>
+</li>
+<li>
+<p><a href="http://xweb.sf.net">XWeb</a> , a tool to create websites automatically out of XML input. Uses the Batik SVG Rasterizer.</p>
+</li>
+</ul></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
Added: websites/staging/xmlgraphics/trunk/content/batik/using/architecture.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/using/architecture.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/using/architecture.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,121 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>Architecture overview</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>Architecture overview</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a> » <a href="/batik/using/">Using</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><p>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 <a href="http://opensource.objectsbydesign.com/batik/index.html">Object by Design</a> or <a href="http://www.yworks.com/products/yDoc/showcase/batik-1.5/">yWorks</a> .</p>
+<p>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"> <img alt="Batik Architecture" src="images/HighLevelArchitecture.png" title="" /> </div>
+ <a href="#applicationComponents">Application modules</a> illustrate how to use the core modules and let users evaluate the Batik software by experimenting with its features.</p>
+<p>The <a href="#coreComponents">Core modules</a> 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.</p>
+<p>Finally, the <a href="#lowLevelComponents">Low level modules</a> are used internally by the core modules to accomplish their work. These modules are not typically used by developers directly.</p>
+<h1 id="applicationComponents">Application modules</h1>
+<p>As mentioned earlier, the application modules illustrate the functionality that Batik offers.</p>
+<p>For example, the <a href="../tools/browser.html">SVG browser</a> is built using several Batik core modules (such as the <code>JSVGCanvas</code> GUI component and the <code>ImageTranscoder</code> s) and illustrates how Batik lets you not only view, zoom, pan and rotate SVG documents, but also search them and convert them to other formats (such as JPEG, TIFF or PNG).</p>
+<p>The <a href="../tools/pretty-printer.html">SVG pretty printer</a> is another example that shows how Batik lets you manipulate and transform SVG content, here for the purposed of tidying up potentially disorganized SVG files.</p>
+<p>The <a href="../tools/font-converter.html">SVG font converter</a> illustrates how Batik can help you embed SVG font definitions in an SVG file by providing an application that converts ranges of characters from a TrueType Font format to the SVG font format.</p>
+<p>Finally, the <a href="../tools/rasterizer.html">SVG rasterizer</a> shows how to leverage the <a href="../using/transcoder.html">transcoder API</a> to convert to and from SVG content.</p>
+<p>Note that even though the application modules are meant to be useful and fun to use, they are not the primary deliverables of the Batik project. Instead, they are illustrations of how the Batik core modules might be used and combined.</p>
+<h1 id="coreComponents">Core modules</h1>
+<p>The Batik core modules are the heart of the Batik architecture. They can be used individually or in combination for various purposes, and the <a href="#applicationComponents">application modules</a> offer some usage examples.</p>
+<ul>
+<li>
+<p>The <a href="../using/svg-generator.html">SVG generator</a> is a module containing<code> <a href="../javadoc/org/apache/batik/svggen/SVGGraphics2D.html">SVGGraphics2D</a> </code>class, that lets all Java applications or applets easily convert their graphics to the SVG format, as easily as they draw to a screen or a printer, by leveraging the Java 2D APIâs extensible design.</p>
+</li>
+<li>
+<p><a href="../using/dom-api.html">SVG DOM</a> an implementation of the SVG DOM API defined in the SVG recommendation. It lets the programmer manipulate SVG documents in a Java program.</p>
+</li>
+<li>
+<p>The <a href="../using/swing.html">Swing components</a> module includes, primarily, the<code> <a href="../javadoc/org/apache/batik/swing/JSVGCanvas.html">JSVGCanvas</a> </code>class, a UI component that can display SVG content and let the user interact with that content (zoom, pan, rotate, select text, etc.).</p>
+</li>
+<li>
+<p>The <strong>Bridge</strong> module is rarely used directly. It is responsible for creating and maintaining an appropriate object corresponding to an SVG element. The bridge converts an SVG document into the internal representation Batik uses for graphics (GVT, the Graphic Vector Toolkit).</p>
+</li>
+<li>
+<p>The <a href="../using/transcoder.html">transcoder</a> is a module that provides a generic API for transcoding an input to an output. This module transcodes an input stream or a document into a particular ouput format, used for converting SVG documents to other types.</p>
+</li>
+</ul>
+<h1 id="lowLevelComponents">Low level modules</h1>
+<p>The low level modules are not expected to be used directly by developers using the Batik API. Rather, they support the operation of the core modules. The low level modules include:</p>
+<ul>
+<li>
+<p>The <strong>Graphic Vector Toolkit</strong> (GVT) module, which represents a view of the DOM tree that is more suitable for for rendering and event handling purposes. This module describes DOM tree in terms of a tree of Java graphics objects.</p>
+</li>
+<li>
+<p>The <strong>Renderer</strong> module is responsible for rendering a GVT tree and any related task. For example, a raster based renderer may perform some caching (the default renderer in Batik does that). However, a renderer could perform any task deemed necessary and does not have to be raster based.</p>
+</li>
+<li>
+<p>The <a href="../using/parsers.html">SVG parser</a> module contains parser classes for complex SVG attributes such as the <code>transform</code> or <code>color</code> attributes. Higher level modules rely on the SVG parser module.</p>
+</li>
+</ul></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
Added: websites/staging/xmlgraphics/trunk/content/batik/using/dom-api.html
==============================================================================
--- websites/staging/xmlgraphics/trunk/content/batik/using/dom-api.html (added)
+++ websites/staging/xmlgraphics/trunk/content/batik/using/dom-api.html Sun Apr 15 05:46:22 2012
@@ -0,0 +1,144 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html lang="en">
+ <head>
+ <title>SVG DOM API</title>
+
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <meta property="og:image" content="http://www.apache.org/images/asf_logo.gif" />
+<!--
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/style.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="http://www.apache.org/css/code.css">
+-->
+ <link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css">
+
+ </style>
+
+
+
+
+
+ </head>
+
+ <body>
+ <div id="banner">
+ </div>
+
+ <div id="navigation">
+ <h1 id="xml-graphics">XML Graphics</h1>
+<ul>
+<li><a href="/">Overview</a></li>
+<li><a href="/team.html">Who We Are</a></li>
+<li><a href="/legal.html">Legal Stuff</a></li>
+<li><a href="/charter.html">Project Charter</a></li>
+<li><a href="/mail.html">Mailing Lists</a></li>
+<li><a href="/repo.html">Code Repositories</a></li>
+<li><a href="http://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
+<li><a href="http://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
+</ul>
+<h1 id="subprojects">Subprojects</h1>
+<ul>
+<li><a href="/batik/">Batik</a></li>
+<li><a href="/fop/">FOP</a></li>
+<li><a href="/commons/">Commons</a></li>
+</ul>
+<form name="search" id="search" action="http://www.google.com/search" method="get">
+ <input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
+ <input type="text" name="q" id="query" /><br />
+ <input type="submit" id="submit" value="Search" />
+</form>
+ </div>
+
+ <div id="bannertext">
+ <a href="/"><img src="/images/apache-xml-graphics.gif" alt="The Apache XML Graphics Project" width="220" heigh="51" /></a>
+ <h1>SVG DOM API</h1>
+ </div>
+ <p><a href="/">Home</a> » <a href="/batik/">Batik</a> » <a href="/batik/using/">Using</a></p>
+ </div>
+ <div id="content" class="grid_16"><div class="section-content"><p>The <a href="http://www.w3.org/dom/">Document Object Model</a> (DOM) is an API for XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. This page shows how to create an SVG document using the DOM API.</p>
+<h1 id="gettingStarted">Getting started</h1>
+<p>The DOM API defines an interface called <a href="http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/DOMImplementation.html">DOMImplementation</a> , which represents the bootstrap of any DOM implementation. The role of this class is to bootstrap a particular implementation of the DOM by providing a method to create a <a href="http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/Document.html">Document</a> . Then, the concrete <code>Document</code> represents an XML document and also acts like a factory for the various DOM objects such as <a href="http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/Element.html">Element</a> , <a href="http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/Attr.html">Attr</a> and <a href="http://java.sun.com/j2se/1.5.0/docs/api/org/w3c/dom/Text.html">Text</a> .</p>
+<p>How to get an instance of the <code>DOMImplementation</code> interface depends on the DOM implementation you are using. In Batik, the DOM implementation is located in the package <code>org.apache.batik.dom.svg</code> and the class is named <a href="http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/dom/svg/SVGDOMImplementation.html">SVGDOMImplementation</a> . The following example shows how to get a concrete <code>DOMImplementation</code> object.
+import org.w3c.dom.DOMImplementation;
+import org.apache.batik.dom.svg.SVGDOMImplementation;</p>
+<p>DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
+Once you have an instance of a <code>DOMImplementation</code> , you are not relying on Batik-specific code any more and ready to use the DOM API.</p>
+<h1 id="creating">Creating a Document</h1>
+<p>Using the <code>DOMImplementation</code> , you are now able to create a <code>Document</code> . The following example illustrates how to create an SVG document. Note that the Batikâs DOM implementation can be used to represent either an SVG document fragment or any kind of XML document. Note that by choosing the namespace URI and the local name of the root element of SVG, we are creating an SVG document.
+import org.apache.batik.dom.svg.SVGDOMImplementation;
+import org.w3c.dom.Document;</p>
+<p>// We are using a constant available on the SVGDOMImplementation,
+// but we could have used "http://www.w3.org/2000/svg".
+String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
+DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
+Document doc = impl.createDocument(svgNS, "svg", null);
+As we have created an SVG <code>Document</code> , we can cast this document to an <a href="../javadoc/org/w3c/dom/svg/SVGDocument.html">SVGDocument</a> (defined in the <code>org.w3c.dom.svg</code> package) if needed.</p>
+<h1 id="buildsvgdoc">Building an SVG Document</h1>
+<p>Finally, using the <code>Document</code> object, we are now able to construct SVG content. Note that the document created before supports both generic XML and SVG. Though the DOM implementation of Batik is an SVG DOM implementation, the SVG-specific methods that rely on the document having been rendered (particularly geometry related methods, such as <a href="../javadoc/org/w3c/dom/svg/SVGLocatable.html#getBBox()">SVGLocatable.getBBox</a> ) cannot be used at this point.</p>
+<p>The document can be built using DOM Level 2 Core methods. The following example shows how to create a red rectangle located at (10, 20), with a size of (100, 50) placed in a (400, 450) SVG canvas:</p>
+<p>import org.apache.batik.dom.svg.SVGDOMImplementation;
+import org.w3c.dom.Document;
+import org.w3c.dom.Element;</p>
+<p>DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
+String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
+Document doc = impl.createDocument(svgNS, "svg", null);</p>
+<p>// Get the root element (the 'svg' element).
+Element svgRoot = doc.getDocumentElement();</p>
+<p>// Set the width and height attributes on the root 'svg' element.
+svgRoot.setAttributeNS(null, "width", "400");
+svgRoot.setAttributeNS(null, "height", "450");</p>
+<p>// Create the rectangle.
+Element rectangle = doc.createElementNS(svgNS, "rect");
+rectangle.setAttributeNS(null, "x", "10");
+rectangle.setAttributeNS(null, "y", "20");
+rectangle.setAttributeNS(null, "width", "100");
+rectangle.setAttributeNS(null, "height", "50");
+rectangle.setAttributeNS(null, "fill", "red");</p>
+<p>// Attach the rectangle to the root 'svg' element.
+svgRoot.appendChild(rectangle);
+The example given constructs a document equivalent to parsing the following SVG file:
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="450">
+ <rect x="10" y="20" width="100" height="50" fill="red"/>
+</svg></p>
+<h1 id="createdocfromsvgfile">Creating a Document from an SVG file</h1>
+<p>With Batik, you can also create an SVG DOM tree from a URI, an <a href="http://java.sun.com/j2se/1.5.0/docs/api/java/io/InputStream.html">InputStream</a> , or a <a href="http://java.sun.com/j2se/1.5.0/docs/api/java/io/Reader.html">Reader</a> , using the <a href="../javadoc/org/apache/batik/dom/util/SAXDocumentFactory.html">SAXSVGDocumentFactory</a> . The following example illustrates how to create an SVG document from a URI using the <code>SAXSVGDocumentFactory</code> class.
+import java.io.IOException;</p>
+<p>import org.apache.batik.dom.svg.SAXSVGDocumentFactory;
+import org.apache.batik.util.XMLResourceDescriptor;</p>
+<p>import org.w3c.dom.Document;</p>
+<p>try {
+ String parser = XMLResourceDescriptor.getXMLParserClassName();
+ SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);
+ String uri = "http://www.example.org/diagram.svg";
+ Document doc = f.createDocument(uri);
+} catch (IOException ex) {
+ // ...
+}</p>
+<p>As we have created an SVG <code>Document</code> , we can cast this document to an <code>SVGDocument</code> (defined in the <code>org.w3c.dom.svg</code> package) if needed.</p>
+<h1 id="rendering">Rendering an SVG Document</h1>
+<p>Batik provides several ways to use an SVG DOM tree. Two modules can be immediately used to render your SVG document.</p>
+<dl>
+<dt>JSVGCanvas</dt>
+<dd>The <a href="../javadoc/org/apache/batik/swing/JSVGCanvas.html">JSVGCanvas</a> is a Swing component that can display SVG document. A SVG document can be specified using a URI or an SVG DOM tree (using the <a href="../javadoc/org/apache/batik/swing/JSVGCanvas.html#setSVGDocument(Document)">setSVGDocument</a> method). For futher information about the <code>JSVGCanvas</code> , see the <a href="../using/swing.html">Swing components module documentation</a> .</dd>
+<dt>ImageTranscoder</dt>
+<dd>The <a href="../javadoc/org/apache/batik/transcoder/image/ImageTranscoder.html">ImageTranscoder</a> is a transcoder that can take a URI, an <code>InputStream</code> or an SVG DOM tree and produces a raster image (such JPEG, PNG or TIFF). By creating a <a href="../javadoc/org/apache/batik/transcoder/TranscoderInput.html">TranscoderInput</a> object with the SVG DOM tree, you will be able to transform your SVG content to a raster image. For futher information, see the <a href="../using/transcoder.html">transcoder module documentation</a> .</dd>
+</dl></div></div>
+ <div class="clear"></div>
+
+ <div id="footer">
+ <a alt="Apache Software Foundation" href="http://www.apache.org">
+ <img id="asf-logo" alt="Apache Software Foundation" src="/images/feather-small.gif"/ width="100">
+ </a>
+ <div class="copyright">
+ <p>
+ Copyright © 2011 The Apache Software Foundation, Licensed under
+ the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
+ <br />
+ Apache, Apache XML Graphics, the Apache feather logo, and the Apache XML Graphics logos are
+ trademarks of <a href="http://www.apache.org">The Apache Software Foundation</a>. All other
+ marks mentioned may be trademarks or registered trademarks of their respective owners.
+ <br />
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: commits-help@xmlgraphics.apache.org