I use the following code to embed SVGs in HTML. The conditional comments make Internet Explorer only parse the second part and all other Browsers parse the first part.
<!--[if !IE]>--> <object type="image/svg+xml" data="image.svg" width="27" height="27"> Fallback content. </object> <!--<![endif]--> <!--[if IE]> <object classid="clsid: 78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" codebase="http://download.adobe.com/pub/adobe/magic/svgviewer/ win/3.x/3.03/en/SVGView.exe" width="27" height="27" data="image.svg" type="image/svg+xml"> <param name="src" value="image.svg"> <param name="wmode" value="transparent"> Fallback content </object> <![endif]--> The classid and codebase attributes could be changed to point IE to Renesis rather than ASV. The use of classid and codebase attributes causes Internet Explorer to show a dialogue window asking the user if the plugin shoud be downloaded. In other browsers this breaks the object tag. Conditional comments can make up for that, but this way the code needs to be doublicated. It would really be useful to have an XHTML deploy script, so you can just write XHTML, use simple object tags for all kinds of multimedia content and have the script implement all browser specific issues. The first <param> tag provides the url of the SVG in an ASV specific way. Without this <object> has some issues in IE+ASV. The second <param> tag makes transparent parts of the SVG transparent. Otherwise ASV draws on a white background. The <param> tags do not cause problems in other browsers. I guess it would also be sufficient to just add <!--[if IE]> <object id="AdobeSVG" classid="clsid:78156a80- c6a1-4bbf-8e6a-3cd390eeb4e2"></object> <![endif]--> to the head section to ensure that the user will be prompted to download the plugin if it isn't installed yet, and to use only one <object> tag with the two <param> tags for each SVG. I also use IE's implementation of HTML+Time to display an error message if no SVG plugin is installed. To do this add the namespace declaration xmlns:t="urn:schemas-microsoft-com:time" to the <html> tag, and add the processing instruction <?import namespace="t" implementation="#default#time2" ?> in the head section along with a style tag especially for IE: <!--[if IE]><style> .time {behavior:url(#default#time2);} </style><![endif]--> Then place the fallback content for IE (only the second one of the object tags) inside a div with attributes like this: <div id="noasv" class="time" begin="0s"> So that the second part of the embedding code looks like <!--[if IE]> <object classid="clsid: 78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" codebase="http://download.adobe.com/pub/adobe/magic/svgviewer/ win/3.x/3.03/en/SVGView.exe" width="27" height="27" data="image.svg" type="image/svg+xml"> <param name="src" value="image.svg"> <param name="wmode" value="transparent"> <div id="noasv" class="time" begin="0s"> Fallback content </div> </object> <![endif]--> When you now write something like this: <!--[if IE]> <div id="noasvmsg" class="time" begin="noasv.begin;" end="closemsg.click;" timeaction="display" style=" position:absolute; left:1%; width:98%; padding:37% 1em; border:double 6px #FF2222; text-align:center; "> <p> ...Something along the lines of: Your webbrowser is stupid. You can make up for that by downloading a plugin from [here] or download a more advanced browser from [here] ... </p> <div id="closemsg"> -Close this message- </div> </div> <![endif]--> To all browsers except IE this is just a comment. In IE it will be displayed when the object tag's fallback content is shown (because of begin="noasv.begin;") which will only happen if the SVG is not shown. Putting the error message inside a separate <div> not inside the <object> has the advantage that I can use absolute positioning to display it large atop other content. If I'd place it inside the <object> tag the positioning would depend on its ancestor elements. --- In [email protected], "cwflamont" <[EMAIL PROTECTED]> wrote: > > Could someone please point me towards recent thinking on how to get > SVG content to download and display properly in Multiple browsers? > > The best I can find so far is at: > > http://wiki.svg.org/Inline_SVG > > but even then I find that it needs to be stored as an .html file for > it download and display properly in Internet Explorer(7) but as an > .xhtml to work with Firefox(3.0) & Opera(9.5). > > I find that if I try to open an .xhtml file in IE, it opens it in Ff. > This is despite doing the registry item deletion (to do with IE6 + IE7 > Beta) I found somewhere. > > The similar, but more elaborate example at: > > http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml > > works less well for me, in that even when given an .html suffix it > still does not display the SVG in Explorer. > > Does referencing the SVG as an <object/> make things better or worse? > > Clue? > ------------------------------------ ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
