Take the 2-minute tour ×

I have a large SVG file (approx. 60 MB, 10000x10000 pixels but with the potential to get much larger), and I'm wanting to create, say, many tiled 256x256 PNG images from it (in that example there would be 1600 images; round(10000/256)^2).

Does anyone have any idea of how to do this on a web server (running PHP amongst other things)? I thought about rsvg, but it doesn't seem to have any functionality to modify the bounding box (and I'd rather avoid doing it manually for each section). ImageMagick might be able to do it, but I've not been having much luck with getting it to work. Using rsvg to create a large PNG and then using a tool dedicated to tiling very large images might work, but I've not had any luck finding such a thing! Speed isn't really an issue, although it is desirable, so if the worst comes to the worst, I might look into modifying the SVG's bounding box per section. I could see the generation taking forever, though!

Anyone know of any methods to do this?

share|improve this question
You tried rsvg-convert, then? ubuntuforums.org/showthread.php?t=820965 –  Dave Jarvis Jun 26 '10 at 4:44
Yes; it seems to create a large rendering of it okay, but then I have the problem of splitting it up afterwards. Correct me if I'm wrong, but it doesn't appear to have any inbuilt functionality for tiling or specifying the region (all the operators appear to be for specifying the scale, mostly). –  Robert Jun 26 '10 at 9:04
ImageMagick should definitely be able to do it (it'd probably be easier to conver to a giant png first though) –  Spudd86 Jun 27 '10 at 2:39
add comment

5 Answers

inkscape has a command line mode to export pngs, taking an optional argument to choose which area to export

inkscape vector.svg --export-png=raster.png --export-area=0:0:100:100
share|improve this answer
add comment

I'd look at Apache Batik. In particular, their SVG Rasterizer looks like just what you need.

I've never used it for giant SVG files, though, so I don't know if it's optimized for that case or not.

share|improve this answer
Thanks for the suggestion, but I get an unhelpful "Loading document failed." when using it! I'll investigate, but it looks to be running out of memory, unfortunately. –  Robert Jun 26 '10 at 9:11
This is the one that has given to me the best results –  Pere Dec 28 '12 at 15:39
Java core dumps for me when I tried using Batik to generate a PNG from a particularly large SVG. The dimensions of the SVG were -w 6188 -h 136441. –  spot35 Feb 28 at 17:45
add comment

PanoJS seems to do what you're asking about. You need to convert the SVG to a large PNG first though (e.g. using inkscape on the command line), and then use PanoJS's tilemaker to make the tiles. It is a very memory intensive beast, but if you can get it to run successfully, you can then use the PanoJS Javascript code to point to your webserver. XKCD used it for a large image describing money.

share|improve this answer
add comment

Check out this question i posted earlier and got working.

If the image is only 10000x10000 the script i have in the question works best.

If however you want to use much bigger images check out the script in my anser.

ImageMagick crop huge image

share|improve this answer
add comment

You might want to edit the source properties of your SVG (a copy), to render certain areas only. Use the "width" and "height" properties to match your desired tile size (256) and the "viewBox" to the desired tile area (for example 'viewBox="512 256 768 512"' for the 3rd tile in the second row). You could do something like this in a loop:

$sed = "sed 's/width=\"10000\"/width=\"256\"' ".$sourcefile;
$sed .= " | sed 's/height=\"10000\"/height=\"256\"'";
$sed .= " | sed 's/viewBox=\"0 0 10000 10000\"/viewBox=\"0 0 256 256\"'";
exec($sed." > ".$tmpfile);
exec('rsvg '.$tmpfile.' > '.$tilefile);

I don't know how this behaves on very large files though.

share|improve this answer
add comment

Your Answer


