Notes on using the Clown Car Technique in IE

The Clown Car Technique is a clever way to implement responsive images by stuffing a big blob of SVG into an <object> tag.

Below are some tips and tricks for making it work properly in IE and making it clickable.

To make it work properly in IE:

  • Pull the fallback image outside of the <object> tag and use conditional comment to display either the <object> or the fallback image. Putting the fallback image inside the <object> tag doesn't seem to work in IE8 - note that Estelle's demo shows a broken image in IE8.

<!--[if (gt IE 8)|(!IE)]><!-->
<object data="data:image/svg+xml,{{urlEncodedSvg}}" type="image/svg+xml"></object>
<!--[if lte IE 8]>

  • On the <object>, specify a width (e.g., width: 100%; or width: 50%;). If you do not specify a width, the height will stay at about 100px for some reason. This is what Estelle does in her clown-car demo.
  • Also on her clown-car demo, Estelle sets the URLs to https rather than http. Otherwise, you get "SEC7111: HTTPS security is compromised" errors in the IE console. That said, the errors don't seem to be user-facing...

To make it clickable:

  • Put <a> around the fallback image.
  • Add xmlns:xlink="" to the <svg> element, and put the following inside the <svg> element, replacing {{href}}, {{width}}, and {{height}} with your values. This will add the link behavior for Firefox, Chrome, and Safari.

<a xlink:href="{{href}}" target="_top">
<rect x="0" y="0" width="{{width}}" height="{{height}}" fill="red" fill-opacity="0" stroke="none" />

  • For IE, put the following on the <object> (replacing {{href}} with your URL): onclick="window.location = '{{href}}';"
  • Also for IE, on the <object>, specify cursor: pointer;
comments powered by Disqus

Did you know?

I'm a software engineering consultant. This means I can help your company with your software engineering needs:

  • providing temporary manpower for short-staffed software projects

  • helping new software projects get off to a good architectural start

  • improving the performance and reliability of old, legacy software systems

  • doing an important investigation or small project that you've always wanted to do but haven't had time for

Since 1999, I have done software engineering projects for the Canadian government, for Silicon Valley startups, and for established Bay Area companies, for small companies and medium-sized companies, for successful commercial projects and open-source projects. 

Currently accepting small projects. If you have one, email or call me.