Here are some news (I hope it's better to put them here in an answer, instead of editing my questions or to create a new question. Please feel free to move it if needed, or to tell me, so as I can rectify):

My problem was the following:

var oldmap = new GGroundOverlay(test.svg, boundaries);

map.addOverlay(oldmap);

did not work on Safari 3, Firefox and Opera (IE is not enable to draw SVG).

In fact, this code produce the insertion (in a <div>) of the following element

<img src=test.svg style=.....>

And Safari 4 is able to draw a SVG file as an image, but this is not the way to do for the other browser. So the idea is now to create a custom overlay for the SVG, as explained here.

That's the reason why I asked for this question (I am sorry, but HTML/javascript are not my strongest points).

And since there is a small bug with Webkit for rendering a SVG with transparent background with <object>element, I need to use <object> or <img> accordingly to the browser (I don't like this, but... for the moment, it's still the quick-and-dirty experiments)

So I started with this code (still work in progress):

// create the object

function myOverlay(SVGurl, bounds)

{

    this.url_ = SVGurl;

    this.bounds_ = bounds;

}



// prototype

myOverlay.prototype = new GOverlay();



// initialize

myOverlay.prototype.initialize = function(map)

{

    // create the div

    var div = document.createElement(div);

    div.style.position = absolute;

    div.setAttribute('id',SVGdiv);

    div.setAttribute('width',900px);

    div.setAttribute('height',900px);



    // add it with the same z-index as the map

    this.map_ = map;

    this.div_ = div;



    //create new svg root element and set attributes

    var svgRoot;

    if (BrowserDetect.browser=='Safari')

    {

        // Bug in webkit: with <objec> element, Safari put a white background... :-(

        svgRoot = document.createElement(img);

        svgRoot.setAttribute(id, SVGelement);

        svgRoot.setAttribute(type, image/svg+xml);

        svgRoot.setAttribute(style,width:900px;height:900px);

        svgRoot.setAttribute(src, test.svg);

    }

    else //if (BrowserDetect.browser=='Firefox')

    {

        svgRoot = document.createElement(object);

        svgRoot.setAttribute(id, SVGelement);

        svgRoot.setAttribute(type, image/svg+xml);

        svgRoot.setAttribute(style,width:900px;height:900px;);

        svgRoot.setAttribute(data, test.svg);

    }





    div.appendChild(svgRoot);

    map.getPane(G_MAP_MAP_PANE).appendChild(div);



    //this.redraw(true);

} 



...

The draw function is not yet written.

I still have a problem (I progress slowly, thanks to what I read/learn everywhere, and also thanks to people who answer my questions).

Now, the problem is the following : with the <object> tag, the map is not draggable. All over the <object> element, the mouse pointer is not the hand icon to drag the map, but just the normal pointer.

And I did not find how to correct this. Should I add a new mouse event (I just saw mouse event when a click or a double-click append, but not for dragging the map...) ?

Or is there another way to add this layer so as to preserve the drag-ability ?

Thank you for your comments and answers.

PS: I also try to add one by one the elements of my SVG, but... in fact... I don't know how to add them in the DOM tree. In this example, the SVG is read and parsed with GXml.parse(), and all the elements with a given tag name are obtained (xml.documentElement.getElementsByTagName) and added to the SVG node (svgNode.appendChild(node)). But in my case, I need to add directly the SVG/XML tree (add all its elements), and there are different tags (<defs>, <g>, <circle>, <path>, etc.). It is may be simpler, but I don't know how to do.. :(