Ok, so I have the following array of data:

```
shipGrid = [
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','1','0','0','0','0','1','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','0','0','1','1','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','1','0','0','0','0','1','0','0'],
                ['0','0','0','1','1','1','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0'],
                ['0','0','0','0','0','0','0','0','0','0']];

```

Which I have translated into this clickable group of `<li>`'s:
![alt text](https://i.stack.imgur.com/D2C8k.jpg)

Is it possible to convert this array of `<li>`'s into an image of somekind?
It doesn't have to be just a PNG, GIF or JPG - it can be a SVG or Vector based thing.

I'm a bit stumped, I'd like to do it without a server side language - so I thought maybe a SVG library or would work well...?

Cheers.

**edit:** This needs to be viewable in the browser itself.