Using SVG to create a grid using load for external SVG files

Using SVG to create a grid using load for external SVG files

Hello,

I am studing SVG plugin for JQuery (http://keith-wood.name/svg.html) and I need some help to understand how I can create a grid of svg images.

My first test was to create a grid drawing and moving rectangles.

  1. for (var j = 0 ; j < 16 ; j ++) {
        for (var i = 0 ; i < 16 ; i++) {                   
            var block = svg.rect(0, 0, 32, 32, 10, 10, {fill: "green"})
            svg.change(block, { x: i * 32, y: j * 32 })
        }
    }




Next, I create a svg file using inkscape and try to replace the rectangles.
  1. for (var j = 0 ; j < 16 ; j ++) {
        for (var i = 0 ; i < 16 ; i++) {                   
            var block = svg.load("block.svg", {addTo: true })
            svg.change(block, { x: i * 32, y: j * 32 })
        }
    }





The problem are that this cause a big overhead in browser (more that 8 loads freeze the firefox) and the change method I receive a JS exception that "element.setAttribute is not a function".

I think that I need to do a preload of "block.svg" instead of load for each block but I don't know how.