As follow-on work to my previous post Inline dynamic SVG from XML with Ajax where I discussed how to incorporate dynamically generated SVG in your web page, I've been trying to figure out how to make IE correctly prompt you to install the SVG plugin. That is usually accomplished with the PLUGINSPAGE
attribute of the embed
tag (see http://developer.apple.com/quicktime/compatibility.html for a nice explanation of the technique), but I'm using the object
tag (which is recommended since it complies with the W3C HTML specifications while embed does not and it allows the data to be added inline). Unfortunately, adding the codebase
attribute of http://www.adobe.com/svg/viewer/install/
(the Adobe SVG Viewer install site) and the classid
attribute of clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2
(the Adobe SVG Viewer ActiveX control id) didn't do what I had hoped for.
I haven't figured out how to make IE prompt for the plugin yet, but I did find this page which provides an alternative method to check for IE and alternate using the object
or the embed
(in his case or inline SVG in my example) rather than using the isASVInstalled()
method I used.
In his example, Spartanicus uses the MS "uplevel revealed" conditional comment to define a CSS type as:
.svg{display:none}
*>.svg{display:inline}
Then his HTML looks like:
<!--[if IE]><embed src="img/butterfly_vector.svg" height="120" width="170"><![endif]-->
<object data="img/butterfly_vector.svg" type="image/svg+xml" class="svg" height="120" width="170"/>
Where the class of
svg
in the object
version will causes it not to display if not in Internet Explorer.It's an interesting technique, but in my case of inline generated SVG where I can't use the
embed
tag since I have no src
so I'd have to insert the SVG inline for IE and then also have the wrapped object version. Unfortunately, the non-object version would still display the data in the SVG XML even though it would not be an SVG graphic which would look terrible. So, it doesn't really help me in this case, but I thought it was interesting.
No comments:
Post a Comment