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 "embedding" because that might imply that I condone the <embed> tag, when in fact I only use it at gunpoint. Rob came up with a suitable term for including SVG in a HTML document: inlaying (as opposed to inlining).


At first glance, this seems like such a simple thing. Most people out there think it's as simple as using the <object> 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 <object> tag and prefers to non-standard <embed> tag, Of course, other browsers (Firefox and Opera) have various problems with <embed>. Typical web developer frustration.

I found it interesting to see how my practices had changed on this matter in seven or so months:

  • My first approach, like this guy, was to simply use <object> tags because I didn't know at that time that ASV only worked perfectly with <embed> tags.
  • Upon learning this, I wrote some JavaScript that would scan the page and transform any object tags referencing SVG content into embed 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 embed 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.
  • In the fall of last year, I learned about IE's "conditional comments" from Stefan Oskamp 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 here. Using conditional comments, I can supply an embed to IE and an object 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) embed still doesn't provide a mechanism for fallback content
  • 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).


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 object properly, I can update my PHP function to simply spit out an object and forget about embed forever.

Click here to view the PHP source

To use this PHP library, you include the file once at the top of the web page like so:

<?php include "svginlay.inc"; ?>

Then to "inlay" an SVG document into your HTML you use this PHP fragment:

<?php inlaySVG('some_id', 'myfile.svg', 500, 375, '<p>Click <a href="http://www.adobe.com/svg/main.html">here</a> to download the Adobe SVG Viewer</p>'); ?>

This will inlay myfile.svg 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.

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.

The HTML code that this PHP function call produces is:

  <!--[if IE]>
    <script type='text/javascript'>
    try{
      new ActiveXObject('Adobe.SVGCtl');
      document.write('<embed id="some_id" width="500" height="375" src="myfile.svg" class="svgex"/>');
    } catch(e) {
      document.write('<p>Click <a href='http://www.adobe.com/svg/main.html'>here</a> to download the Adobe SVG Viewer</p>');
    }
    </script>
    <noscript>
      <p>Click <a href='http://www.adobe.com/svg/main.html'>here</a> to download the Adobe SVG Viewer</p>
    </noscript>
  <![endif]-->
  <![if !IE]>
    <object id="some_id" type="image/svg+xml" data="myfile.svg" width="500" height="375">
      <p>Click <a href='http://www.adobe.com/svg/main.html'>here</a> to download the Adobe SVG Viewer</p>
    </object>
  <![endif]>

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.

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.


§206 · January 13, 2006 · JavaScript, PHP, Software, SVG, Technology, Web, XML · · [Print]

10 Comments to “Inlaying SVG with HTML”

  1. Paul says:

    try{
    Your page is screwed
    isSVGControlInstalled() is undefined
    http://www.codedread.com/craptcha/craptcha_image_b796d823f144b70796b558e43659c14a.php is not available

    }catch(ex){
    xyz;
    }

  2. Jeff Schiller says:

    Um, what?

    Where do you see a reference to isSVGControlInstalled()? I’ve recently gotten rid of this.

    Why are you trying to look at my captcha images? They are cleaned up after a minute or so…

    Thanks,
    Jeff

  3. Martijn says:

    Why not use iframes to embed the svg, that does work with ASV, not?

  4. Jeff Schiller says:

    how do you do fallback content with iframes?

  5. Nice work! Do you know typo3? If you agree, I would like to put your solution into a typo3 extension. So more people can easily use that. Sincerely, Christoph Köpernick

  6. Jeff Schiller says:

    Christoph,

    Sounds good, can you drop me a credit in your typo3 extension source?

    Jeff

  7. Hi Sir,

    I got a problem when I am opening an .xhtml file from my asp.net application in mozilla browser. It is asking “what should mozilla do with this file and showing open and save to disk if i selection the firefox.exe and open it is opening it in another window..

    Please i am new to this if any suggestions plz inform me

    Thanks & Regards
    Satish

  8. DCE says:

    Hi,

    I’m having real trouble getting this to work on my webserver. I have use of PHP and believe the permissions are correctly set. All I get is a white page, though the logs report a 200 error. This code would be really useful to me.

    Thanks

    P.S. Couldn’t find your email address anywhere on your website?

  9. Jhon says:

    Thanks good information.

  10. Internet Spielautomat says:

    I have use of PHP and believe the permissions are correctly set. All I get is a white page, though the logs report a 200 error. This code would be really useful to me.Awesome. just awesome…i haven’t any word to appreciate this post…..Really i am impressed from this post….the person who create this post it was a great human..thanks for shared this with us.i found this informative and interesting blog so i think so its very useful and knowledge able.I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me.