blob: f3a9748ec72b24a9361ec021ee083ef8fd3793d3 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://www.apache.org/css/code.css">
<link href="/css/profile.css" rel="stylesheet" type="text/css" />
<link href="/css/xmlgraphics.css" rel="stylesheet" type="text/css" />
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.stoc.js"></script>
<script>
$(document).ready(function(){
$('ul#navigation a').each(function() {
if (this.href === window.location.href)
{ $(this). attr('id', 'forefront');}
});
$('ul#navigation a#forefront').each(function() {
});
})
$(function(){
$("#items").stoc({ search: "#content", stocTitle: "<h3>Page Contents</h3>" });
});
</script>
<style>
.highlight {color: red;}
</style>
</head>
<body>
<div id="banner">&nbsp;
</div>
<div id="navigation">
<style type="text/css">
/* The following code is added by mdx_elementid.py
It was originally lifted from http://subversion.apache.org/style/site.css */
/*
* Hide class="elementid-permalink", except when an enclosing heading
* has the :hover property.
*/
.headerlink, .elementid-permalink {
visibility: hidden;
}
h2:hover > .headerlink, h3:hover > .headerlink, h1:hover > .headerlink, h6:hover > .headerlink, h4:hover > .headerlink, h5:hover > .headerlink, dt:hover > .elementid-permalink { visibility: visible }</style>
<p><a href="/"><img alt="Apache XML Graphics Project Logo" src="/images/apache-xml-graphics.gif" title="Apache XML Graphics Project" /></a></p>
<h1 id="apache-batik">Apache Batik<a class="headerlink" href="#apache-batik" title="Permanent link">&para;</a></h1>
<ul>
<li><a href="/batik/">Overview</a></li>
<li><a href="/batik/license.html">License</a></li>
<li><a href="/batik/download.html">Download</a></li>
<li><a href="/batik/install.html">Notes</a></li>
<li><a href="/batik/status.html">Status</a></li>
<li><a href="/batik/demo-static.html">Demo</a></li>
<li><a href="/batik/faq.html">FAQs</a></li>
<li><a href="https://cwiki.apache.org/confluence/display/XMLGRAPHICSBATIK">Batik Wiki</a></li>
<li><a href="/batik/mailing-lists.html">Mailing lists</a></li>
<li><a href="/batik/contributors.html">Contributors</a></li>
<li><a href="https://issues.apache.org/jira/issues/?jql=project%20%3D%20BATIK%20AND%20resolution%20%3D%20Unresolved%20AND%20status%20in%20%28Open%2C%20%22In%20Progress%22%2C%20Reopened%29%20ORDER%20BY%20priority%20DESC">Bug database</a></li>
<li><a href="/batik/uses.html">Projects using Batik</a></li>
<li>
<h2 id="batik-tools">Batik Tools<a class="headerlink" href="#batik-tools" title="Permanent link">&para;</a></h2>
<ul>
<li><a href="/batik/tools/">Overview</a></li>
<li><a href="/batik/tools/browser.html">Browser</a></li>
<li><a href="/batik/tools/rasterizer.html">Rasterizer</a></li>
<li><a href="/batik/tools/font-converter.html">Font converter</a></li>
<li><a href="/batik/tools/pretty-printer.html">Pretty printer</a></li>
</ul>
</li>
<li>
<h2 id="using-batik">Using Batik<a class="headerlink" href="#using-batik" title="Permanent link">&para;</a></h2>
<ul>
<li><a href="/batik/using/">Overview</a></li>
<li><a href="/batik/using/architecture.html">Architecture</a></li>
<li><a href="/batik/javadoc/">Javadoc APIs</a></li>
<li><a href="/batik/using/dom-api.html">DOM API</a></li>
<li><a href="/batik/using/parsers.html">Parsers</a></li>
<li>
<h3 id="scripting">Scripting<a class="headerlink" href="#scripting" title="Permanent link">&para;</a></h3>
</li>
<li><a href="/batik/using/scripting/ecmascript.html">Scripting with ECMAScript</a></li>
<li><a href="/batik/using/scripting/java.html">Scripting with Java</a></li>
<li><a href="/batik/using/scripting/security.html">Scripting with Security</a></li>
<li><a href="/batik/using/svg-generator.html">SVG generator</a></li>
<li><a href="/batik/using/swing.html">Swing components</a></li>
<li><a href="/batik/using/transcoder.html">Transcoder API</a></li>
<li><a href="/batik/using/extending.html">Extending Batik</a></li>
</ul>
</li>
<li>
<h2 id="development">Development<a class="headerlink" href="#development" title="Permanent link">&para;</a></h2>
<ul>
<li><a href="/batik/dev/">Overview</a></li>
<li><a href="/batik/dev/branches.html">Branches</a></li>
<li><a href="/batik/dev/svg12.html">SVG 1.2 support</a></li>
<li><a href="/batik/dev/test.html">Test infrastructure</a></li>
</ul>
</li>
</ul>
<h1 id="apache-xml-graphics">Apache&trade; XML Graphics<a class="headerlink" href="#apache-xml-graphics" title="Permanent link">&para;</a></h1>
<ul>
<li>
<h3 id="project-overview">Project Overview<a class="headerlink" href="#project-overview" title="Permanent link">&para;</a></h3>
<ul>
<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="https://www.apache.org/foundation/sponsorship.html">ASF Sponsorship Program</a></li>
<li><a href="https://www.apache.org/foundation/thanks.html">ASF Thanks</a></li>
<li><a href="https://www.apache.org/licenses/">Licenses</a></li>
<li><a href="/security.html">Apache XML Graphics Security</a></li>
<li><a href="https://www.apache.org/security/">ASF Security</a></li>
</ul>
</li>
</ul>
<h1 id="sub-projects">Sub Projects<a class="headerlink" href="#sub-projects" title="Permanent link">&para;</a></h1>
<ul>
<li><a href="/fop/">Apache FOP</a></li>
<li><a href="/commons/">Apache XML Graphics Commons</a></li>
</ul>
<h2 id="search-apache-xml-graphics">Search Apache XML Graphics<a class="headerlink" href="#search-apache-xml-graphics" title="Permanent link">&para;</a></h2>
<form name="search" id="search" action="https://www.google.com/search" method="get">
<input value="xmlgraphics.apache.org" name="sitesearch" type="hidden"/>
<input type="text" name="q" id="query" />
<input type="submit" id="submit" value="Search" />
</form>
<h3 id="apachecon-n-america">ApacheCon N. America<a class="headerlink" href="#apachecon-n-america" title="Permanent link">&para;</a></h3>
<p><a title="ApacheCon North America" href="https://www.apachecon.com"><img class="apachecon_logo" alt="ApacheCon North America" src="https://www.apachecon.com/images/landingpage/apachecon-logo.png" width="200" /></a><br /><br /></p>
<ul>
<li><strong><a href="https://www.apachecon.com/">ApacheCon NA</a></strong></li>
</ul>
<p>Hope to see you there!</p>
<h3 id="apachecon-europe">ApacheCon Europe<a class="headerlink" href="#apachecon-europe" title="Permanent link">&para;</a></h3>
<p><a title="ApacheCon Europe" href="https://www.apachecon.com"><img class="apachecon_logo" alt="ApacheCon Europe" src="https://www.apachecon.com/images/landingpage/apachecon-logo.png" width="200" /></a><br /><br /></p>
<ul>
<li><strong><a href="https://www.apachecon.com/">ApacheCon Europe</a></strong></li>
</ul>
<p>Hope to see you there!</p>
<p><a title="Apache Software Foundation" href="https://www.apache.org"><img id="asf_logo_url" alt="Apache Software Foundation " src="/images/asf_logo_url.png" width="200" /></a><br /><br /></p>
<p><a title="Support the Apache Software Foundation" href="https://donate.apache.org/"><img id="asf_support_url" alt="Support the Apache Software Foundation " src="https://blogs.apache.org/foundation/mediaresource/d67ca611-a57c-462d-ac23-95063f81d175" width="200" /></a></p>
<script>
$(document).ready(function () {
$('#navigation :header').click(function () {
var text = $(this).siblings('ul');
if (text.is(':hidden')) {
text.slideDown('200');
} else {
text.slideUp('200');
}
});
if ($('#navigation :header').siblings('ul')) {
$('#navigation :header').append(' &raquo;');
}
$('#navigation > ul > li ul').hide();
var str=location.href.toLowerCase();
$("#navigation li a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$(this).parents().slideDown('200');
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
})
</script> </div>
<div id="bannertext" style="border-bottom: 2px dashed #666666; height: 100px;">
<a href="/batik/"><img src="/images/apache-batik-logo.png" alt="The Apache FOP Project" width="256" height="96" style="float:left; margin-right: 15px;" /></a>
<h2>The Apache&trade; Batik Project</h2>
</div>
<h1>SVG DOM API</h1>
<h1>SVG DOM API</h1>
<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>
<h2 id="gettingStarted">Getting started</h2>
<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.</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">org.w3c.dom.DOMImplementation</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.apache.batik.dom.svg.SVGDOMImplementation</span><span class="o">;</span>
<span class="n">DOMImplementation</span> <span class="n">impl</span> <span class="o">=</span> <span class="n">SVGDOMImplementation</span><span class="o">.</span><span class="na">getDOMImplementation</span><span class="o">();</span>
</pre></div>
<p>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>
<h2 id="creating">Creating a Document</h2>
<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.</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">org.apache.batik.dom.svg.SVGDOMImplementation</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.w3c.dom.Document</span><span class="o">;</span>
<span class="c1">// We are using a constant available on the SVGDOMImplementation,</span>
<span class="c1">// but we could have used &quot;http://www.w3.org/2000/svg&quot;.</span>
<span class="n">String</span> <span class="n">svgNS</span> <span class="o">=</span> <span class="n">SVGDOMImplementation</span><span class="o">.</span><span class="na">SVG_NAMESPACE_URI</span><span class="o">;</span>
<span class="n">DOMImplementation</span> <span class="n">impl</span> <span class="o">=</span> <span class="n">SVGDOMImplementation</span><span class="o">.</span><span class="na">getDOMImplementation</span><span class="o">();</span>
<span class="n">Document</span> <span class="n">doc</span> <span class="o">=</span> <span class="n">impl</span><span class="o">.</span><span class="na">createDocument</span><span class="o">(</span><span class="n">svgNS</span><span class="o">,</span> <span class="s">&quot;svg&quot;</span><span class="o">,</span> <span class="kc">null</span><span class="o">);</span>
</pre></div>
<p>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>
<h2 id="buildsvgdoc">Building an SVG Document</h2>
<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>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">org.apache.batik.dom.svg.SVGDOMImplementation</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.w3c.dom.Document</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.w3c.dom.Element</span><span class="o">;</span>
<span class="n">DOMImplementation</span> <span class="n">impl</span> <span class="o">=</span> <span class="n">SVGDOMImplementation</span><span class="o">.</span><span class="na">getDOMImplementation</span><span class="o">();</span>
<span class="n">String</span> <span class="n">svgNS</span> <span class="o">=</span> <span class="n">SVGDOMImplementation</span><span class="o">.</span><span class="na">SVG_NAMESPACE_URI</span><span class="o">;</span>
<span class="n">Document</span> <span class="n">doc</span> <span class="o">=</span> <span class="n">impl</span><span class="o">.</span><span class="na">createDocument</span><span class="o">(</span><span class="n">svgNS</span><span class="o">,</span> <span class="s">&quot;svg&quot;</span><span class="o">,</span> <span class="kc">null</span><span class="o">);</span>
<span class="c1">// Get the root element (the &#39;svg&#39; element).</span>
<span class="n">Element</span> <span class="n">svgRoot</span> <span class="o">=</span> <span class="n">doc</span><span class="o">.</span><span class="na">getDocumentElement</span><span class="o">();</span>
<span class="c1">// Set the width and height attributes on the root &#39;svg&#39; element.</span>
<span class="n">svgRoot</span><span class="o">.</span><span class="na">setAttributeNS</span><span class="o">(</span><span class="kc">null</span><span class="o">,</span> <span class="s">&quot;width&quot;</span><span class="o">,</span> <span class="s">&quot;400&quot;</span><span class="o">);</span>
<span class="n">svgRoot</span><span class="o">.</span><span class="na">setAttributeNS</span><span class="o">(</span><span class="kc">null</span><span class="o">,</span> <span class="s">&quot;height&quot;</span><span class="o">,</span> <span class="s">&quot;450&quot;</span><span class="o">);</span>
<span class="c1">// Create the rectangle.</span>
<span class="n">Element</span> <span class="n">rectangle</span> <span class="o">=</span> <span class="n">doc</span><span class="o">.</span><span class="na">createElementNS</span><span class="o">(</span><span class="n">svgNS</span><span class="o">,</span> <span class="s">&quot;rect&quot;</span><span class="o">);</span>
<span class="n">rectangle</span><span class="o">.</span><span class="na">setAttributeNS</span><span class="o">(</span><span class="kc">null</span><span class="o">,</span> <span class="s">&quot;x&quot;</span><span class="o">,</span> <span class="s">&quot;10&quot;</span><span class="o">);</span>
<span class="n">rectangle</span><span class="o">.</span><span class="na">setAttributeNS</span><span class="o">(</span><span class="kc">null</span><span class="o">,</span> <span class="s">&quot;y&quot;</span><span class="o">,</span> <span class="s">&quot;20&quot;</span><span class="o">);</span>
<span class="n">rectangle</span><span class="o">.</span><span class="na">setAttributeNS</span><span class="o">(</span><span class="kc">null</span><span class="o">,</span> <span class="s">&quot;width&quot;</span><span class="o">,</span> <span class="s">&quot;100&quot;</span><span class="o">);</span>
<span class="n">rectangle</span><span class="o">.</span><span class="na">setAttributeNS</span><span class="o">(</span><span class="kc">null</span><span class="o">,</span> <span class="s">&quot;height&quot;</span><span class="o">,</span> <span class="s">&quot;50&quot;</span><span class="o">);</span>
<span class="n">rectangle</span><span class="o">.</span><span class="na">setAttributeNS</span><span class="o">(</span><span class="kc">null</span><span class="o">,</span> <span class="s">&quot;fill&quot;</span><span class="o">,</span> <span class="s">&quot;red&quot;</span><span class="o">);</span>
<span class="c1">// Attach the rectangle to the root &#39;svg&#39; element.</span>
<span class="n">svgRoot</span><span class="o">.</span><span class="na">appendChild</span><span class="o">(</span><span class="n">rectangle</span><span class="o">);</span>
</pre></div>
<p>The example given constructs a document equivalent to parsing the following SVG file:</p>
<div class="highlight"><pre><span></span><span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="na">width=</span><span class="s">&quot;400&quot;</span> <span class="na">height=</span><span class="s">&quot;450&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;rect</span> <span class="na">x=</span><span class="s">&quot;10&quot;</span> <span class="na">y=</span><span class="s">&quot;20&quot;</span> <span class="na">width=</span><span class="s">&quot;100&quot;</span> <span class="na">height=</span><span class="s">&quot;50&quot;</span> <span class="na">fill=</span><span class="s">&quot;red&quot;</span><span class="nt">/&gt;</span>
<span class="nt">&lt;/svg&gt;</span>
</pre></div>
<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.</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">java.io.IOException</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.apache.batik.dom.svg.SAXSVGDocumentFactory</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.apache.batik.util.XMLResourceDescriptor</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.w3c.dom.Document</span><span class="o">;</span>
<span class="k">try</span> <span class="o">{</span>
<span class="n">String</span> <span class="n">parser</span> <span class="o">=</span> <span class="n">XMLResourceDescriptor</span><span class="o">.</span><span class="na">getXMLParserClassName</span><span class="o">();</span>
<span class="n">SAXSVGDocumentFactory</span> <span class="n">f</span> <span class="o">=</span> <span class="k">new</span> <span class="n">SAXSVGDocumentFactory</span><span class="o">(</span><span class="n">parser</span><span class="o">);</span>
<span class="n">String</span> <span class="n">uri</span> <span class="o">=</span> <span class="s">&quot;http://www.example.org/diagram.svg&quot;</span><span class="o">;</span>
<span class="n">Document</span> <span class="n">doc</span> <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="na">createDocument</span><span class="o">(</span><span class="n">uri</span><span class="o">);</span>
<span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="n">IOException</span> <span class="n">ex</span><span class="o">)</span> <span class="o">{</span>
<span class="c1">// ...</span>
<span class="o">}</span>
</pre></div>
<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>
<h2 id="rendering">Rendering an SVG Document</h2>
<p>Batik provides several ways to use an SVG DOM tree. Two modules can be immediately used to render your SVG document.</p>
<p>JSVGCanvas
:
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>.</p>
<dl>
<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 class="clear"></div>
<div id="footer">
<div class="copyright">
<div style="float:left; padding: 7px;">
<a title="Apache Software Foundation" href="http://www.apache.org"><img id="asf-feather-logo" alt="Apache Software Foundation" src="/images/asf_logo_url.png" width="200" /></a>
</div>
<p>
Copyright &copy; 2016 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, Apache FOP, Apache Batik, 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>