{"id":152,"date":"2007-02-21T23:21:00","date_gmt":"2007-02-21T23:21:00","guid":{"rendered":"https:\/\/zofxare.com\/zofxare\/blog\/2007\/02\/21\/svg-apache-batik\/"},"modified":"2007-02-21T23:21:00","modified_gmt":"2007-02-21T23:21:00","slug":"svg-apache-batik","status":"publish","type":"post","link":"https:\/\/zofxare.com\/zofxare\/blog\/2007\/02\/21\/svg-apache-batik\/","title":{"rendered":"SVG, Apache Batik"},"content":{"rendered":"

The Java Drawing with Apache Batik tutorial book <\/a>I ordered from Amazon<\/a> arrived, very fast by the way. It seems pretty good. I think it is a must have for anybody starting out with batik<\/a>. I’m only half way through, but so far I’m glad I bought it. Examples are good. Covers the main parts of Batik<\/a>: Generator, Transcoder, PrettyPrinter, JSVGCanvas. Also covers DOM, how to save to a file. Doesn’t seem to do much with glyphs though or get into how to use it in specific areas such as GIS. Although I’m not finished yet, so maybe in later chapters. Here’s the table of contents:<\/p>\n

Introduction<\/p>\n

Chapter 1 Getting Started with Batik
Batik Overview
Batik in Real World Projects
Your First SVG Document
Using SVG Rasterizer
Using Pretty-Printer
What Else Comes with Batik?
Summary<\/p>\n

Chapter 2 Creating SVG
Drawing in Java
Using SVG Creator
Other Features of SVG Generator
Summary<\/p>\n

Chapter 3 Viewing SVG
Displaying Generated SVG Documents
JSVGCanvas Interactivity
Saving the Generated Document
Displaying an SVG File
Summary<\/p>\n

Chapter 4 Working with Transcoders
The Transcoder API
Using Transcoders in Applications
Setting the Area of Interest
Using the SVGTranscoder for Pretty Printing
The Enhanced Version of the SVG File Viewer
Summary<\/p>\n

Chapter 5 Document Object Model
SVG Document as a DOM Tree
Creating Documents with the DOM API
Building an SVG Document
Working with Gradients
Using the DOM API
Other Thoughts
Summary<\/p>\n

Chapter 6 Working with Text and Fonts
Using the text Element
SVG Fonts
Using the Font Converter
Using SVG Fonts in a Document
Text Workbench: SVG Writer
Text Elements, Text Nodes, and Text Content
Characters Positioning
Using tspan elements
Text Layout
Text on A Path
Text Selection
Summary<\/p>\n

Chapter 7 Batik on the Server Side
The SVG Graph Web Application
SVG Filter Effects
SVG Filters Web Application
Summary<\/p>\n

Chapter 8 Batik Interactive
SVG and Scripts
Interactivity
Animation
Scripting Alternatives
Using Java for Scripting
Adding Animation 205 Summary<\/p>\n

Appendix A Introduction to XML
Benefits of XML
Well-Formed XML Documents
Validating XML Documents
Related XML Resources<\/p>\n

Appendix B Introduction to JavaScript
Your First Script
Variables
Arrays
Operators
Loops
Branching in JavaScript
Functions
Objects<\/p>\n

and a description:
This guide to Apache Batik, the Java library that can be used to read SVG files and translate the instructions in the files into graphics, shows how Batik can also be used to save the graphics as JPEG, TIFF, PNG, GIF, and other formats, so that the graphics can be transferred. Using Batik to create animation similar to Flash movies and its use for creating a drawing program such as Corel DRAW are also covered. <\/p>\n

Scalable Vector Graphics (SVG) is an XML-based language for describing two-dimensional vector graphics and vector\/raster graphics. The SVG specification describes in great detail how different shapes can be created, manipulated, transformed, and animated. In particular, SVG 1.1 defines:
Basic shape elements such as rectangle, circle, ellipse, line, polyline, and polygon.
Basic data types, such as integer, number, length, and angle.
The structure of an SVG document.
How to apply styles in an SVG document.
How to deal with text and how to use fonts.
How to work with colors, gradients, and patterns.
How and in which order elements should be rendered.
Which filter effects should be available and how to apply them.
How to animate images. <\/p>\n

Apache Batik is a free and open-sourced implementation of SVG. It comes with tools and sample applications that demonstrate the power of SVG and Batik. This book is an easy-to-read tutorial on Batik. It teaches you how to use the tools in Batik and gets you started with Batik programming. In addition, it explains the following topics:
Batik implementation of the SVG specification
Batik API
SVG viewer
Transcoder and image format transcoding
Rasterizer
Document Object Model API
Text and fonts
Using Batik on the server side
Interactivity
Animation
Gradients
Filter effects <\/p>\n

This info was taken from here<\/a>.<\/p>\n

Yes, I was able to get batik<\/a> to draw a polygon, using an svg as the stroke and to do it correctly, not with the fill setting.
What you do is, first create a skeleton svg which contains a script to get the paths, calculate each path length, get the width of the svg you want to use as stroke. Divide path length by that to get the number of glyphs & then do a loop creating the glyph string. <\/p>\n

?xml version=”1.0″ standalone=”no”?>
!DOCTYPE svg PUBLIC “-\/\/W3C\/\/DTD SVG 1.0\/\/EN”
“http:\/\/www.w3.org\/TR\/2001\/REC-SVG-20010904\/DTD\/svg10.dtd”>
svg onload=”load(evt)” xmlns=”http:\/\/www.w3.org\/2000\/svg”
xmlns:xlink=”http:\/\/www.w3.org\/1999\/xlink”><\/p>\n

script type=”text\/ecmascript”>![CDATA[<\/p>\n

var svgNS = “http:\/\/www.w3.org\/2000\/svg”;<\/p>\n

function load(evt)
{
var doc = evt.target.ownerDocument;<\/p>\n

var geometryGroup = doc.getElementById(“geometryGroup”);
var pathList = geometryGroup.getElementsByTagNameNS(svgNS, “path”);
var numPaths = pathList.length;
for (var i = 0; i < numPaths; i++)
{
var path = pathList.item(i);<\/p>\n

var pathLength = path.getTotalLength();
\/\/var pt = path.getPointAtLength(dist);<\/p>\n

var glyphDefs = doc.getElementById(“glyphDefs”);
var symbolSVG = glyphDefs.getElementsByTagNameNS(svgNS, “svg”).item(0);
var widthAttribute = symbolSVG.getAttributeNS(null, “width”);
var patternWidth = parseFloat(widthAttribute.substring(0, widthAttribute.length – 2));<\/p>\n

var numGlyphs = Math.floor((pathLength \/ patternWidth) * 2);<\/p>\n

var glyphsStr = “”;<\/p>\n

for (var j = 0; j <= numGlyphs; j++)
{
glyphsStr += “A”;
}<\/p>\n

var glyphTextPath = document.getElementById(“glyphTextPath” + i);
glyphTextPath.appendChild(document.createTextNode(glyphsStr));
}
}<\/p>\n

]]>\/script><\/p>\n

defs id=”glyphDefs”><\/p>\n

font id=”myFont”>
font-face font-family=”myFont”\/>
missing-glyph\/>
glyph unicode=”A”>
g>
use\/>
\/g>
\/glyph>
\/font>
\/defs><\/p>\n

g id=”geometryGroup”>
\/g><\/p>\n

<\/svg><\/p>\n

Using batik<\/a>, you create a group for each path, add that info to the skeleton svg using the dom, add the svg you want to use as the stroke to the defs section, fill in units-per-em & horiz-adv-x info & any other missing info. Add that to the canvas & draw. Very cool.
This site<\/a> is also invaluable.<\/p>\n