xdocs/domTutorial.xml - xmlgraphics-batik - Git at Google

 <?xml version="1.0"?>
 <!DOCTYPE document SYSTEM "./dtd/document-v10.dtd">

 <!-- ========================================================================= -->
 <!-- Copyright (C) The Apache Software Foundation. All rights reserved.        -->
 <!--                                                                           -->
 <!-- This software is published under the terms of the Apache Software License -->
 <!-- version 1.1, a copy of which has been included with this distribution in  -->
 <!-- the LICENSE file.                                                         -->
 <!-- ========================================================================= -->

 <!-- ========================================================================= -->
 <!-- author tkormann@apache.org                                                -->
 <!-- version $Id$ -->
 <!-- ========================================================================= -->

 <document>
     <header>
         <title>How to create SVG using DOM</title>
         <authors>
             <person name="Thierry Kormann" email="tkormann@apache.org"/>
         </authors>
     </header>

     <body>

 <!-- ##################################################################### -->
 <s1 title="Introduction">
 <p>

 The <link href="http://www.w3.org/dom/">Document Object Model</link> (DOM)
 is an API for XML documents. It defines the logical structure of documents and
 the way a document is accessed and manipulated. This paper shows how to create
 a SVG document using the DOM API.

 </p>
 </s1>


 <!-- ##################################################################### -->
 <s1 title="Getting started">
 <p>
 The DOM API defines an interface called <code>DOMImplementation</code> which
 represents the boostrap 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 <code>Document</code>. Then, the concrete <code>Document</code> represents an
 XML document and also acts like a factory for the various DOM objects such
 <code>Element</code>, <code>Attr</code> or XML content.
 </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 <code>SVGDOMImplementation</code>. The following example shows how to get
 a concrete <code>DOMImplementation</code> object.
 </p>

 <source>
 import org.w3c.dom.DOMImplementation;
 import org.apache.batik.dom.svg.SVGDOMImplementation;

 DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();</source>

 <p>
 Once you have an instance of a <code>DOMImplementation</code>, you are not
 relying on proprietary code anymore and ready to use the DOM API.
 </p>

 </s1>

 <!-- ##################################################################### -->
 <s1 title="Creating a Document">

 <p>
 Using the <code>DOMImplementation</code>, you are now able to create a
 <code>Document</code>. The following example illustrate how to create a SVG
 document. Note that the Batik's Document Object Model implementation can be used
 to represent either a SVG document fragment or any kind of XML document. The
 following code shows how to get a concrete <code>Document</code> object using a
 <code>DOMImplementation</code>. Note that by choosing the namespace URI and the
 local name of the root element of SVG, we are creating a SVG document.
 </p>

 <source>
 import org.apache.batik.dom.svg.SVGDOMImplementation;
 import org.w3c.dom.Document;

 DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
 // 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;
 <strong>Document doc = impl.createDocument(svgNS, "svg", null);</strong>
 </source>

 <p>
 As we have created a 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>

 </s1>

 <!-- ##################################################################### -->
 <s1 title="Building a SVG Document">

 <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 a SVG DOM
 implementation, the SVG part is not fully implemented yet so only the DOM Level
 2 core functions should be used. 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>

 <source>
 import org.apache.batik.dom.svg.SVGDOMImplementation;
 import org.w3c.dom.Document;
 import org.w3c.dom.Element;

 DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
 String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
 Document doc = impl.createDocument(svgNS, "svg", null);

 // get the root element (the svg element)
 <strong>Element svgRoot = doc.getDocumentElement();</strong>

 // set the width and height attribute on the root svg element
 <strong>svgRoot.setAttributeNS(null, "width", "400");</strong>
 svgRoot.setAttributeNS(null, "height", "450");

 // create the rectangle
 <strong>Element rectangle = doc.createElementNS(svgNS, "rect");</strong>
 rectangle.setAttributeNS(null, "x", "10");
 rectangle.setAttributeNS(null, "y", "20");
 rectangle.setAttributeNS(null, "width", "100");
 rectangle.setAttributeNS(null, "height", "50");
 rectangle.setAttributeNS(null, "style", "fill:red");

 // attach the rectangle to the svg root element
 <strong>svgRoot.appendChild(rectangle);</strong>
 </source>

 <p>
 The example given has the following equivalent SVG.
 </p>

 <source>
 &lt;svg width="400" height="450">
     &lt;rect x="10" y="20" width="100" height="50" style="fill:red"/>
 &lt;/svg>
 </source>

 </s1>

 <!-- ##################################################################### -->
 <s1 title="Rendering a SVG DOM">

 <p>
 Batik provides several ways to use a SVG DOM tree. Two modules can be
 immediately used to render your SVG document.
 </p>
 <dl>
 <dt>JSVGCanvas</dt>
 <dd>
 The <code>JSVGCanvas</code> is a swing component that can display SVG
 document. A SVG document can be specified using a URI or a SVG DOM tree (using
 the <code>setSVGDocument</code> method). For futher informations about the
 <code>JSVGCanvas</code>, see the JSVGCanvas tutorial.
 </dd>
 <dt>ImageTranscoder</dt>
 <dd>
 The <code>ImageTranscoder</code> is a transcoder which can take a URI, an
 InputStream or a SVG DOM tree and produces a raster image (such JPEG or
 PNG). By creating a <code>TranscoderInput</code> with the SVG DOM tree, you will
 be able to transform your SVG content to a raster image. For futher
 informations, see the <link href="rasterizerTutorial.html">Transcoder
 tutorial</link>.
 </dd>
 </dl>


 </s1>

 </body>
 </document>
	<?xml version="1.0"?>
	<!DOCTYPE document SYSTEM "./dtd/document-v10.dtd">

	<!-- ========================================================================= -->
	<!-- Copyright (C) The Apache Software Foundation. All rights reserved. -->
	<!-- -->
	<!-- This software is published under the terms of the Apache Software License -->
	<!-- version 1.1, a copy of which has been included with this distribution in -->
	<!-- the LICENSE file. -->
	<!-- ========================================================================= -->

	<!-- ========================================================================= -->
	<!-- author tkormann@apache.org -->
	<!-- version $Id$ -->
	<!-- ========================================================================= -->

	<document>
	<header>
	<title>How to create SVG using DOM</title>
	<authors>
	<person name="Thierry Kormann" email="tkormann@apache.org"/>
	</authors>
	</header>

	<body>

	<!-- ##################################################################### -->
	<s1 title="Introduction">
	<p>

	The <link href="http://www.w3.org/dom/">Document Object Model</link> (DOM)
	is an API for XML documents. It defines the logical structure of documents and
	the way a document is accessed and manipulated. This paper shows how to create
	a SVG document using the DOM API.

	</p>
	</s1>


	<!-- ##################################################################### -->
	<s1 title="Getting started">
	<p>
	The DOM API defines an interface called <code>DOMImplementation</code> which
	represents the boostrap 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 <code>Document</code>. Then, the concrete <code>Document</code> represents an
	XML document and also acts like a factory for the various DOM objects such
	<code>Element</code>, <code>Attr</code> or XML content.
	</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 <code>SVGDOMImplementation</code>. The following example shows how to get
	a concrete <code>DOMImplementation</code> object.
	</p>

	<source>
	import org.w3c.dom.DOMImplementation;
	import org.apache.batik.dom.svg.SVGDOMImplementation;

	DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();</source>

	<p>
	Once you have an instance of a <code>DOMImplementation</code>, you are not
	relying on proprietary code anymore and ready to use the DOM API.
	</p>

	</s1>

	<!-- ##################################################################### -->
	<s1 title="Creating a Document">

	<p>
	Using the <code>DOMImplementation</code>, you are now able to create a
	<code>Document</code>. The following example illustrate how to create a SVG
	document. Note that the Batik's Document Object Model implementation can be used
	to represent either a SVG document fragment or any kind of XML document. The
	following code shows how to get a concrete <code>Document</code> object using a
	<code>DOMImplementation</code>. Note that by choosing the namespace URI and the
	local name of the root element of SVG, we are creating a SVG document.
	</p>

	<source>
	import org.apache.batik.dom.svg.SVGDOMImplementation;
	import org.w3c.dom.Document;

	DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
	// 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;
	<strong>Document doc = impl.createDocument(svgNS, "svg", null);</strong>
	</source>

	<p>
	As we have created a 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>

	</s1>

	<!-- ##################################################################### -->
	<s1 title="Building a SVG Document">

	<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 a SVG DOM
	implementation, the SVG part is not fully implemented yet so only the DOM Level
	2 core functions should be used. 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>

	<source>
	import org.apache.batik.dom.svg.SVGDOMImplementation;
	import org.w3c.dom.Document;
	import org.w3c.dom.Element;

	DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
	String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
	Document doc = impl.createDocument(svgNS, "svg", null);

	// get the root element (the svg element)
	<strong>Element svgRoot = doc.getDocumentElement();</strong>

	// set the width and height attribute on the root svg element
	<strong>svgRoot.setAttributeNS(null, "width", "400");</strong>
	svgRoot.setAttributeNS(null, "height", "450");

	// create the rectangle
	<strong>Element rectangle = doc.createElementNS(svgNS, "rect");</strong>
	rectangle.setAttributeNS(null, "x", "10");
	rectangle.setAttributeNS(null, "y", "20");
	rectangle.setAttributeNS(null, "width", "100");
	rectangle.setAttributeNS(null, "height", "50");
	rectangle.setAttributeNS(null, "style", "fill:red");

	// attach the rectangle to the svg root element
	<strong>svgRoot.appendChild(rectangle);</strong>
	</source>

	<p>
	The example given has the following equivalent SVG.
	</p>

	<source>
	<svg width="400" height="450">
	<rect x="10" y="20" width="100" height="50" style="fill:red"/>
	</svg>
	</source>

	</s1>

	<!-- ##################################################################### -->
	<s1 title="Rendering a SVG DOM">

	<p>
	Batik provides several ways to use a SVG DOM tree. Two modules can be
	immediately used to render your SVG document.
	</p>
	<dl>
	<dt>JSVGCanvas</dt>
	<dd>
	The <code>JSVGCanvas</code> is a swing component that can display SVG
	document. A SVG document can be specified using a URI or a SVG DOM tree (using
	the <code>setSVGDocument</code> method). For futher informations about the
	<code>JSVGCanvas</code>, see the JSVGCanvas tutorial.
	</dd>
	<dt>ImageTranscoder</dt>
	<dd>
	The <code>ImageTranscoder</code> is a transcoder which can take a URI, an
	InputStream or a SVG DOM tree and produces a raster image (such JPEG or
	PNG). By creating a <code>TranscoderInput</code> with the SVG DOM tree, you will
	be able to transform your SVG content to a raster image. For futher
	informations, see the <link href="rasterizerTutorial.html">Transcoder
	tutorial</link>.
	</dd>
	</dl>


	</s1>

	</body>
	</document>