This will not be another article about one more RWD image technique. It is a short warmup for a little series of posts I will be writing during the next weeks about some ideas and experiments I'm currently doing, dealing with images in responsive design. I will not so much cover RWD techniques for scaling and reloading images (this already has been covered by greater experts than me), but about methods, hacks and tricks to create self contained, adaptive images that "react" and "behave" according to context.
A quick example: klick on the little friend below. A new window will open. It contains one single SVG image. There aren't any nested divs or multiple background-image hacks, no javascript either. Rescale the window and see how the graphic not only scales, but the content of the image itself repositions, depending on how wide the window has been opened (if you're on a tablet, turn it to see the effect).
The Multi-Layered SVG
The trick in the above example is: this SVG consists of several nested SVG. The parent doesn't have any dimensions, so it can scale freely. However we apply rules to the "inner" SVGs, so they "behave" and scale the way we demand.
<!-- XML declaration and doctype left for simplicity -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- zombie brain: -->
<svg preserveAspectRatio="xMidYMin meet" width="100%" height="100%" viewBox="0 0 280 277">
<!-- Shapes for zombiebrain here -->
</svg>
<!-- left side of head: -->
<svg preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 280 277">
<!-- Shapes for left side goes here -->
</svg>
<!-- right side of head: -->
<svg preserveAspectRatio="xMaxYMin meet" width="100%" height="100%" viewBox="0 0 280 277">
<!-- Shapes for right side goes here -->
</svg>
</svg>
What's going on here? We stack 3 SVGs on top of each other. Every single one has 100% height and width, filling the outermost SVG no matter how big it is. So why do the elements stick to the left, right and middle and why do they not appear distorted?
- We use the "viewbox" attribute to define a square within the child svg that should be scaled to the max.
- The "preserveAspectRatio" tells our element that it has to maintain its proportions. The values define how the contents must be placed and scaled. "XmidYmin" stands for "after scaling, align the element horizontally to the center and vertically to the top". "meet" stands for: "scale everything as much as possible, but do not cut anything off" (another option is "slice" which basically means: "scale everything as much as you can, until everything is covered, even if you have to cut off some parts").
As you can see, even this simple example shows us that there's a lot of potential in SVG for adaptive images. When I relaunched this site, I added this technique to all my inline SVG because it allows me to control width and height of an image independently without distortion. This way I was able to have most images match the baseline grid and still be responsive.
There have been lots of recommendations and best practices to solve the problem of resource-loading for responsive images. But is scaling and pixel density our only problem? Wouldn't it be great if we could recompose the image in itself, change order and hierarchy of elements depending on context?
In my next article I will propose a method for 4-slice scaling in SVG images. And then we will go even further when we attempt do an even more complex scaling technique, so stay tuned.
Update: made a pen to play with.
Very interessting technique! I totally agree, SVG is a good approach for different images (icons) on different devices. But what about all those devices and browsers who don’t support SVG at all? And yes, some customers do use some of those crappy browsers… Have you thought about a fallback so far?
Hi Patrick, as always, it depends: is it an inline Image, or used as a background? This technique works in almost every modern browser (mobile or desktop) I tested. Anyway, if support for older browsers is indespensable, we do have some fallback techiques at hand ;).
For a decent PNG fallback solution, just see grunticon ( https://github.com/filamentgroup/grunticon )
[…] Weber wrote about adaptive images that "react" and "behave" according to […]