It’s an old trick – so called wingdings and print clip-art were all the rage in the 90’s… but with webfonts practical to deploy in the here and now I’m wondering if it might be simpler with a bit of CSS to layer single characters atop each-other to ‘build up’ a multi-color graphic using the monochrome webfonts – no screwing about with the train wreck called SVG (which has ALWAYS been too complex for it’s own good – see why Adobe, the “Champion of SVG”, dropped it like a hot potato once they bought out macromedia) or relying on javascript for CANVAS.
I tossed together a quick two-layer demo – just a flat circle for the first background with a black logo over it.
http://www.cutcodedown.com/fontsAsImages/template.html
5k per font file for a fully scaleable graphic? Not too bad. Code’s a bit heavy, but not unmanageably so. I’d be interested to see how well it ‘scales’ if you add more layers for colors or more complex additive graphics to it.
Of course, that the exact same codebase works on all modern browsers AND all the way back to IE 5.x…
Was fun though playing whack-a-mole with the different browsers on character sets – I originally wanted to use space, non-breaking space, zero-width space, so when the font didn’t load you wouldn’t see any characters, but those are just NOT reliably implemented across browsers – IF they’re implemented at all. I was a bit shocked to find browsers don’t spend the time to render space characters if you assign one in the font! The closest I got was non-breaking space, but chrome wanted nothing to do with that 
