This is the svg I try to embed:
<script type="image/svg+xml">
<svg width="200" height="200"
style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
id="embeddedSVG">
<g id="myGroup"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From Embedded SVG!</text>
</g>
</svg>
</script>
<noscript>
<h1>Optional fallback content goes here!</h1>
</noscript>
This works fine in ie6-8, SVGweb does:
<OBJECT style="BACKGROUND-COLOR: #d2b48c; DISPLAY: block; MARGIN-BOTTOM: 5px; OVERFLOW: hidden" id=embeddedSVG_flash class=embedssvg name=embeddedSVG_flash codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=200 height=200><PARAM NAME="_cx" VALUE="5291"><PARAM NAME="_cy" VALUE="5291"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="js/svg.swf"><PARAM NAME="Src" VALUE="js/svg.swf"><PARAM NAME="WMode" VALUE="Window"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE="LT"><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="NoScale"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE="D2B48C"><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false">
<embed src="js/svg.swf" quality="high" bgcolor="#d2b48c"
width="200" height="200" id="embeddedSVG_flash" name="embeddedSVG_flash" swLiveConnect="true" allowScriptAccess="always" type="application/x-shockwave-flash" FlashVars="uniqueId=embeddedSVG&sourceType=string&clipMode=both&debug=true&svgId=embeddedSVG" pluginspage="http://www.macromedia.com/go/getflashplayer" style="background-color: #d2b48c; display: block; margin-bottom: 5px;overflow: hidden;"
class="embedssvg" /></OBJECT><NOSCRIPT></NOSCRIPT>
but when I add jQuery:
<script src="js/jquery.js" type="text/javascript"></script>
The SVG does not render in ie6-8 (yet it does in chrome, ff, …):
<script type="image/svg+xml">
<svg width="200" height="200" style="background-color: #D2B48C; display: block; margin-bottom: 5px;" id="embeddedSVG">
<g id="myGroup" fill="blue" style="font-size: 18px; text-anchor: middle; font-family: serif;"> <circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From Embedded SVG!</text>
</g>
</svg>
</script>
I would expect SVGweb to work the same way, independent of whether jQuery is loaded or not.
How do I embed the SVG with SVGweb, so that it gets shown in ie6-8, while jQuery is loaded?
EDIT:
I may have found a solution. If I bring in jQuery before SVGweb it will work. Yet in the SVGweb manual it says:
First, you must bring in the svg.js file into your HTML page as the
first script on your page, before all others
Including jQuery before SVGweb resolves the problem (as pointed out in my edit).