すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

WebのコンテンツをSVGで描いてみよう。

SVGで遊ぶ。

拡大/縮小しても綺麗なやつ

 

SVGって何?

Scalable Vector Graphics - Wikipedia

簡単に言うと、点(位置・座標)と計算式で描くお絵かきです。
計算式にて表現出来るので、無限に拡大しても綺麗に表示出来て、究極に縮小しても、それなりに見せる事ができるのが良い所。
凄く頑張るとメモ帳でも複雑な絵が描けます。普通にIllustrator等を使った方が捗ります。ベジェ曲線嫌いなのですが、学習サイトもありますので、慣れてください。



実際のやつ

Google+1ボタンは既にSVGで描かれています。
また、Appleのサイトにある林檎マークも、それです。

例:Google+1

 

例:facebookのアレ

 

(エントリーすると消えるので、下に貼った。いつか消えます。)

 

SVGのフォールバックについては考慮していません。古いブラウザ等で表示できない環境があります。
ついでなので、Data URI scheme として貼り付けてありますが、よく使われるものがBASE64なのでファイルサイズが増えます。
ファイル数と転送タイミングの関係で埋め込んで稼ぐ という方法でも使えますが、HTTP/2が見えてきているので、違った使い方でも良いかな?と考えられます。
はてなでの使い道は、gzip転送してくれたら良いよね!という感じです。

 


こうして纏まっているのは良いですね。色々情報があります。

 

 

なお、この辺りのネタは、年明けの時間が出来た頃に作るネタで使う予定です。

 

NEW リズムでともだち こぐまのトンピー

NEW リズムでともだち こぐまのトンピー