html無敵畫圖、畫線

用網頁畫圖的效果總是差強人意
因為都是div去組 太多效率變很差
少的話 鋸齒又很嚴重
總是沒有漂亮的線條
畫出來的線很醜，總是被美工嫌 (johhny... 再記你一筆)

後來看google map畫的導航路線真是漂亮
看起來也不像是圖 但也不是用div畫的
利用firebug看了是用svg的tag組成
還以為是google自己開發的component
想想也不太可能 因為也要browser支援
好奇查了一下 原來早就有SVG這東西了
不過是2008年才成為W3C的標準

wiki上解釋為
「SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述影像內容，因此是一種和影像解析度無關的矢量圖形格式」

開心的試了一下 哦耶~~ 這東西真是帥呆了

//SVG畫直線
"M30,0L100,110"

看圖就可以知道差異很大了
再看這張誘人的M字腿... ㄟ 我是說麥當當的曲線圖

看到那曲線好細膩.. 我好感動
就像從vcd進步到dvd畫質一樣...

更強的是還可以做到動畫效果
這不就是一直輸flash的地方嗎
看到動畫的效果都快哭了...
好像從dvd進步到blue-ray... (好像沒相關...硬要接一下梗)
從此做動畫不再是flash的天下了... ya~~~ flash書拿去丟一丟 (好啦 還是有差啦...)
路人：那silverlight？
謎之音：silverlight？那是什麼東西？ 好吃嗎？

不過就是svg的語法難懂了點
畢竟要把程式及圖型表示全用文字來形容...
工欲其善，先利其器...
就用SVG編輯器來做吧...

Library
Raphael

在ie8時，出現raphel vml  null或 什麼物件不存在，看一下是不是用了顏色名稱
ex: stroke:red, 即會發生
改用stroke:#ff0000取代

References
wiki SVG