SVGで遊ぶ。
SVGって何？
Scalable Vector Graphics - Wikipedia
簡単に言うと、点(位置・座標)と計算式で描くお絵かきです。
計算式にて表現出来るので、無限に拡大しても綺麗に表示出来て、究極に縮小しても、それなりに見せる事ができるのが良い所。
凄く頑張るとメモ帳でも複雑な絵が描けます。普通にIllustrator等を使った方が捗ります。ベジェ曲線嫌いなのですが、学習サイトもありますので、慣れてください。
実際のやつ
Google+1ボタンは既にSVGで描かれています。
また、Appleのサイトにある林檎マークも、それです。
例：Google+1
例：facebookのアレ
(エントリーすると消えるので、下に貼った。いつか消えます。)
SVGのフォールバックについては考慮していません。古いブラウザ等で表示できない環境があります。
ついでなので、Data URI scheme として貼り付けてありますが、よく使われるものがBASE64なのでファイルサイズが増えます。
ファイル数と転送タイミングの関係で埋め込んで稼ぐ という方法でも使えますが、HTTP/2が見えてきているので、違った使い方でも良いかな？と考えられます。
はてなでの使い道は、gzip転送してくれたら良いよね！という感じです。
こうして纏まっているのは良いですね。色々情報があります。
なお、この辺りのネタは、年明けの時間が出来た頃に作るネタで使う予定です。
