SVG

資工二乙  495512288  吳岳偉  yuewei76            
資工二乙  495512070  辛杰恩  peter1212128     
資工二乙  495512587  許志宇  lorramce                     
資工二乙  495512290  林聖偉
  qoowayne123      

 

何謂SVG?

可縮放向量圖形(Scalable Vector Graphics)   
相較於一般的光柵圖形影像,不同點在於,它是由向量所形成的,而非像素構成,因此圖案不會因為放大而失真。
SVG的優點

1.SVG檔案可以用一系列的工具去被讀和修改
2.檔案可以被壓縮的比JPEG和GIF檔還要小
3.圖像印出來時,會以高品質的解析呈現
4.圖像可以任意的放大或縮小,也不會因此失焦

SVG和Flash的比較

1. 由W3C所制定的SVG(Scalable Vector Graphics;可縮放向量圖形)是網頁向量圖形及動畫的標準,可視為圖形及動畫的格式,也可讓開發人員擺脫HTML的限制,建立互動式圖形輸出Web應用程式。由於SVG資料連結及程式控制的技術是公開的,因此可以整合的應用比Flash廣泛,不過因為推出的時機晚,因此難以撼動Flash的市佔率。
2. SVG的推廣比不上Flash除了Flash較精緻外,使用SVG必須安裝SVG Viewer,市面上出現很多的SVG Viewer,但對作業系統的支援度不同,使SVG Viewer不像FlashPlayer一樣容易部署。
3. SVG所用的XML格式,站在資料搜尋的角度相當有利,可被瀏覽器、搜尋引擎或其他具有文字搜尋功能的軟體讀取。且SVG不具獨占性,可以實作在各種工具及瀏覽器中。相對的FLASH在搜尋的部份就差了很多。

SVG在手機上的應用

SVG還有兩個功能較陽春的版本:SVG Tiny和SVG Basic。SVG Tiny是針對螢幕較小,硬體規格較差的手機而設計的。SVG Basic功能強一些,適用於PDA。              

SVG基本圖形

SVG內建圖形有:
1.長方形(RECTANGLE)
2.圓形(CIRCLE)
3.橢圓形(ellipse)
4.直線(line)
5.多邊形(polygon)
6.連續線(polyline)

圖形著色

Fill :設定圖形內部著色
Fill-opacity:設定圖形內部透明度
Stroke:設定圖形輪廓著色
Stroke-width:設定圖形輪廓寬度

<RECT>元素

X:起始點x軸座標
Y:起始點y軸座標
Width:長方形寬度
Height:長方形高度
rx:圓角方形x半徑
ry:圓角方形y半徑

部份文件:
<rect x="10" y="10" width="50" height="50" />
<rect x="10" y="150" rx="5" ry="5" width="50" height="50" fill="green" stroke="red"/>
 
解說:以上兩個圖形的差別是在設定rx和ry 的有無,綠色邊角有圓弧度!

<circle>元素

Cx:圓心之x軸座標
Cy:圓心之y軸座標
R:圓之半徑

部份文件:
<circle cx="30" cy="30" r="25" />
<circle cx="150" cy="90" r="25" fill="green" stroke="red" stroke-width="4" stroke-opacity="0.5"/>
 
解說:此兩圓差別在於stroke和stroke_width的設定 第二個圖有設定stroke=red 他的輪廓有紅色包圍

<ellipse>元素

Cx:橢圓形圓心x軸座標
Cy:橢圓形圓心y軸座標
Rx:橢圓形x軸之半徑
Ry:橢圓形y軸之半徑

部份文件:
<ellipse cx="30" cy="30" rx="25" ry="15" />
<ellipse cx="210" cy="30" rx="25" ry="15" fill="none" stroke="red" />
 
解說:兩圖的差別在第二個fill的屬性有設定填滿為none表示沒有無填滿,而第一個圖沒有設定的話,他的default 值為 填滿!

<line>元素

X1:起始點x軸座標。
y1:起始點y軸座標。
X2:結束點x軸座標。
y2:結束點y軸座標。

部份文件:
<line x1="10" y1="10" x2="50" y2="50" />
<line x1="60" y1="10" x2="110" y2="50" stroke="green"/>
 
解說:兩點成一直線,所以只要設定兩點x1 y1 x2 y2就會自動連成一直線

<ploygon>元素
 

解說:跟直線的性質大略相同,不過可以設多點,他會自動連接起來,自動
   連成一個多邊形!

SVG資料結構

<symbol>  <g>  <desc>  
<title>  <image>  <defs>

<svg>元素

<svg>元素用來產生一塊畫布,讓SVG圖形元素能被描繪在上面,它是SVG文件的根元素,<svg>~</svg>元素之間所包含的SVG被稱為SVG文件;在資源情況下,可以被嵌入行內作為XML父文件的裡的一個片段。SVG文件必須遵照在XML的名稱空間推薦,宣告名稱空間以便所有SVG元素能被辨認屬於這個SVG名稱空間。

<title>及<desc>元素

用來描述文字字串,常與群組結構元素或圖形元素連用以提供相關資訊。<desc>及<title>元素的內容不會被顯示畫布上,相當於是註解功能。

<g>元素

是一種用來群組相關圖形元素在一起的容器元素,群組元素被視為單獨物件,可以使用屬性id為群組命名以便做為動畫及再使用物件。

部份文件:
<desc>圓群組</desc>
<g id="g1"  fill="green" fill-opacity="0.5">
<circle cx="60" cy="60" r="40" />
<circle cx="120" cy="60" r="40"  fill="red" />
<circle cx="90" cy="110" r="40"  fill="blue" />
</g>

<g>元素簡言之,其實就相當於今日大家所使用的msn的群組功能,而<g>元素可以將相似的圖形都歸類在一起,屬性id也相當於是群組的名稱,以便日後要再被使用時可以被呼叫。如上例,就有三個子元素的circle構成的一個群組,而此群組的名稱就稱為g1。

<symbol>元素

主要用途是為相同文件裡,多次使用的圖形模版畫以增加文件結構性。


以上圖的箭頭為例:
<svg >
<desc>定義箭頭符號</desc>
<symbol id="arrow" >
<path  d="M10 50 v -20 h50 v-25 l 40 45 M10 50 v 20 h50 v 25 l 40 -45 " />
</symbol>
<desc>symbol的使用方法</desc>
<use x="0" y="20"  xlink:href="#arrow"  fill="green"  stroke="red" fill-opacity="0.1"/>
</svg>

補充一下說明此箭頭的形成:參照上面範例的path,M是ㄧ個起點,10和50這兩組數字分別代表X與Y的位置,而圖形從此這做起。接著v但表垂直,-20是相對於M的位置而言,所以要往下20,接著h50是水平線往右移動50,再來v-25又是往下25,接著|40 45,是畫斜的連接到(40,45)的位置,這樣就完成了一半,另外一半對稱圖形也是ㄧ此類推即可完成。

補充說明:
<symbol>元素與<g>元素的差別是:

*<symbol>元素本身不被顯示,只有<symbol>元素的例證才會被顯示。
*<symbol>元素的有viewBox和preserveAspectRatio屬性允許
*<symbol>做適合縮放以符合由<use>元素定義長方形的觀測阜。

<defs>元素

<defs>元素的內容模式和<g>元素一樣,因此,任何使用在<g>元素容器裡的子元素,同樣的也可以使用在<defs>元素裡,反之亦然,<defs>元素的內容不會直接被顯示。而<defs>元素是針對被參考元素的容器元素,為了文件的可讀性及可存取性而設置的,SVG規範建議盡可能將被參考的元素定義在<defs>元素中。


<desc>定義參考字串及文字路徑</desc>
<defs>
<text id="refText"> SVG </text>
<path id="pathText" d="M40 100 a 50 50 0 0 1 100 0 m 0 0 a 50 50 0 0 1 -100 0 "  />
</defs>
<text fill="green" font-size="20" letter-spacing="4">
<textPath xlink:href="#pathText">text reference to a path</textPath>
</text>
 

<image>元素

可以將一個完整個檔案內容顯示在當前使用者座標系統所指定的長方形<image>元素能參考光柵圖形影像檔案,像是PNG、JPEG、MIME格式的檔案。
<image x="40" y="40" width="100px" height="100px" xlink:href="./graphics/123123.gif" />

SVG動畫

SVG 引用SMIL動畫元素

<animate>   對單一隨時間變化的屬性做動畫
<set> 非數值屬性和性質的動畫
<animateMotion>  讓一個元素沿著路徑運動
<animateColor>  設定隨時改變的顏色轉換

SVG 延伸SMIL動畫元素

<animateTransform> 允許動畫控制平移、縮放、旋轉、傾斜
Path屬性 允許path屬性設定到animateMotion元素
<mpath>  SVG允許一個animateMotion元素包含一個參考到SVGpath元素,當作運動路徑定義的mpath子元素
keyPoint屬性 SVG增加keyPoint屬性,對animateotion元素運動路徑動畫精確的速度控制
rotate屬性 SVG增加rotate屬性,提供animateMotion元素控制物件在她的X軸相同方向或相反方向自動旋轉,當為運動路徑的方向切線速度

SVG dynamic picture

Before
 
After
 
<animate attributeName="width" form=“400" to=“800" begin="0s" dur="10s" repeatCount="1" fill="freeze"/>
這個動態圖片是一張圖片分割成兩邊,從中間向兩旁延伸,以上的文件是屬於右邊的延伸,form=“400" to=“800”表示從圖片橫向座標的400到800做延伸,左邊則是form=“400" to=“0”
例圖:

SVG dynamic picture No.2

這個動態圖片是利用begin元素設定不同的觸發條件來控制圖片起跑的順序
例圖:

<animate id="r1X" xlink:href="#r1" attributeName="x" attributeType="XML" from="0" to="600" begin="r1.click"  dur="2s" repeatCount="1" />
這段的文件,控制第一張圖片的起跑觸發是begin="r1.click",我們將它設定為當我點下滑鼠才會起跑

另外四張圖,都有不同的觸發條件
begin=“r1.click“  點一下起跑
begin=“accessKey(S)“ 按下S起跑
begin=“0s;r5X.end“ 一開始起跑和r5結束起跑
begin=“r3X.repeat(2)“ r3跑兩次後起跑
begin=“r4X.end+1s“ r4結束後一秒起跑

結論

SVG在網路上的支援性跟發展成熟度跟FLASH有很大的差距,要跟Flash競爭市場有相當的難度

參考資料

 Google.com
 Wiki.com
 W3C
 書籍:SVG程式設計實務