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:
1 |
<img src="awesomefile.svg" alt="responsive image"> |
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,
UPDATE (18/12/2013)
To make it work properly in IE:
Pull the fallback image outside of the
On the
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=”http://www.w3.org/1999/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
Also for IE, on the
Conclusion
- -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
3 Comments
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
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.
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!