The “clown car technique” for responsive web images

Responsive SVG for foreground images

The Clown Car Technique is one solution, which makes use of an SVG properties and its built-in support for media queries. The technique uses an empty SVG that doesn’t contain any actual graphics (referred to as the “car”) but applies a raster background image to the SVG via media queries (referred to as the “clowns”).

Here is the code for one of the HTML:

Here is the code for one of the SVG files

Unfortunately, when this file is used, all 4 PNGs are retrieved from the server. To solve this issue, we can use background images instead:

This version only downloads the images required, thereby solving the multi-HTTP and waste of bandwidth concerns.

However, it seems to trigger more Content Security Policy issues than the previous SVG. The issue is the content security protocol, or CSP, of webkit and moz — they do not allow assets to import images or scripts. So, the browser, while capable of rendering the images within the SVG, is blocking the SVG from showing. Because of these security issues, may have to be the solution.

UPDATE (18/12/2013)

To make it work properly in IE:

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

On the , 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’ tag around the fallback image.

Add xmlns:xlink=”” to the svg tag element, and put the following inside the svg tag element, replacing {{href}}, {{width}}, and {{height}} with your values. This will add the link behavior for Firefox, Chrome, and Safari.

For IE, put the following on the (replacing {{href}} with your URL): onclick=”window.location = ‘{{href}}’;”

Also for IE, on the , specify cursor: pointer;


  • -Requires 2 http requests: one for the image and one for the SVG.
  • -Object does not support the alt attribute
  • -Not all the browsers support these CSS3, HTML5 and SVG features: OldIE, Android 2.3 and lacking any support in Opera mini (XML5632: Only one root element is allowed. about:blank, line 1 character 1)
  • – Not all browsers support media queries in SVG, TEST HERE
  • – More than a solution looks like a SVG hacking to me. May be someone need to spend time and create a product to produce vectors from jpg

Tests and examples

example 1 (pixemedia)

Further information

GITHUB clown car technique
RETINA clown car technique


  • google plus age limit commented on June 12, 2014 Reply

    Undeniably believe that which you said. Your favorite justification seemed to be on the web the
    simplest thing to be aware of. I say to you, I certainly get irked while people think about worries that they just don’t know about.

    You managed to hit the nail upon the top and defined
    out the whole thing without having side effect , people could take a signal.
    Will likely be back to get more. Thanks

  • portsmouth high school bus routes commented on July 4, 2014 Reply

    You could by no means have to fret about currently being discovered by means
    of cloaking your IP tackle to advert safety to your
    surfing and acquiring data through web-sites on the web site.
    Don’t be guilty of the same kinds of assumptions, however.
    Every cent earned by the business was used to pay for
    a nine-story building, where the first official National Book Store was located.

  • Tampa Bay charter boats commented on July 6, 2014 Reply

    Hey there! I know this is somewhat off topic
    but I was wondering if you knew where I could locate a captcha plugin for my
    comment form? I’m using the same blog platform as yours and I’m having
    difficulty finding one? Thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *