One of the more effective visualization techniques is to show the relative strengths of different categories by showing a scaled image. We saw this technique applied in the Twitter chapter using bubbles. We can take that to the next step by using images instead of just circles.
The first step is to locate logos for Android and iOS that are already SVGs. As it turns out, Wikipedia is a great source for this and their images are all licensed under creative commons, meaning we can use them in our visualizations. One of the really great features of SVG is that you can easily merge two images together through the use of definitions. If you open up an SVG like the Android logo at http://upload.wikimedia.org/wikipedia/commons/e/e1/Android_dance.svg, you can copy all the markup under a <defs>
tag in another image. I took the Android and Apple logos and moved them into my raw markup. If I wanted to display them, I could use the <use>
tag and reference the definitions by ID...