{"id":206,"date":"2006-01-13T22:02:30","date_gmt":"2006-01-14T04:02:30","guid":{"rendered":"http:\/\/blog.codedread.com\/?p=206"},"modified":"2006-01-13T22:02:30","modified_gmt":"2006-01-14T04:02:30","slug":"inlaying-svg-with-html","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2006\/01\/13\/inlaying-svg-with-html\/","title":{"rendered":"Inlaying SVG with HTML"},"content":{"rendered":"<p>After <a href=\"http:\/\/rr.latenightpc.com\/wp\/archives\/2006\/01\/13\/embedding-svg-in-wordpress-posts\/\">Rob called my code ugly<\/a>, I decided to update my technique for embedding SVG into HTML and it finally crystallized into a nice solution for me.  I hesitate to say \"embedding\" because that might imply that I condone the <em>&#60;embed&#62;<\/em> tag, when in fact I only use it at gunpoint.  <a href=\"http:\/\/rr.latenightpc.com\/wp\/\">Rob<\/a> came up with a suitable term for including SVG in a HTML document:  inlaying (as opposed to inlining).  <!--more--><\/p>\n<p><script language=\"JavaScript\" src=\"http:\/\/www.codedread.com\/yahooads.js\"><\/script><br \/>\n<script language=\"JavaScript\" src=\"http:\/\/ypn-js.overture.com\/partner\/js\/ypn.js\"><\/script><\/p>\n<p>At first glance, this seems like such a simple thing.  Most people out there think it's as simple as using the &#60;object&#62; tag, and let me be clear:  ideally it should be.  However, in my experience the Adobe SVG Viewer (especially version 3.0) tends to have a problem including SVG documents in an <em>&#60;object&#62;<\/em> tag and prefers to non-standard <em>&#60;embed&#62;<\/em> tag,  Of course, other browsers (Firefox and Opera) have various problems with <em>&#60;embed&#62;<\/em>.  Typical web developer frustration.<\/p>\n<p>I found it interesting to see how my practices had changed on this matter in seven or so months:<\/p>\n<ul>\n<li>My first approach, like <a href=\"http:\/\/labs.silverorange.com\/archives\/2006\/january\/howtoinclude\">this guy<\/a>, was to simply use <em>&#60;object&#62;<\/em> tags because I didn't know at that time that ASV only worked perfectly with <em>&#60;embed&#62;<\/em> tags.<\/li>\n<li>Upon learning this, <a href=\"http:\/\/blog.codedread.com\/archives\/2005\/06\/21\/detecting-svg-viewer-capabilities\/\">I wrote some JavaScript<\/a> that would scan the page and transform any <em>object<\/em> tags referencing SVG content into <em>embed<\/em> tags if ASV is detected as installed.  This has the benefit of keeping the web page author out of the sticky mess (except for including the JavaScript in the document's onload event handler) but it resulted in reduced page loading time.  Furthermore, I later discovered that ASV acted funny with this sometimes (i.e. it wasn't a perfect solution).  Another problem is that the <em>embed<\/em> tag does not provide any mechanism to provide fallback content.  This means that if a user hadn't downloaded ASV, their page would be broken.<\/li>\n<li>In the fall of last year, I learned about IE's \"<a href=\"http:\/\/msdn.microsoft.com\/workshop\/author\/dhtml\/overview\/ccomment_ovw.asp\">conditional comments<\/a>\" from <a href=\"http:\/\/oskamp.dyndns.org\/SiemensClock\/SVG\/SiemensClock.xhtml\">Stefan Oskamp<\/a> who devised a technique of including an SVG image in a HTML document so that I could drop the JavaScript mentioned above.  I published that technique <a href=\"http:\/\/blog.codedread.com\/archives\/2005\/12\/01\/guide-to-deploying-svg-with-html\/\" title=\"Guide to Deploying SVG with HTML\">here<\/a>.  Using conditional comments, I can supply an <em>embed<\/em> to IE and an <em>object<\/em> with fallback content to all other browsers.  It has the benefit of providing a static document (i.e. no scripting involved that changed the document at load time) but it has the disadvantages of 1) lengthier HTML code and 2) <em>embed<\/em> still doesn't provide a mechanism for fallback content<\/li>\n<li>At the end of last month, I finally put most of the pieces together and used some JavaScript with the above solution to provide fallback content dynamically.  Unfortunately this lengthens the code considerably and the author has to write the fallback content in THREE different places.  It also requires scripting be enabled to see the SVG in IE (though I consider this to be acceptable).<\/li>\n<\/ul>\n<p><script language=\"JavaScript\" src=\"http:\/\/www.codedread.com\/yahooads.js\"><\/script><br \/>\n<script language=\"JavaScript\" src=\"http:\/\/ypn-js.overture.com\/partner\/js\/ypn.js\"><\/script><\/p>\n<p>So now we arrive at yesterday where I realized the obvious:  Since my sites are PHP-based, I will simply provide a PHP function that constructs all the HTML+JS code for me.  If Adobe releases a viewer that handles <em>object<\/em> properly, I can update my PHP function to simply spit out an <em>object<\/em> and forget about <em>embed<\/em> forever.<\/p>\n<p><a href=\"http:\/\/www.codedread.com\/lib\/svginlay.inc\" title=\"PHP Library to Inlay SVG\">Click here to view the PHP source<\/a><\/p>\n<p>To use this PHP library, you include the file once at the top of the web page like so:<\/p>\n<div class=\"code\">&#60;?php include \"svginlay.inc\"; ?&#62;<\/div>\n<p>Then to \"inlay\" an SVG document into your HTML you use this PHP fragment:<\/p>\n<div class=\"code\">&#60;?php inlaySVG('some_id', 'myfile.svg', 500, 375, '&#60;p&#62;Click &#60;a href=\"http:\/\/www.adobe.com\/svg\/main.html\"&#62;here&#60;\/a&#62; to download the Adobe SVG Viewer&#60;\/p&#62;'); ?&#62;<\/div>\n<p>This will inlay <em>myfile.svg<\/em> into your HTML page via an object\/embed frame (depending on the viewer's browser) with id='some_id' and dimensions 500x375.  If the viewer's browser does not support SVG, fallback content is provided in the form of a link to download the SVG Viewer.<\/p>\n<p>One caveat is that the fallback string must be properly formatted PHP string.  This means that if you start the string with single quotes in PHP, then you should use double-quotes within the fallback string to represent quotation marks.  In other words, the string has to be valid PHP and the string contents have to be valid HTML.<\/p>\n<p>The HTML code that this PHP function call produces is:<\/p>\n<div class=\"code\">\n&#160;&#160;&#60;!--[if IE]><br \/>\n&#160;&#160;&#160;&#160;&#60;script type='text\/javascript'><br \/>\n&#160;&#160;&#160;&#160;try{<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;new ActiveXObject('Adobe.SVGCtl');<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;document.write('&#60;embed id=\"some_id\" width=\"500\" height=\"375\" src=\"myfile.svg\" class=\"svgex\"\/>');<br \/>\n&#160;&#160;&#160;&#160;} catch(e) {<br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;document.write('&#60;p&#62;Click &#60;a href='http:\/\/www.adobe.com\/svg\/main.html'&#62;here&#60;\/a&#62; to download the Adobe SVG Viewer&#60;\/p&#62;');<br \/>\n&#160;&#160;&#160;&#160;}<br \/>\n&#160;&#160;&#160;&#160;&#60;\/script><br \/>\n&#160;&#160;&#160;&#160;&#60;noscript><br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#60;p&#62;Click &#60;a href='http:\/\/www.adobe.com\/svg\/main.html'&#62;here&#60;\/a&#62; to download the Adobe SVG Viewer&#60;\/p&#62;<br \/>\n&#160;&#160;&#160;&#160;&#60;\/noscript><br \/>\n&#160;&#160;&#60;![endif]--><br \/>\n&#160;&#160;&#60;![if !IE]><br \/>\n&#160;&#160;&#160;&#160;&#60;object id=\"some_id\" type=\"image\/svg+xml\" data=\"myfile.svg\" width=\"500\" height=\"375\"><br \/>\n&#160;&#160;&#160;&#160;&#160;&#160;&#60;p&#62;Click &#60;a href='http:\/\/www.adobe.com\/svg\/main.html'&#62;here&#60;\/a&#62; to download the Adobe SVG Viewer&#60;\/p&#62;<br \/>\n&#160;&#160;&#160;&#160;&#60;\/object><br \/>\n&#160;&#160;&#60;![endif]>\n<\/div>\n<p>You can see the reason why the PHP file is a good idea.  The above is a pretty hefty stretch of code to simply include an SVG document with fallback content.  The PHP file keeps your code much cleaner and you can centrally maintain the inlaying functionality.<\/p>\n<p>Now if you don't have PHP you can still use this technique, it just requires you to manually enter all that code yourself on your HTML pages whenever you want to inlay some SVG.<\/p>\n<p><script language=\"JavaScript\" src=\"http:\/\/www.codedread.com\/yahooads.js\"><\/script><br \/>\n<script language=\"JavaScript\" src=\"http:\/\/ypn-js.overture.com\/partner\/js\/ypn.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>After Rob called my code ugly, I decided to update my technique for embedding SVG into HTML and it finally crystallized into a nice solution for me. I hesitate to say &#8220;embedding&#8221; because that might imply that I condone the &#60;embed&#62; tag, when in fact I only use it at gunpoint. Rob came up with [&#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,42,25,46,11,28,30],"tags":[],"class_list":["post-206","post","type-post","status-publish","format-standard","hentry","category-javascript","category-php","category-software","category-svg","category-technology","category-web","category-xml"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/206","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=206"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/206\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}