HTML+CSSでベクターイメージを表示

ふと海外のサイトを見ているとCSSを駆使して画像(ベクターイメージ)を表現しているサイトを発見。
ソースを見ると画像(ベクターイメージ)を図形に分解し、図形と類似するフォントを"<div>"の
”style”属性を駆使して拡大縮小し、絶対位置を行い適切に配置してベクターイメージを実現しているみたい。

参考:Román Cortés » Homer CSS

せっかくなので簡単なサンプルにチャレンジしてみた。(要日本語フォント)





動作確認環境:Windows(JP) + Firefox 2.0.0.14 / IE6
Firefox/IE6で若干表示に差分が発生するみたい。