Intro of SVG - Cover

想在網頁上做視覺化?那「SVG」這項技術你最好別錯過。可縮放式向量圖形 ( SVG , Scalable Vector Graphics ) 並不是新玩意,早在 1999 年就已經提交至 W3C 而與 IE 的 VML 等技術競爭了,它是什麼東東呢?現在就來讓我們快速的帶大家看看 SVG 的樣貌。

西元 1989 年, Tim Berners-Lee 發明了全球資訊網 ( WWW , World Wide Web ) 並建立了一種利用角括號 「<」「>」組成「標籤」所編排的排版語言「HTML」初版;歷經數次的改版,直到現在大家常談論的 HTML5 ,包含了各種語意標籤、多媒體標籤、各種感測器介面與網路連接的 API。HTML 是一種排版語言,讓我們可以用文字的方式來制定網頁的排版、文字呈現的型態與超連結的訊息。

CERN Data Center @ 2010

WWW 發源地 CERN 的資料中心 ( 攝於 2010 ). credit: from Wikipedia, by Hugovanmeijeren, CC-BY-SA 3.0

但這感覺好像少了點什麼。在 HTML 中,我們可以利用「<img>」影像標籤置入圖片,但我們沒辦法很簡單的處理形狀。「我要一個圓形 - 帶點稍微狂野的紅色,還有鮮厚的邊框,最好稍微有點透明」這樣的概念必須要透過影像編輯軟體實現,也就是在每次老闆的喜怒無常之下,設計師就只得默默的坐在電腦前,開啟影像編輯軟體來重新製作圖片。

SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖。從簡單的直線、曲線、圓形、矩形,到複雜的任意路徑、填充樣式、座標轉換與動畫,我們可以利用標籤的形式來完成。這不光是換了一種影像的儲存格式而已,格式化、向量化的影像格式也就帶表了程式化的可能 - 各式的互動視覺化、視覺圖表都因此而可能,網頁遊戲製作也變得更簡單了。

SVG 推出當時適逢瀏覽器大戰的年代,瀏覽器支援度不高,不過時隔多年,現在大部份的瀏覽器都可以解讀 SVG 格式了。要使用 SVG 很簡單,使用簡單的文字編輯器與雙手,將下面的文字鍵入並存檔:

  <?xml version="1.0" encoding="utf-8"?>
  <svg><circle cx="50" cy="50" r="20"/></svg>

使用瀏覽器開啟,你會看到一個黑色的圓。就是這麼簡單!

標籤簡介

在撰寫網頁時,我們可以在網頁中插入 SVG 圖形,使用 <svg> 標籤來做:

  <svg> ... </svg>

<svg> 標籤會建立一個矩形區域,讓我們可以透過在 <svg> 標籤中間插入各種標籤來在這塊區域中繪圖。最常見的標籤有下列數種:

繪製圓圈 - <circle>

透過 circle 標籤的屬性「cx」、「cy」與「r」,我們可以設定圓的圓心座標 ( cx , cy ) 與圓的半徑 r ,例如:

  <svg>
    <circle cx="50" cy="50" r="10"/>
  </svg>

會以 ( 50, 50 ) 為圓心繪製一個半徑為 10 的圓。

繪製線條 - <line>

透過 line 標籤的屬性「x1」、「y1」與「x2」、「y2」,我們可以繪製一條由座標 (x1, y1) 到 (x2, y2) 的線,例如:

  <svg>
    <line x1="10" y1="10" x2="20" y2="20"/>
  </svg>

繪製矩形 -  <rect>

透過 rect 標籤的屬性「x」、「y」與「width」、「height」,我們可以以座標 (x, y) 做為左上角繪製一個長寬分別為 width 、 height 的矩形,例如:

  <svg>
    <rect x="10" y="10" width="30" height="30"/>
  </svg>

可以繪製由兩端點 (10, 10) 與 (40, 40) 組成、長寬皆為 30 的一個矩形。

實戰 - 笑臉先生

馬上進入實戰,利用 <circle>、<line>、與 <rect> 如何畫出一張笑臉圖呢?三個圓圈加上一個矩形就搞定:

  <svg>
    <circle cx="12" cy="10" r="5"/>
    <circle cx="38" cy="10" r="5"/>
    <circle cx="25" cy="26" r="10"/>
    <rect x="15" y="15" width="20" height="10" fill="white"/>
  </svg>

上例會得到類似下面的結果:

可以看到在上例中,我們利用一個白色的矩形來隱藏圓形的上半部,讓它看起來像個笑臉的嘴巴。在使用繪圖標籤時,有些屬性是全體通用的,我們可以利用它們來做一些效果。

填充與邊框

想要更換圖形的顏色,我們可以使用「fill」與「stroke」屬性:

  • fill: 設定形狀內部填滿的顏色
  • stroke: 設定形狀邊線的顏色
  • stroke-width: 設定形狀邊線的寬度

舉例來說,fill="white" 可以讓形狀填滿白色, stroke="blue" 可以讓形狀有藍色的邊線,而 stroke-width="5″ 可以讓形狀的邊線變得更粗。例如:

  <svg>
    <circle cx="50" cy="50" r="30" fill="green" stroke="blue" stroke-width="3"/>
  </svg>

上例的結果如下,有一個填滿綠色而邊框是藍色的圓形:

學會填色後,雖然好像才開始學五分鐘但其實已經可以畫出很多東西了,比方說日本動畫「魔法少女小圓」裡的謎樣生物「incubator」:

原理與前面的笑臉類似,利用六個圓圈與一個矩形搭配填色與邊框的設定很容易就可以做出這個例子。原始碼如下:

  <svg>
    <circle cx="9" cy="10" r="4" fill="darkred" stroke="deeppink" stroke-width="2"/>
    <circle cx="7" cy="8" r="1.5" fill="white"/>
    <circle cx="41" cy="10" r="4" fill="darkred" stroke="deeppink" stroke-width="2"/>
    <circle cx="39" cy="8" r="1.5" fill="white"/>
    <circle cx="22.3" cy="23" r="3" fill="none" stroke="black" stroke-width="1"/>
    <circle cx="27.7" cy="23" r="3" fill="none" stroke="black" stroke-width="1"/>
    <rect x="10" y="17" width="30" height="7" fill="white"/>
  </svg>

是不是很容易呢?

結語

手繪圖形雖然費時,但這對於了解語言的架構相當有幫助;當我們對基本的元素操做駕輕就熟的時候,我們也就可以很容易做出各式各樣的應用與變化;到時候,複雜的圖形我們也可以利用影像編輯軟體來輔助生成。

由於篇幅關係,我們先簡單介紹到這個地方,基本的形狀還有 <ellipse> 、 <polyline> 、 <polygon> 等等,除了多邊形需要利用 points 屬性填入每個座標的  x / y 值比較複雜,其它的使用方法都類似,大家可以自己試試看。會使用基本的形狀之後,就可以開始學習使用 <path> 標籤來繪製任意的曲線,這牽涉到一組曲線描述的語法,我們將在接下來的 SVG - Path 篇深入探討 Path 標籤如何使用。


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *