Batch Convert SVG to PNG Raster

Need to batch convert svg to png? I have a few thousand .svg files that I need to convert to raster, namely .png. I ended up using ImageMagick. Apparently it is the standard tool to use. However, Inkscape and Apache Batik are also capable of converting svg to a raster format.
ImageMagick has a convert tool and a mogrify tool which can convert svg to png.
What I want to do is covert my few thousand .svg files to .png files using the same file name as the .svg files, only with the .png extension.
For some reason, I couln’t do that with the convert command. All of the output files needed to have part of the file name given, so that numbers could be appended to it, or a full file name given, in which case only one output file was created.
I poked around a bit and discovered the mogrify command would use the input file names to create the output file names, only with the .png extension instead of the .svg extension. I also needed the .png files to be a certain size, which mogrify also allows.
Here is the command I used:

mogrify -resize widthxheight -format png *.svg

where width is the desired width of the .png, ex: 100, and height is the desired height of the .png, ex: 100.
Worked great and I now have my batch of .svg files converted to .png files in the size I need.

More SVG

More ImageMagick

More Inkscape

More Apache Batik

Apple iTunes

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.

Apache Batik, Element ID, Width value

Using Apache Batik & need to get the ID of an element? Try doing this:

// Get ID of first g element
NodeList gElements = symbolSVGRoot.getElementsByTagNameNS(svgNS, “g”);
Element firstGElement = (Element)gElements.item(0);
String gID = firstGElement.getAttribute(“id”);

Need to get the width value of the svg element? Try doing this:

String widthAttribute = symbolSVGRoot.getAttribute(“width”);
If the value has units specified, such as mm, do this to get the actual value:

String patternWidth = widthAttribute.substring(0, widthAttribute.length()-2);

Now to figure out my next problem:
How to use Batik to get the total length of a path. Apparently you can use SVGPathElement.getTotalLength, but it’s just not working for me yet.

Apache Batik, VMWare Workstation

Ah ha, I figured out why I couldn’t get apache batik to draw. In the java code, I was adding a child element to the wrong parent. Did discover batik doesn’t support the textpath method=stretch feature and the font-face font-stretch feature. That sucks. For the most part, what I’m getting looks good, but there’s either a gap or an overhang due to not being able to stretch the glyph. Let’s hope at least one of those features becomes available in a future batik release.

Oh, and I discovered the batik mail archive is searchable at a different link than what’s given at the batik site. Try this site or this site. What a puzzle. Thank goodness for the internet. I really hope the batik tutorial book I ordered is useful.

VMWare Workstation. One of the best tools ever. It’s an application which lets you run one operating system on another. For example, I have the windows version of vmware. Inside that I can run linux, solaris, or another version of windows. I can run multiple operating systems at once too, share files between windows & linux, access the internet. It’s awesome! Pretty cheap too, for what it does. There’s a free VMWare Player available which gives you an idea what VMWare Workstation does. Check it out if you’re interested in running linux, but also want to use windows, or vice versa. If you’re a developer, it comes in really handy testing your applications on multiple platforms. One thing to note: solaris support is still limited.

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.

Apache Batik

I’m currently using Apache Batik to draw an svg in the browser window. Part of what I need to do is create a pattern for an area using a third party svg. I was having problems creating the image tag in batik. Apparently for images you need to explicitly set the namespace for the attribute like this:

Element image = document.createElementNS(“http://www.w3.org/2000/svg”,”image”);
image.setAttributeNS(null,”width”,imageWidth);
image.setAttributeNS(null,”height”,imageWidth);
image.setAttributeNS(“http://www.w3.org/1999/xlink”,”href”,”name.svg”);
parentGroup.appendChild(image); //parentGroup needs to be an existing
node reference to a group where the images should be appended

Cool. Works now, just wish I could find a site with some good advanced batik tutorials. Like where do I find info that tells me images need the namespace explicitly set. The batik site has a few tutorials, but are basically getting started tutorials. BTW, the Apache Batik site has been re-designed. I definitely like it better than the old design.

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.