享受視覺,

享受音樂,

泡杯咖啡,

再來細細品嘗每一篇文章不是很棒的一件事嗎 ?

請移到新部落格喔~ zzz

2009年8月28日 星期五

[教學] AS3 效能加速小技巧

as3 加速存取技巧整理 ~ 
ENTERFRAME > Timer
if > switch
while > for
n & (4 - 1); > n % 4;
a+=b; > a = a+b;
a++; > a = a+1;
a>>1; > a*=.5; > a/2; //milkmidi 修正 a >> 1 的1代表2的一次方
int(1.5); > Math.floor(1.5);
int(1.5)+1; > Math.ceil(1.5);
int(x + 0.5) > Math.round(x); //cjcat 補充
int(1.5); > uint(1.5);
-n; > n*-1;
if(n < 0)n = -n; > n = n < 0? -n : n; > n = Math.abs (n);
var a:Array = [] > var a:Array = new Array();
var arrCopy:Array = arrOg.concat() // 最快複製方式
class MyClass{public var a:int = 1; public var b:int = 2};

ob:Object = {a:1,b:2};
//24bit
var color:uint = 0x336699;
var r:uint = color >> 16;
var g:uint = color >> 8 & 0xFF;
var b:uint = color & 0xFF;
//32bit
var color:uint = 0xff336699;
var a:uint = color >> 24;
var r:uint = color >> 16 & 0xFF;
var g:uint = color >> 8 & 0xFF;
var b:uint = color & 0xFF;
var l:int = arr.length;
for(i:int = 0; i<l;i++)

for(i:int = 0; i<arr.length; i++)
var tmp:Number;
var staticValue = someClass.staticProperty;
for(...) tmp = staticValue;

for(...) tmp = someClass.staticProperty;
for(...) var a:Number = 1,b:Number = 2;

for(...) var a:Number = 1; var b:Number = 2;

2009年8月26日 星期三

[閒聊] Run! PC 技術精英分享會精品

來自一場 flex / air / fms 的技術分享會,有吃有喝又有拿,還不錯,感謝 RIS 版主 Bing 大的技術分享。( 左圖為附贈的adobe 磁鐵小精品, 好像只能用在白板上 = =" )。

2009年8月25日 星期二

[教學] 最快的 array 複製方式


flash AS3 好像沒有看到類似 array.clone() 的陣列複製函式。若是要複製函示該如何下手,想的到的方法就是利用 loop 像是 for 迴圈或者 while 迴圈來賦值。其實這方法不是最快的方法,大家可以利用 array.concat() 函式來複製陣列元素.

只要 concat 不帶參數 - var copyArray:Array = originalArray.concat(); 即可,

相較於迴圈賦值可以省下 2/3 的時間來複製陣列。好好利用吧 : )

[閒聊] StarLancer Game Engine for AS3

moka 專為遊戲設計簡易之 API 遊戲引擎 , 支援 2d/3d , 完成將釋出 ~
或者遊戲創作同好也可以一起開發專案,可以互相切磋學習。
本引擎主要以 bitmapData 作為繪圖基礎, 開發專為遊戲設計之API,
下方展示程式片段,統一Game為客戶端介面,簡化 API 學習曲線:

Game.start( this, 640, 480, 1 ); // 建立 640 x 480 場景
Game.onInit( function init():void { // 初始化函式
sp = Game.create2DSprite("frontlayer", new EmbeddedImage());
sp1 = Game.create2DSprite("backlayer",new EmbeddedImage2());
sp2 = Game.create3DSprite("sphere");
sp.x = 160;
sp.y = 120;
})
Game.onLoop( function loop():void { // 循環函式
sp.x++;
});
Game.onKeyDown( function keyDown():void { // 鍵盤按鍵函式
Game.print("you press " + Game.keyboardStack.length + " keys : " + Game.keyboardStack);
//you press 3 keys : 37,38,39
});
Game.onMouseDown( function mouseDown():void { // 滑鼠函式
Game.print("mouse is down");
});

2009年8月24日 星期一

[閒聊] 皮克斯動畫 20 年展示

今天去北美館看皮克斯展,展場內呈現的是皮克斯 20 年來的動畫製作過程與方法,其中包含手繪鉛筆稿、3d 模型、故事板、彩繪腳本、短片、數位影像展示等將近 600 件作品,從展場開始到結束的展示安排可以清楚了解皮克斯的動畫製作過程。他們製作一部動畫需要花 3 ~ 4 年的時間,有 3 / 4 的時間花在腳本製作,因為他們認為 story is king,所以大部分時間都在規畫動畫製作的細節與流程,好處是在最後動畫的實作上可以減少反覆錯誤修正的現象。其中最吸引我的是 Colorscripts 與 Zoetrope 還有最後的 Artscape,對我來說非常新鮮。Colorscripts 中文是彩繪腳本,有別於一般黑白線搞腳本而是以上色方式呈現。彩繪腳本是根據劇情的演變做出光影、色彩、氛圍的視覺作品,透過這些顏色與氣氛的表現可以解該場景呈現的氣氛是快樂的,還是令人恐懼的,這是黑白腳本所辦不到的。其他部分就賣關子讓大家自己去欣賞了,moka 覺得還蠻有學習價值的,大家有空可以撥出時間去看看,我想對於視覺創作與動畫製作都有很大的幫助。從這次藝術展示中發現商業取向的藝術作品好像一般人比較能接受,那下次就展大黃蜂吧XD~

2009年8月20日 星期四

[教學] function class definition 函式類別定義

var FuncObject:Object = (function Demo():Object {
// use prototype
var prototyper:Object = Demo.prototype;
// for output
prototyper.toString =
prototyper.valueOf =
function traceMe():String{
return "[object Demo]"
}
// public value
prototyper.publicValue = 10;
// private value
var privateValue:String = "I am Private!";
// private value getter
prototyper.privateGetter = new Object();
prototyper.privateGetter.toString =
prototyper.privateGetter.valueOf =
function getter():String {
return privateValue;
}
// private function
function privateFunction():String{
return "Guys~";
}
// public function
prototyper.publicFunction =
function hi():void{
trace("Hey~~"+privateFunction());
}
return prototyper;
})();

trace(FuncObject);
trace(FuncObject.privateGetter);
trace(FuncObject.publicValue);
trace(FuncObject.publicFunction());

/*-----output

[object Demo]
I am Private!
10
Hey~~Guys~
undefined <------這是我目前遇到奇怪的問題。
最後一個 public 函式多跑出這個東西??
希望大大能幫忙解決這問題~

*/

拍ㄙㄟ~ copy co 太爽了.
trace(FuncObject);
trace(FuncObject.privateGetter);
trace(FuncObject.publicValue);
FuncObject.publicFunction(); <--不用trace
感謝 AS 腸網友回覆 : )

[教學] 提供另一種獲得圖片寬高的方法

或許在一些特殊需求上可以用到,參考一下~

var w:uint = 0;
var h:uint = 0;
while (image.bitmapData.getPixel(++w, 0)) { }
while (image.bitmapData.getPixel(0, ++h)) { }
var showPicInfo:String = "width : " + w + " px , height : " + h + " px .";
trace(show);

2009年8月17日 星期一

[閒聊] moka synthesizer 構想

透過合成器可以模擬鋼琴、海浪聲、還有各式音色合成,目前尚在計畫階段,會一一逐步實現合成器功能,未來做大可以製作聲音編輯軟體,慢慢努力: ) [左圖為純構想]

2009年8月15日 星期六

[作品] PianoAS3 flash也能合成聲音喔~

moka 其實對聲音也有些了解,所以簡單製作了一個鋼琴demo,鍵盤與鋼琴琴鍵對應如下z=Do s=Do# x=Re d=Re# c=Mi v=Fa g=Fa# b=So h=So# n=La j=La# m=Ti ,=Do‧(高音),用+/-符號可以換音階。來玩玩 moka 線上 flash 鋼琴吧! 因為 flash 可以動態和成聲音,所以未來開發節奏遊戲像是beatmania、太鼓達人、DDR...等在影音配合上都會變得比較簡單。

2009年8月14日 星期五

[教學] DP - Simple Factory & Factory 完美整合

[教學] DP - Creational Pattern - Factory
[教學] DP - Creational Pattern - Simple Factory( 非 gof 提出 )


在這兩個範例教學中簡單描述 2 個設計模式的精要 ( 大家可以回頭看 moka 之前撰寫的兩篇文章 )。不過兩者各有好壞,以 simple factory 範例來說,ToyFactory 內使用 switch 作分支,降低程式延展性,不過優點是客戶端程式碼較簡單。而 factory 範例將去掉 switch 部分並將工廠抽象化,提高程式的延展性,但是客戶端要接觸的介面變多。是否有兩全齊美的方式來修正程式碼。其實程式設計裡有一個叫做反射 reflectaion 的專有名詞,透過反射可以以字串方式動態建立物件,大家可能沒有感受到它的威力,以下便做個示範:

simple factory partial code:

class ClientDemo{
 public static function main():void{
  var demoToy:IDance = ToyFactory. createTeletubb(DanceToy.TINKYWINKY);
  demoToy.dance();
 }
}

factory partial code:
class ClientDemo{
 public static function main():void{
  var usedFactory:IToyFactory = new TIinkyWinkyFactory(); //客戶端只想要會跳舞的丁丁,工廠介面只會造成客戶麻煩
  var demoToy:IDance = usedFactory. createTeletubb();
  demoToy.dance();
 }
}

Reflection Sample:

設計一個 IDance 介面擁有 dance() 方法
設計天線寶寶雛形類別class Teletubb 並實現介面 IDance
設計丁丁類別 class TinkyWinky 繼承 Teletubb 並覆寫dance(){ trace("丁丁之舞"); }
設計小波類別 class PoPo 繼承 Teletubb 並覆寫dance(){ trace("小波之舞"); }
設計拉拉類別 class LaaLaa 繼承 Teletubb 並覆寫dance(){ trace("拉拉之舞"); }
設計迪西類別 class Dipsy 繼承 Teletubb 並覆寫dance(){ trace("迪西之舞"); }

class DanceToy{
 public static TINKYWINKY:String = "TIinkyWinky"; //將字串改成類別名稱
 public static POPO:String = "PoPo";
 public static LAALAA:String = "LaaLaa";
 public static DIPSY:String = "Dispy";
}

class ToyFactory{
 public static function createTeletubb( toyName:String ): IDance {
  var classRef:Class = flash.utils.getDefinitionByName(toyName) as Class ; //利用字串生成物件這樣就不用作switch了
  return (new ClassRef()) as IDance;
 }
}

class ClientDemo{
 public static function main():void{
  var demoToy:IDance = ToyFactory. createTeletubb(DanceToy.TINKYWINKY); //保持簡單的客戶端介面
  demoToy.dance();
 }
}

綜合 simple factory 和 factory 範例這邊提出更好的解決辦法,不但提高程式延展性也保持客戶端介面的簡單,從以上範例可以發現客戶只要了解 ToyFactory. createTeletubb 即可,其他介面都被隱藏,降低客戶端 API 學習的困難度。未來新增玩具時只要新增玩具類別與DanceToy類別下多加一條public static DIPSY:String = "NewToy";,或許大家覺得多加一條public static DIPSY:String = "NewToy"會破壞程式模組精神,不過若程式不能十全十美,盡可能縮小修改範圍才是最佳準則。

[教學] 邏輯原來可以這樣用?

var a:Boolean = true;
var b:Object = new Object();
var c:Function = function doSomething():void{}
var d:String = "cool!";

sample01:

if (a) if(b) c();

可寫成 --> a && b && c(); // 判斷式簡化

sample02:

if(d) d = "great";

可寫成 --> d &&= "great!"; // 快速判斷與設值方式

所以 if (condition){/* statement.. */}
若 condition 為:
undefined 則為 false
Null 則為 false
Boolean 則為 依照布林值判斷
任意 Object 或其子類別若是非 null 則 condition 為true,如上 Function、String.

a && b && c() 條件成立時執行 c();
d &&= "great!" 條件成立時執行 d = "great";

2009年8月12日 星期三

[作品] Hey! Window

拿起麥克風 microphone 模仿在玻璃前吹氣或哈氣,再用mouse drag 模擬手指畫出想要的形狀吧~背景加一點雪跟浪漫音樂說不定會 fu 更好,有空再修正吧~

2009年8月11日 星期二

[閒聊] MRT 內捷捷運車廂置頂的路線圖看板設計

捷運木柵內湖線狀況頻傳,漏水、網路問題、浪費公帑的事就不講了。來看左圖的路線看板部分,原本價格不菲的 LED 陣列看板變成價格便宜且會反光的壓克力板,補個 1000 元再插幾顆 LED 來裝飾一下還真是省~別說我眼殘,字小的跟螞蟻一樣,距離 2、3 公尺就看不清楚了。沒關係,為了這個看板買一副度數深一點的眼鏡來戴,ㄟ?怎麼字還是擠成一團 ! 英文根本看不清楚,那旁邊老花眼的老公公老婆婆怎麼辦 ? 好歹也加裝個燈泡在看板後面也比較清楚嘛,或許會給你加一點分數~哈。

2009年8月10日 星期一

[作品] SpectrumFlower 音之花

將聲音頻譜作為 3d 球之材質,花瓣隨著音樂的律動起舞,使視覺富有優美流暢的韻律感。

2009年8月9日 星期日

[閒聊] flash 延伸應用(待補)


微軟能辦到,您也能辦到,大家一起來 Multitouch ~

Flash 也能玩 Wii !? WiiFlash 讓您做更多的互動體驗 ~ 自己來做 Wii 運動吧 ~

Flash 互動音樂來自SONIFY ~ 動手做 MIDI 合成器

FlashStick 透過 Flash 的 socket 結合 directX input,讓你可以擷取搖桿類比資訊,做出更專業的遊戲

還有學不完的APIs

其它特殊運用會慢慢補上 : )

2009年8月7日 星期五

[教學] javascript: 的祕密

大家 COPY 這段程式碼貼到網址列 ( Address bar ) 上並按 Enter

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+ "px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+" px"}R++}setInterval( 'A()',5); void(0 );

"javascript:xxxx" 最初設計的用意是希望 JS 程式設計師在網址列輸入程式後能馬上看到效果。

常常可以看到有人這樣寫

<a href="javascript:alert('haha')">click me!</a>

或者

flash as2 中的 getURL("javascript:alert('haha')");

其實這些都是一樣的道理喔~只要有關 url 連結的部分都可以用"javascript:/*statement...*/"來做更進階的設定或程式特效 : )


2009年8月6日 星期四

[閒聊] 圖片也能存音樂 !?

QR碼是二維條碼的一種,1994 年由日本 Denso-Wave 公司發明。QR 來自英文「Quick Response」的縮寫,即快速反應的意思,源自發明者希望QR碼可讓其內容快速被解碼。QR 碼最常見於日本,並為目前日本最流行的二維空間條碼。QR 碼比普通一維條碼可儲存更多資料,亦無需像普通條碼般在掃描時需直線對準掃描器。 (簡單來說你去7-11買東西,店員會幫你刷一下產品條碼來得知產品價格就是一維條碼,更多資訊請看 wiki)

既然 QR code 能儲存資訊,那 midi 音樂是否也可以存進去呢 ? 來看 QuickMark 利用 QR code 來存放圖片與音樂。是不是很有趣的應用,想想看要是今天拿手機將 QRcode 照下來就能在手機撥放一段 midi 音樂,非常酷吧,用這種方法來宣傳與行銷手機產品一定會大紅大紫XD~

Moka 想說把 Midi 或 Mp3 等音樂格式的檔案存在QRCode裡,再利用前述的 information hiding 把 QRCode 藏在一般漂亮的圖片裡,或許視覺上會更令人賞心悅目~: )。

題外話,不知道大家有沒有聽過 64k intro ,國外有一些公司會參加一項技術競賽,他們把好幾G容量的影音檔壓縮成 64kb 以內的執行檔來播放,最令人印象深刻的影片將是 winner 。下載小鴨鴨圖片,別小看這200k的圖片,裡面有3支得獎影片,大家下載後將之附檔名改為rar,並解壓縮就知道了。更多資訊參考下方連結:

2009年8月5日 星期三

[教學] information hiding 資訊隱藏

網路發展得非常迅速,數位媒體的傳播也比以往快速且容易,今天很開心的畫完一張數位插畫,明天就有可能變成別人的作品,為確保智慧財產權,資訊隱藏技術也營運而生。

Moka 這邊寫個再簡單不過的資訊隱藏例子,以 10 x 10 圖片為例。

(圖A. 10 x 10 晴空萬里圖)
(圖B. 10 x 10 想要隱藏的個人Marker)

首先大家知道每個像素都有 r、g、b 跟一維座標(每個點在陣列排序的索引)
總共4個向量所構成,先來看圖 A,假設我只看圖 A 的 r 向量部份:

73,72,69,68,68,68,78,135,181,105
135,132,109,116,132,108,118,243,255,197
....
0,0,21,102,133,141,140,62,2,0
共100個 r 值。

接下來看看 Moka 怎麼把 Marker 塞到圖裡,

74,72,69,69,69,69,79,135,182,106
136,133,110,116,132,108,118,244,255,198
....
0,0,21,103,133,141,141,63,2,0

moka 在 r 向量中動了手腳,
綠色部份為更動的值,
若數值為偶數代表Marker的白色,
而數值為奇數代表Marker的黑色,

72 ,72 ,69 ,69 ,69 ,69 ,79 ,135 ,182,106
136,133,110,116,132,108,118,244,255,198
....
0,0,21,103,133,141,141,63,2,0

換句話說再更清楚表達一點,奇數用X代表,偶數用-代表

--XXXXXX--
-X------X-
-X------X-
X--------X
X-XX--XX-X
X--------X
X--------X
-X-XXXX-X-
-X------X-
--XXXXXX--

從上圖可以清楚知道 Moka 的用意吧~
而且產生出來的新圖跟原圖差異量級小,
每個 pixel 只做 1/16777215 (r+g+b)的色差變化根本看不出來。
同時除了r 向量可以塞資訊,g 跟 b 跟座標也能塞資訊 ~
如果覺得不夠用,把 rgb 轉成 hsv 還可以再塞~

當然這種資訊隱藏方式非常容易破解~哈哈,人家隨便再壓縮圖片你所隱藏的標籤就沒用了,Moka 只是給大家一個簡單的資訊隱藏觀念,更多更深的技術就得拜託 google 大神了~

2009年8月4日 星期二

[教學] 最神奇的程式 javascript

或許大家不知道 javascript 是一種可以開發語言的程式,
有人拿 javascript 撰寫成 java 語言,
有人拿 javascript 撰寫成 lisp 語言,
你說用 javascript 能做出 actionscript 3 的程式嗎? 答案是肯定的。
JQuery 的作者能開發出 processingjs (processing 語言),連類別、介面都可以模擬出來,那還有甚麼辦不到的呢~

javascript 看似操作簡單,但是他深藏不露~來看個簡單的 javascript 類別定義。

function MyClass(){
 var a = 1; // private 屬性
 this.b = 2; // public 屬性
 this.sum = { // getter 模擬
  valueof:function(){return a+b;}
  toString:function(){return a+b;}
 }
 this.wow = function(){alert("wow");} // piblic 方法
 var mon = function(){alert("mom");} // private 方法
}

MyClass.c = 3; // public static 屬性
var me = new MyClass();
alert(me.a);   // undefined
alert(me.b);   // 2
alert(me.sum); // 3
me.b++;
alert(me.sum); // 4

看看目前程式語言的排行榜,Java、C++、C 三位龍頭大哥一定排在前三,javascript 排在第 9 ,而 actionscript 這次名次略為下降排在第 21,由此可知 javascript 目前仍非常流行。當初紅翻的 AJAX 把 javascript 語言名次帶上來,除了有prototype、JQuery 、dojo 等各自的 javascript 應用框架出現,甚至連 google 、yahoo 知名搜尋引擎公司也有自己的 js 框架,引起了 javascript 旋風,誰也沒想到 javascript 有今日的風采 ~ 雖然 javascript 沒有想像中的好學,不過他的創造力無限,是很值得一探的 ~ : )

2009年8月2日 星期日

[教學] HTML5 新 web 繪圖技術 canvas !?

web 技術發展神速,在 HTML5 有新增一個標籤叫 canvas,是專門處理點陣繪圖的標籤。目前在所有流行的瀏覽器平台像是 Firefox, Safari, Chrome and Opera,甚至 IE (explorercanvas) 都可以支援此標籤。或許這會成為 flash 殺手 @@,因為不需要任何外掛像 flash player 或 java applet,只要會寫一點 javascript 就可以達到跟 flash 一樣的互動效果。

see canvas wiki
see canvas tutorial

更屌的東西 processing.js --這是目前最屌的跨平台 Open Source API,也是基於 canvas 開發出來的,它是一個理想的視覺化工具,可以簡單創造使用者介面跟 web-based 遊戲,作者是JQuery 的開發者John Resig。API 操作方式都極為簡單,甚至還可以寫類別^^",希望大家玩得開心。


想出教學書的趁現在XD~

2009年8月1日 星期六

[教學] 遊戲角色 Keyboard 控制不簡單 !?

撰寫遊戲程式常會碰到人物角色的八方位鍵盤控制( game character control),除了上、下、左、右外,還有左上、右上、左下、右下的四個方向。假設移動速度是 speed 的話,斜角移動的速度是 speed/Math.sqrt(2),這是大家在設計上常會忽略的地方。Moka 對遊戲設計曾經有專研過一段時間,所以這邊提出一個經驗的寫法。

Moka 在之前 keroro lowpoly 的範例是利用類似下方的寫法來控制腳色位置.但是這是非常差的寫法,尤其是當按下 up 就不能按 down 、left、right,總而言之只能擇其一來按,一般遊戲不會這樣設計才對是吧 : ) 。

private function onKeyDown(e:KeyboardEvent):void {
 switch(e.keyCode)
 {
  case Keyboard.UP: sp.y--; break;
  case Keyboard.DOWN:sp.y++; break;
  case Keyboard.LEFT:sp.x--; break;
  case Keyboard.RIGHT:sp.x++; break;
 }
}


如果各位有餘力的話可以修正 keroro lowpoly 的範例。

[教學] Flash 為啥不聽話 !? Focus Me Please ~

大家都知道 Flash AS3 的鍵盤事件註冊設計方式如下:

stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);

程式發布後會發現怎麼按鍵盤都沒反應,還需要滑鼠點一下畫面鍵盤才會生效,是 AS3 的 Bug 嗎 ?
其實在 AS2 的程式裡並沒有這個問題存在~ 那為什麼 AS3 會這樣設計 ??

AS3 其實沒有 Bug 喔 !

stage.focus = this; // 多加這行讓 flash 場景變成鍵盤焦點即可

AS3 程式執行時預設是非聚焦狀態,所以一開始沒設定 stage.focus = this 按鍵怎麼打都沒反應。
而AS2 程式執行時預設是自動成為焦點,所以按鍵在一開始就是有反應的。



[教學] Flash 也可以動態讀取向量格式喔 ! !

Flash 可以動態讀取外部文件或圖片資源,雖然 Flash 有陣圖讀取的功能,但是並沒有向量檔案的讀取功能喔 ! 還記得 Flash 本身有 xml 的解析器嗎 ? as3svgrendererlib 可以讓 flash 讀取 SVG 檔並渲染向量圖出來。SVG 是一種向量檔,而且是基於可延伸標記語言 ( xml ) 格式構成的,叫作可縮放向量圖形(Scalable Vector Graphics),用於描述二維向量圖形的一種圖形格式。SVG 由 W3C 制定,是一個開放標準。(更多資訊請參考 Wiki )

大家可以用熟悉的 Adobe Illustrator 將畫好得向量圖輸出成 SVG 格式。SVG 架構如下:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="467" height="462">
<!-- This is the red square: -->
<rect x="80" y="60" width="250" height="250" rx="20" fill="red"
stroke="black" stroke-width="2px" />
<!-- This is the blue square: -->
<rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
stroke="black" stroke-width="2px" fill-opacity="0.7" />
</svg>

[補充] http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 為定義 SVG 描述格式與架構規範的檔案