SVG, Apache Batik

The Java Drawing with Apache Batik tutorial book I ordered from Amazon arrived, very fast by the way. It seems pretty good. I think it is a must have for anybody starting out with batik. I’m only half way through, but so far I’m glad I bought it. Examples are good. Covers the main parts of Batik: 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:

Introduction

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

Chapter 2 Creating SVG
Drawing in Java
Using SVG Creator
Other Features of SVG Generator
Summary

Chapter 3 Viewing SVG
Displaying Generated SVG Documents
JSVGCanvas Interactivity
Saving the Generated Document
Displaying an SVG File
Summary

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

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

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

Chapter 7 Batik on the Server Side
The SVG Graph Web Application
SVG Filter Effects
SVG Filters Web Application
Summary

Chapter 8 Batik Interactive
SVG and Scripts
Interactivity
Animation
Scripting Alternatives
Using Java for Scripting
Adding Animation 205 Summary

Appendix A Introduction to XML
Benefits of XML
Well-Formed XML Documents
Validating XML Documents
Related XML Resources

Appendix B Introduction to JavaScript
Your First Script
Variables
Arrays
Operators
Loops
Branching in JavaScript
Functions
Objects

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.

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.

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

This info was taken from here.

Yes, I was able to get batik 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.

?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”>

script type=”text/ecmascript”>![CDATA[

var svgNS = “http://www.w3.org/2000/svg”;

function load(evt)
{
var doc = evt.target.ownerDocument;

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);

var pathLength = path.getTotalLength();
//var pt = path.getPointAtLength(dist);

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));

var numGlyphs = Math.floor((pathLength / patternWidth) * 2);

var glyphsStr = “”;

for (var j = 0; j <= numGlyphs; j++)
{
glyphsStr += “A”;
}

var glyphTextPath = document.getElementById(“glyphTextPath” + i);
glyphTextPath.appendChild(document.createTextNode(glyphsStr));
}
}

]]>/script>

defs id=”glyphDefs”>

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

g id=”geometryGroup”>
/g>

Using batik, 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 is also invaluable.

Glyphs along a path, Apache Batik, SVG, Memory test

Finally got glyphs along a path working using hard coded values in an svg. Now I have to port it to batik to make things dynamic. Having problems so far. The svg has been ported over using all the hard coded values, but the applet won’t init. I’ve got things narrowed down & it appears to have something to do with the textPath. I really wish you could search the apache batik mailing list. If anyone knows how, please let me know, maybe I’m missing something.
I did discover the syntax needed when nesting an svg within a defs statement:

defs.appendChild(internalSVGDoc.importNode(symbolDoc.getRootElement(), true));

Somebody really needs to write an in depth batik book or tutorial on how calls such as this are made. The batik javadoc is useless for beginners. Us beginners need to know how to put calls together. We need links to dom tutorials. Something good to get us started. It’s tough putting pieces together.

Wow, I spoke too soon. This book at Amazon is finally available. Woohoo, guess I know what I’ll be ordering next. Looks like it is going fast, only 3 left in stock.

If you are in need of more memory for your computer, check out this site. It will analyze your system & tell you how much memory you have & how much more you could add. Pretty cool. I have a gig, but could max out at 4 gig. The more memory, the better. Definitely a worthwhile investing if you’re planning on keeping your machine for a while.

SVG, Line, Symbol

Ok, so I have a symbol and a line. I want to use the symbol as the stroke of the line to create an svg. No problem, create a pattern using the symbol and set the stroke to the pattern. Seems easy enough, but no go, it doesn’t work right. The symbol needs to follow the curve of the path. As the line changes directions, the symbol needs to also change it’s direction. The symbol needs to outline the curve of the path. So, anyone have any ideas as to how to do that? That will be my research topic for tomorrow.

By the way, Windows Vista is on sale tomorrow atAmazon.

Welcome, Apache Batik, SVG

Welcome to my tech tips blog!
I am a programmer and will mainly focus on new software information I learn in my day to day work. I will also post about any new, cool computer products I hear about and any other computer related information I find useful. Enjoy & feel free to leave comments any time.
Apache Batik, a toolkit for drawing svg in java. It also does other miscellaneous svg related things such as generating an svg or converting an svg to jpeg, gif or png. It’s very cool. All free and open source, my favorite kind of software. Ok, so I’ve been trying to define a stroke in svg, a line in java & use batik to draw the line using the defined stroke in a web browser. There’s very little online in terms of tutorials for batik. The batik site is about the only one for tutorials. Well, I managed to get it working. SVG is very cool! In the svg I created a cdata section, defining 3 strokes like this:
.black12 {stroke:rgb(0,0,0);stroke-width:12}
.yellow8 {stroke:yellow;stroke-width:8}
.red2 {stroke:red;stroke-width:2}
Then add a group section:
g id=”street”>
use xlink:href=”#geometry_path” class=”black12″ />
use xlink:href=”#geometry_path” class=”yellow8″ />
use xlink:href=”#geometry_path” class=”red2″ />
/g>

Note: < needs to be added to the front of each line. I'm having problems displaying the lines when I use <. In java, I create an applet in which I do the following: String parser = XMLResourceDescriptor.getXMLParserClassName();
SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);
String uri = getCodeBase()+”svg/stroke.svg”;
SVGDocument doc = (SVGDocument)f.createDocument(uri);

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

Element defs = doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, “defs”);

// create a line
Element line = doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, “line”);
line.setAttributeNS(null, “id”, “geometry_line”);
line.setAttributeNS(null, “x1”, “10”);
line.setAttributeNS(null, “y1”, “20”);
line.setAttributeNS(null, “x2”, “150”);
line.setAttributeNS(null, “y2”, “100”);

defs.appendChild(line);

// attach the rectangle to the svg root element
svgRoot.appendChild(defs);

svgCanvas = new JSVGCanvas();
// Set size of svg canvas
svgCanvas.setMySize(new Dimension(500, 500));
// Set background color of svg canvas
svgCanvas.setBackground(new Color(255, 255, 255));
svgCanvas.setDocumentState(JSVGCanvas.ALWAYS_DYNAMIC);
svgCanvas.setDoubleBufferedRendering(true);
svgCanvas.setSVGDocument(doc);

One thing I learned is the stroke id names can’t contain an underscore. Example black12 can’t be black_12. Interesting.
Anyways, if you’re interested in learning svg, check out this book:SVG Programming: The Graphical Web by Kurt Cagle. I just ordered and it seems pretty useful. I’m also thinking about ordering this book: Java Drawing with Apache Batik: A Tutorial by Alexander Kolesnikov, Budi Kurniawan, Paul Deck. Other than the batik site, this is the only other batik tutorial I have found. Please let me know if you know of any other batik books or sites.