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>
<!--<![endif]-->
<!--[if lte IE 8]>
{{fallbackImage}}
<![endif]-->

• 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="http://www.w3.org/1999/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" />
</a>

• 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;