Hi Christopher,

Three comments:
IE is not happy unless the embed is sitting in the page at load,plus it tends to
ingore a dynamic src, and also, in my experience, the wmode seens to add an
excessive overhead to svg rendering.

I'm amazed that you can get at least one svg file to render:). Probably what's
happening is the ones that load, written with your script, do render before IE
decides that the embed wasn't resident. That's confirmed, I think. because of
the randomness of the poor response.

I'm not a cross-browser developer; I create stuff exclusively in IE/ASV...saves
what's left of my sanity.
With that said, I still want to Help.

If the other browser(s) you're trying satisfy have the ability to scrunch down a
span to either zero-size or 1x1 pixel(OK in IE) then
you can open either the object, or embed depending on the browser.
As follows:

<span id=embedSpan style='width:1;height:1;overflow:hidden'>
<embed src=="res/images/foo.svg" width=20 height=20
type="image/svg+xml"></embed>
</span>

<span id=objectSpan style='width:1;height:1;overflow:hidden'>
<object type="image/svg+xml" width="20" height="20"
data="res/images/foo.svg">
<img alt="Foo" src="res/images/foo.png" width="20" height="20"/>
</span>

if IE:
embedSpan.style.overflow=''
embedSpan.style.width=20
embedSpan.style.height=20

That's the only idea I have at present,

Regards,
Francis



--- In svg-developers@yahoogroups.com, "CPK Smithies" <c.1@...> wrote:
>
> Greetings, Francis. This is the sort of thing that I'd be using, e.g.
> for a button icon:
>
> <object type="image/svg+xml" width="20" height="20"
> data="res/images/foo.svg">
> <img alt="Foo" src="res/images/foo.png" width="20" height="20"/>
> </object>
>
> Now this would give an image on a white background, a bit like webkit
> for MacOS/Linux, so to correct this for IE I'd include the following
> script to convert the objects to embeds:
>
> ((begin javascript))
>
> // IE-specific script to improve IE's SVG handling
> if (window.attachEvent) window.attachEvent('onload', function() {
> var obs = document.getElementsByTagName('object');
> for (var i = 0; i < obs.length; ) {
> var ob = obs[i];
> if (ob.getAttribute('type') != 'image/svg+xml') {
> ++i;
> continue;
> }
> var em = document.createElement('embed');
> var copyatt = [
> 'id', 'width', 'height', 'marginLeft', 'marginRight', 'marginTop',
> 'marginBottom', 'float', 'clear'
> ];
> em.setAttribute('src', ob.getAttribute('data'));
> em.setAttribute('wmode', 'transparent'); // important for IE
> em.setAttribute('type', 'image/svg+xml');
> var j;
> for (j = 0; j < copyatt.length; ++j) {
> var att;
> if (typeof ob.attributes[att = copyatt[j]] != 'undefined' &&
> ob.getAttribu
> em.setAttribute(att, ob.getAttribute(att));
> else if (ob.style[att] != "")
> em.style[att] = ob.style[att];
> }
> while (j = ob.firstChild) em.appendChild(ob.removeChild(j));
> ob.parentNode.replaceChild(em, ob);
> }
> });
>
> ((end javascript))
>
> This would be in a page conforming to XHTML 1.1.
>
> As I say, the problem would typically manifest itself by some of the SVG
> images simply not loading (even if the self-same image were already
> displayed elsewhere on the page). Typically the code to generate the
> HTML would be generated by the exact same script in every case, so no
> individual variations. And the loading/non-loading would be random -
> sometimes all there, sometimes two or three missing, hardly ever the
> same twice. And this with exactly the same being served to the client.
>
> The SVGs would be small and basic, none including raster components,
> just a few paths, but some containing script.
>
> Kindest regards,
>
> Christopher Smithies
>
>