Friday, January 19, 2007

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.

No comments: