{"id":107,"date":"2005-06-21T06:35:11","date_gmt":"2005-06-21T12:35:11","guid":{"rendered":"\/?p=107"},"modified":"2005-06-21T06:35:11","modified_gmt":"2005-06-21T12:35:11","slug":"detecting-svg-viewer-capabilities","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2005\/06\/21\/detecting-svg-viewer-capabilities\/","title":{"rendered":"Detecting SVG Viewer Capabilities"},"content":{"rendered":"<p>The problem I've encountered so far when deploying <a href=\"http:\/\/www.w3.org\/Graphics\/SVG\" title=\"Scalable Vector Graphics\">SVG<\/a> content is that, of the various major configurations of SVG-enabled browsers out there, the most popular configuration (Internet Explorer + Adobe SVG Viewer 3.0) only seems to work nicely with the <strong>&#60;embed&#62;<\/strong> tag, but all other implementations (Opera and Mozilla Firefox) work nicely (and sometimes ONLY) with the <strong>&#60;object&#62;<\/strong> tag and NONE currently work at all with the <strong>&#60;img&#62;<\/strong> tag.  What a hairy mess!  Let's come up with a simple solution...  <!--more--><\/p>\n<div class=\"ads\"><object type=\"text\/html\" width=\"468\" height=\"60\" data=\"http:\/\/www.codedread.com\/gads.php\"><\/object><\/div>\n<p>We can write off &#60;img&#62; support for awhile until Opera and Firefox fix their bugs, so I'll just concentrate on being able to provide the &#60;embed&#62; tag instead of the &#60;object&#62; when we have Internet Explorer + ASV.  I'd like to author my (X)HTML document by putting my SVG bits inside an &#60;object&#62; tag and then have a simple JavaScript function that will <em>transmogrify<\/em> any &#60;object&#62; tags into &#60;embed&#62; tags if the user agent is Internet Explorer and the Adobe SVG Viewer is installed.  Such a solution is the best out of several lesser alternatives because:<\/p>\n<ul>\n<li>The &#60;embed&#62; tag is non-standard and should be deprecated where possible.  In the far future my script should not be necessary and can be simply removed while the underlying &#60;object&#62; markup will still function.<\/li>\n<li>Authoring with &#60;embed&#62; tags would mean there is no way to present alternate content should the user agent be unable to display SVG.  The &#60;noembed&#62; tag doesn't help us, since the contents of the &#60;noembed&#62; are only displayed if the user agent does not support the &#60;embed&#62; tag (not SVG content, a big difference).<\/li>\n<li>A pure JavaScript solution would prevent search engines from indexing the content<\/li>\n<\/ul>\n<p>I came across <a href=\"http:\/\/www.design-ireland.net\/index.php?http%3A\/\/www.design-ireland.net\/graphics\/imagery-11.php\">this article<\/a> from Design-Ireland.net that gives an example of how to detect IE and ASV.  Adobe also has their versions of this <a href=\"http:\/\/support.adobe.com\/devsup\/devsup.nsf\/docs\/51780.htm\">here<\/a> and <a href=\"http:\/\/www.adobe.com\/svg\/workflow\/autoinstall.html\">here<\/a> page.  The Adobe find is especially intriguing because it explains how the Adobe SVG Viewer can be detected and if not installed, how to automatically download via a user prompt.  Looking at these Adobe pages, it is obvious that the code is a little out of date:  the MIME type is \"image\/svg-xml\" and there are now a couple native SVG choices (Opera and Firefox 1.1) but it does have an example of how to detect if ASV is installed by checking for the ActiveX object.  I may use a version of this Adobe code to eventually help automate the install of ASV on my website.<\/p>\n<p>Both of the above examples use a bit of VBScript to do this, but I decided to keep everything as JavaScript (at the cost of breaking compatibility with older browsers due to the try-catch block needed).  The code is posted at <a href=\"http:\/\/www.codedread.com\/lib\/svglib.js\">http:\/\/www.codedread.com\/lib\/svglib.js<\/a>.<\/p>\n<p>An author would write their HTML like:<\/p>\n<div class=\"code\">\n&#60;html&#62;<br \/>\n&#60;head&#62;<br \/>\n<strong>&#160;&#160;&#60;script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/lib\/svglib.js\"&#62;&#60;\/script&#62;<\/strong><br \/>\n&#60;\/head&#62;<br \/>\n&#60;body <strong>onload=\"cleanSvg()\"<\/strong>&#62;<br \/>\n&#160;&#160;&#60;object data=\"button.svg\" type=\"image\/svg+xml\" width=\"100\" height=\"50\"&#62;<br \/>\n&#160;&#160;&#160;&#160;&#60;p style=\"color:red\"&#62;Error! You need to have a browser that supports &#60;strong&#62;SVG&#60;\/strong&#62;, go download....&#60;\/p&#62;<br \/>\n&#160;&#160;&#60;\/object&#62;<br \/>\n&#60;\/body&#62;<br \/>\n&#60;\/html&#62;\n<\/div>\n<p>In the IE+ASV case, the above HTML code will get <em>transmuted<\/em> into the following code:<\/p>\n<div class=\"code\">\n&#60;html&#62;<br \/>\n&#60;head&#62;<br \/>\n&#160;&#160;&#60;script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/lib\/svglib.js\"&#62;&#60;\/script&#62;<br \/>\n&#60;\/head&#62;<br \/>\n&#60;body onload=\"cleanSvg()\"&#62;<br \/>\n&#160;&#160;&#60;embed class=\"svgex\" src=\"button.svg\" type=\"image\/svg+xml\" width=\"100\" height=\"50\"&#62;<br \/>\n&#160;&#160;&#160;&#160;&#60;noembed&#62;<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#60;p style=\"color:red\"&#62;Error! You need to have a browser that supports &#60;strong&#62;SVG&#60;\/strong&#62;, go download....&#60;\/p&#62;<br \/>\n&#160;&#160;&#160;&#160;&#60;\/noembed&#62;<br \/>\n&#160;&#160;&#60;\/embed&#62;<br \/>\n&#60;\/body&#62;<br \/>\n&#60;\/html&#62;\n<\/div>\n<p>One enhancement I will have to make eventually is to transform the &#60;param&#62; elements within the &#60;object&#62; element into applicable attributes within the &#60;embed&#62; element. This will be especially useful for the pluginspage parameter.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The problem I&#8217;ve encountered so far when deploying SVG content is that, of the various major configurations of SVG-enabled browsers out there, the most popular configuration (Internet Explorer + Adobe SVG Viewer 3.0) only seems to work nicely with the &#60;embed&#62; tag, but all other implementations (Opera and Mozilla Firefox) work nicely (and sometimes ONLY) [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,25,46,11,28],"tags":[],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","category-javascript","category-software","category-svg","category-technology","category-web"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}