跳轉到內容

XML - 資料交換管理/SVG

來自華夏公益教科書
< XML - 資料交換管理
(從 SVG 重定向)


上一章 下一章
← SyncML VoiceXML →


 一位華夏公益教科書使用者認為此頁面應該拆分為更小的頁面，每個頁面都有更窄的子主題。

你可以透過將此大頁面拆分為更小的頁面來提供幫助。請務必遵循 命名規則。將書籍拆分為更小的部分可以提供更多關注點，並允許每個部分都做好一件事，這將有利於所有人。

你可以在 幫助閱讀室 中尋求幫助來拆分本書。
學習目標
  • 定義 SVG 及其用途
  • 討論光柵圖形和 SVG 之間的區別
  • 定義 Flash 和 SVG 之間的異同
  • 建立一個簡單的 SVG 文件
 由...發起

佐治亞大學

特里商學院

管理資訊系統系

什麼是 SVG？

[編輯 | 編輯原始碼]

基於 XML，可縮放向量圖形（SVG）是一種由 W3C 建立的開放標準向量圖形檔案格式和 Web 開發語言，旨在與其他 W3C 標準（如 DOM、CSS、XML、XSLT、XSL、SMIL、HTML 和 XHTML）相容。SVG 使得能夠從即時資料建立動態生成的、高質量的圖形。SVG 允許你設計高解析度圖形，其中可以包含漸變、嵌入式字型、透明度、動畫和濾鏡效果等元素。

SVG 檔案不同於光柵或點陣圖格式，如 GIF 和 JPEG，它們必須包含顯示圖形所需的每個畫素。因此，GIF 和 JPEG 檔案往往很龐大，僅限於單一解析度，並消耗大量的頻寬。SVG 檔案明顯小於它們的光柵對應檔案。此外，向量的使用意味著 SVG 圖形在任何縮放級別上都能保持其解析度。SVG 允許你縮放圖形、使用任何字型並列印設計，所有這些都不會影響解析度。SVG 基於 XML 並用純文字編寫，這意味著 SVG 程式碼可以使用任何文字編輯器進行編輯。此外，SVG 在點陣圖或光柵格式方面具有重要優勢，例如

  • 縮放：使用者可以放大影像的檢視，而不會對解析度產生負面影響。
  • 文字保持文字：文字保持可編輯和可搜尋。此外，可以使用任何字型。
  • 檔案大小小：SVG 檔案通常比其他 Web 圖形格式小，可以更快地下載。
  • 顯示獨立性：SVG 影像始終在你的螢幕上顯示清晰，無論解析度如何。你永遠不會遇到“畫素化”的影像。
  • 出色的顏色控制：SVG 提供了 1600 萬種顏色的調色盤。
  • 互動性和智慧性：由於 SVG 基於 XML，因此它提供了可以響應使用者操作的動態互動性。

資料驅動圖形

[編輯 | 編輯原始碼]

由於它是用 XML 編寫的，因此 SVG 內容可以連結到後端業務流程、資料庫和其他資訊源。SVG 文件使用現有的標準，例如層疊樣式表（CSS）和可擴充套件樣式表語言（XSL），使圖形能夠輕鬆定製。這導致

  • 降低維護成本：由於 SVG 允許動態更改影像屬性，因此它消除了對大量影像檔案的需求。SVG 允許你透過可指令碼化屬性指定翻轉狀態和行為。例如，可以使用單個 SVG 檔案建立複雜的導航按鈕，而通常這需要多個光柵檔案。
  • 縮短開發時間：SVG 將傳統 Web 工作流程的三個元素——內容（資料）、簡報（圖形）和應用程式邏輯（指令碼）分開。使用光柵檔案，如果對內容進行更改，則必須完全重新建立整個圖形。
  • 可擴充套件的伺服器解決方案：客戶端和伺服器都可以渲染 SVG 圖形。由於“客戶端”可以用來渲染圖形，因此 SVG 可以減少伺服器負載。客戶端渲染可以透過允許使用者“放大”SVG 圖形來增強使用者體驗。此外，如果客戶端具有有限的處理資源（如 PDA 或手機），則可以使用伺服器來渲染圖形。無論檔案如何渲染，源內容都是相同的。
  • 易於更新：SVG 將設計與內容分離，從而允許輕鬆更新兩者。

互動式圖形

[編輯 | 編輯原始碼]

SVG 允許你建立基於 Web 的應用程式、工具或使用者介面。此外，你可以合併指令碼和程式語言，例如 JavaScript、Java 和 Visual Basic。任何 SVG 元素都可以用來修改或控制任何其他 SVG 或 HTML 元素。由於 SVG 是基於文字的，因此圖形內的文字可以快速地翻譯成其他語言，這簡化了本地化工作。此外，如果與資料庫存在連線，則 SVG 允許圖表和圖形的鑽取功能。這導致

  • 改善終端使用者體驗：使用者可以輸入自己的資料、修改資料，甚至從兩個或多個數據源生成新圖形。
  • 在 SVG 中，文字就是文字：如前所述，SVG 將文字視為文字。這使得基於 SVG 的圖形可以被搜尋引擎搜尋。
  • SVG 可以建立 SVG：可以開發企業應用程式，例如線上幫助功能。

個性化圖形

[編輯 | 編輯原始碼]

SVG 可以針對人們來克服文化、可訪問性和美學方面的問題，並且可以針對許多受眾和人口統計群體進行定製。SVG 還可以使用從資料庫或使用者互動收集的資訊動態生成。總目標是擁有一個原始檔，該檔案在各種情況下都能無縫地轉換。這導致

  • 一個來源，定製的外觀：SVG 使得根據美學、文化和可訪問性問題更改顏色和其他屬性成為可能。SVG 可以使用樣式表為不同情況定製其外觀。
  • 國際化、本地化：SVG 支援 Unicode 字元，以便有效地以多種語言和方式顯示文字——垂直、水平和雙向。
  • 利用現有標準：SVG 與樣式表無縫協作，以控制簡報。層疊樣式表（CSS）可用於典型的字型特徵以及其他 SVG 圖形元素。例如，你可以從外部樣式表控制元素的描邊顏色、填充顏色和填充不透明度。

SVG 與 Macromedia Flash

[編輯 | 編輯原始碼]

過去十年，Macromedia 一直是網頁上基於向量圖形的主力軍。然而，顯而易見的是，SVG 提供了 Flash 的許多功能的替代方案，並融合了許多其他功能。建立基於向量圖形的元素是 SVG 和 Flash 的基礎結構。與 Flash 類似，SVG 還包括為每個元素建立基於時間動畫的能力，並允許透過 DOM、JavaScript 或 SVG 瀏覽器支援的任何其他指令碼語言對元素進行指令碼化。開發人員可以使用許多基本元素，包括用於建立圓形、矩形、線條、橢圓、多邊形和文字的元素。與 HTML 類似，元素使用級聯樣式表 (CSS2) 進行樣式化，使用 style 元素或透過 style 屬性直接在特定圖形元素上進行樣式化。也可以使用表示屬性指定樣式屬性。對於適用於元素的每個 CSS 屬性，也可以使用指定相同樣式屬性的 XML 屬性。關於 Flash 或 SVG 哪個更適合 Web 開發，一直存在爭議，兩者都有優勢，通常取決於具體情況。

Flash 優勢

  • 如果你想製作一個類似 Flash 的網站，使用 Flash 吧——使用 SVG 複製相同的效果很難。
  • 如果你想要複雜的動畫或複雜的遊戲，使用 Flash 吧（SVG 內建的 SMIL 動畫引擎非常佔用處理器資源）。
  • 如果你的使用者不是那麼精通電腦，例如兒童網站或面向廣泛受眾的網站，使用 Flash 吧。
  • 如果聲音很重要，使用 Flash 吧——SVG/SMIL 支援聲音，但它非常基本。
  • 如果你喜歡 WYSIWYG 而不是指令碼，使用 Flash 吧。

SVG 優勢

  • 它完全可指令碼化，使用 DOM1 介面和 JavaScript。這意味著你可以從一個空的 SVG 影像開始，使用 JavaScript 構建它。
  • SVG 可以輕鬆地由 ASP、PHP、Perl 等建立，並從資料庫中提取。
  • 它有一個內建的 ECMA 指令碼（JavaScript）引擎，因此你不需要針對每個瀏覽器進行編碼，也不需要學習 Flash 的 ActionScript。
  • SVG 是 XML，這意味著任何可以讀取 XML 的東西都可以讀取它。Flash 可以使用 XML，但在使用之前需要將其轉換。
  • 這也允許 SVG 透過 XSLT 樣式表/解析器進行轉換。
  • SVG 支援標準 CSS1 樣式表。
  • SVG 中使用的文字仍然是可選擇和可搜尋的。
  • 你只需要一個文字編輯器來建立 SVG，而不是購買 Flash。
  • SVG 是一個真正的 Web 標準（不僅僅是“事實上的”標準），受各種不同程式的支援，其中一些是自由軟體（因此可用於大多數免費計算機作業系統）。

為什麼要使用 SVG？

[edit | edit source]

SVG 正在透過 W3C 及其成員的努力而出現。它是開源的，因此不需要使用專有語言和開發工具，如 Macromedia Flash。由於它是基於 XML 的，因此對於開發人員來說看起來很熟悉，並允許他們使用現有的技能。SVG 是基於文字的，可以透過利用他人的工作（或程式碼）來學習，這大大縮短了整體學習曲線。此外，由於 SVG 可以整合 JavaScript、DOM 和其他技術，熟悉這些語言的開發人員可以用非常類似的方式建立圖形。SVG 還具有高度的相容性，因為它可以與 HTML、GIF、JPEG、PNG、SMIL、ASP、JSP 和 JavaScript 協同工作。最後，在 SVG 中建立的圖形是可縮放的，並且不會在跨平臺和裝置時導致質量損失。因此，SVG 可用於 Web、印刷以及行動式裝置，同時保持完全的質量。

SVG 瀏覽器

[edit | edit source]

Adobe SVG 瀏覽器

[edit | edit source]

Adobe SVG 瀏覽器可作為可下載外掛，允許在所有主要瀏覽器（包括 Internet Explorer（版本 4.x、5.x、6.x）、Netscape（版本 4.x、6.x）和 Opera 在 Internet Explorer 和 Netscape 中）的 Windows、Linux 和 Mac 作業系統上檢視 SVG。

Adobe SVG 瀏覽器是部署最廣泛的 SVG 瀏覽器，它支援幾乎所有 SVG 規範，包括對 SVG DOM、動畫和指令碼的支援。

Adobe SVG 瀏覽器的功能 右鍵單擊（在 Mac 上按 CTRL 鍵 + 滑鼠單擊）你的 SVG 影像以獲取上下文選單。上下文選單為您提供幾個選項，所有這些選項都可以透過選單本身或“熱鍵”訪問。

表 1：Adobe SVG 瀏覽器的功能

功能 描述
放大

使用 CTRL 鍵（或 Apple 鍵），你可以拖動滑鼠以建立一個矩形，該矩形指定要縮放區域的橫截面。

縮小

這與“放大”的工作方式相同，只是你需要同時按下 CTRL 鍵和 SHIFT 鍵。

平移

按下 ALT 鍵並移動滑鼠游標，同時出現一隻手型圖示。

複製 SVG

SVG 檢視器的“複製 SVG”選項的目的是讓使用者能夠將圖形和/或原始碼剪下並貼上到其他應用程式中。使用“複製 SVG”，開發人員可以複製原始碼，該程式碼可以貼上到任何文字編輯器中。此外，在選擇“複製 SVG”並切換到桌面應用程式（例如 MS Office）後，使用者可以選擇使用編輯/貼上選項生成 SVG 的 DOM 樹程式碼的快照（這包含動態 SVG 影像的當前結構），或者使用者可以使用編輯/特殊貼上選項將 SVG 轉換為點陣圖影像。隨著其他應用程式對 SVG 支援的改進和增強，這些選項可能會得到改進和增強。

檢視原始碼

SVG 檢視器的“檢視原始碼”選單選項允許將壓縮和未壓縮的 SVG 原始碼立即在新的瀏覽器視窗中以文字形式檢視。這對設計師和開發人員來說是一個非常方便的選擇。

另存為 SVG...

此選項允許透過彈出一個“將 SVG 另存為”表單來快速將 SVG 內容儲存到本地計算機，該表單允許你輸入檔案的名稱和位置。在 Adobe SVG 檢視器 3.0 版本中，在“另存為”對話方塊中添加了將檔案儲存為 GZip 壓縮的 SVG（.svgz）的選項。

SMIL

[edit | edit source]

同步多媒體整合語言 (SMIL，發音為“smile”) 使互動式視聽演示的簡單創作成為可能。SMIL 通常用於將流式音訊和影片與影像、文字或任何其他媒體型別整合的“富媒體”/多媒體演示。SMIL 是一種易於學習的類似 HTML 的語言，許多 SMIL 演示使用簡單的文字編輯器編寫。SMIL 可以與 XML 一起使用，以便在檢視 SVG 時啟用影片和聲音。

注意使用 Microsoft Windows Mozilla 的使用者！

[edit | edit source]

Seamonkey 和 Mozilla Firefox 瀏覽器原生支援 SVG。如果需要，Adobe SVG 檢視器外掛可以與 Mozilla Firefox 或 Seamonkey 瀏覽器一起使用。 [1] 基於 Webkit 的瀏覽器也原生支援一些 SVG。

原生 SVG (Firefox)

[edit | edit source]

Mozilla SVG 實現是一個原生 SVG 實現。這與 Adobe 檢視器等外掛式 SVG 檢視器相反（目前 Adobe 檢視器是最流行的 SVG 檢視器）。

其中一些含義是

  • Mozilla 可以處理包含 SVG、MathML、XHTML、XUL 等的文件，所有這些文件都混合在同一個“複合”文件中。這是透過使用 XML 名稱空間實現的。
  • Mozilla “瞭解” SVG 內容。它可以透過 SVG DOM（與 XML DOM 相容）訪問，並由 Mozilla 的指令碼引擎操作。
  • 其他 Mozilla 技術可以與 SVG 一起使用。XBL 與 SVG 的組合特別有趣。它可以用於建立圖形小部件（我想知道我們什麼時候會看到第一個基於 SVG 的 chrome！）或擴充套件 Mozilla 以識別其他專業語言，例如 CML（化學標記語言）。 http://croczilla.com/svg/ 上有一些關於這些更高階的使用模式的示例。

rsvg-view

[edit | edit source]

rsvg-view 程式是 librsvg 軟體包[1]的一部分。它可以作為預設的 svg 開啟程式。它可以調整 svg 的大小並將它們匯出為 png，這通常是人們需要對 svg 檔案做的唯一操作。[2]

示例：rsvg-view-3 name.svg

建立 SVG 檔案

[edit | edit source]

如何操作

[edit | edit source]

可以使用 4 組程式 

  • 通用文字編輯器，如 Notepad ++（帶 XML 語法高亮顯示）
  • 專門的 svg 編輯器
  • 可以匯出 svg 的程式（如 gnuplot、Maxima CAS）
  • 自己的程式，透過字串連線直接建立 svg 檔案

SVG 編輯器

[編輯 | 編輯原始碼]

正如您從前面路徑定義示例中看到的，SVG 檔案以極其簡化的格式編寫，以幫助最大程度地減少檔案大小。但是，根據影像的複雜程度，它們可能非常難以編寫。有一些 SVG 編輯器工具可以幫助簡化此任務。其中一些工具是

表 3：SVG 編輯器

SVG 編輯器 平臺 可用性 描述
Adobe Illustrator 10.0 Mac OS 9.1/9.2/10.1、Win98/ME、Win2000/XP 商業產品

Illustrator 版本 9.01 具有 SVG 匯出功能。最近宣佈的版本 10 添加了 SVG 匯入並增強了 SVG 匯出，包括資料驅動的圖形。

Sodipodi Linux / UNIX 開源（免費，帶原始碼）

快速向量圖形 WYSWIG 編輯器。

Adobe Livemotion 2 Win98/ME、Win2000/XP 商業產品

Adobe Livemotion 是類似於 Macromedia Flash 的創作工具。它在早期版本中具有 SVG 匯出功能，但在版本 2 中，其支援被撤回。看來即使 Adobe 對 SVG 的支援也很可疑。

Beez Win95/98/ME、WinNT/2000/XP 免費下載

Beez 是一款 WYSIWYG 編輯器，用於建立單個動畫 SVG 路徑，該路徑由多個貝塞爾曲線組成，然後可以在 SVG 檔案中使用。對於手工編碼人員來說，這是一個不錯的實用工具。它是一個開源專案，在 sourceforge 上，並用 Delphi 編寫。

Corel Draw！ Win95/98/ME、WinNT/2000、Mac OS X 版本 11 商業產品 具有 SVG 匯入和匯出功能
Gill

（Gnome Illustration Application）

 Linux / UNIX（帶 Gnome） 免費，帶原始碼

帶 SVG 匯入和匯出的繪圖程式；具有完整的 DOM；不斷更新，可以將 SVG 嵌入其他 Gnome 程式（如電子表格 Gnumeric）。有關最新狀態，請參閱 CVS 更改日誌

IMS Web

Dwarf

 Win95/98/ME、WinNT/2000/XP 免費下載 WYSIWYG 編輯器，匯出為 HTML 或 SVG
IMS Web

Engine

 Win95/98/ME、WinNT/2000/XP 可下載 14 天試用版

IMS Web Engine 是一款互動式動畫編輯器和 Web Top 釋出器，用於建立內容豐富的互動式動態 HTML 和 SVG

Inkscape Linux、Windows、Mac 免費，帶原始碼 WYSIWYG 編輯器，但允許直接編輯 XML。目前還沒有動畫。

自己的程式

[編輯 | 編輯原始碼]
C
[編輯 | 編輯原始碼]

以下是用 C 編寫的示例 

/*

c console program based on :
cpp code by Claudio Rocchini

http://commons.wikimedia.org/wiki/File:Poincare_halfplane_eptagonal_hb.svg


http://validator.w3.org/
The uploaded document "circle.svg" was successfully checked as SVG 1.1.
This means that the resource in question identified itself as "SVG 1.1"
and that we successfully performed a formal validation using an SGML, HTML5 and/or XML
Parser(s) (depending on the markup language used).

*/

#include <stdio.h>
#include <stdlib.h>
#include <math.h>


const double PI = 3.1415926535897932384626433832795;

const int  iXmax = 1000,
           iYmax = 1000,
           radius=100,
           cx=200,
           cy=200;


const char *black="#FFFFFF", /* hexadecimal number as a string for svg color*/
           *white="#000000";

 FILE * fp;
 char *filename="circle.svg";
 char *comment = "<!-- sample comment in SVG file  \n can be multi-line -->";


void draw_circle(FILE * FileP,int radius,int cx,int cy)
{
    fprintf(FileP,"<circle cx=\"%d\" cy=\"%d\" r=\"%d\" style=\"stroke:%s; stroke-width:2; fill:%s\"/>\n",
    cx,cy,radius,white,black);
}


int main(){

        // setup
        fp = fopen(filename,"w");
	fprintf(fp,
		    "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n"
		    "%s \n "
           "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \n"
           "\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n"
           "<svg width=\"20cm\" height=\"20cm\" viewBox=\"0 0 %d %d \"\n"
           " xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n",
           comment,iXmax,iYmax);

        // draw
	draw_circle(fp,radius,cx,cy);

        // end
        fprintf(fp,"</svg>\n");
	fclose(fp);
	printf(" file %s saved \n",filename );

	return 0;
}
Haskell
[編輯 | 編輯原始碼]

Haskell 程式碼 : Claude Heiland-Allen 編寫的帶 SVG 輸出的 Haskell 中的 lavaurs 演算法

JavaScript
[編輯 | 編輯原始碼]
帶 JavaScript 程式碼的 SVG 影像
Matlab
[編輯 | 編輯原始碼]

基於 Guillaume JACQUENOT 的程式碼 :[3]

filename = [filename '.svg'];
fid = fopen(filename,'w');
fprintf(fid,'<?xml version="1.0" standalone="no"?>\n');
fprintf(fid,'"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n');
fprintf(fid,'<svg width="620" height="620" version="1.1"\n');
fprintf(fid,'xmlns="http://www.w3.org/2000/svg">\n');
fprintf(fid,'<circle cx="100" cy="100" r="10" stroke="black" stroke-width="1" fill="none"/>\n');
fprintf(fid,'</svg>\n');
fclose(fid);
Lisp
[編輯 | 編輯原始碼]

可以使用 cl-svg 庫或您自己的過程。

Maxima
[編輯 | 編輯原始碼]
BeginSVG(file_name,cm_width,cm_height,i_width,i_height):=
block(
destination : openw (file_name),
printf(destination, "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>~%"),
printf(destination,"<svg width=\"~d cm\" height=\"~d cm\" viewBox=\"0 0 ~d ~d\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">~%",
cm_width,cm_height,i_width,i_height),
return(destination)
);
CircleSVG(dest,center_x,center_y,_radius):=printf(dest,"<circle cx=\"~d\" cy=\"~d\" r=\"~d\" fill=\"white\" stroke=\"black\" stroke-width=\"2\"/>~%",
center_x,center_y,_radius);
CloseSVG(destination):=
(
printf(destination,"</svg>~%"),
close (destination)
);
/* ---------------------------------------------------- */
cmWidth:10;
cmHeight:10;
iWidth:800;
iHeight:600;
radius:200;
centerX:400;
centerY:300;
f_name:"b.svg";
/* ------------------------------------------------------*/
f:BeginSVG(f_name,cmWidth,cmHeight,iWidth,iHeight);
CircleSVG(f,centerX,centerY,radius);
CloseSVG(f);
Python
[編輯 | 編輯原始碼]

可以使用預先準備的庫，或者將 svg 程式碼包裝在單引號中。

def svg_page():
 """ Function to write test code for a stub svg code page
 The raw code that uses double-quotes is captured by single quotes
 To become a python text string"""
 page='<?xml version="1.0"?>\n<svg xmlns="http://www.w3.org/2000/svg" top="0in" width="5.5in" height="2in">\n    <rect fill="blue" width="250" height="200"/>\n</svg>\n'
 return page

def write_page(page, title):
    """ Function to write the svg code to disk """
    filename = title + ".svg"
    f = open(filename, "w")
    f.write(page)

write_page (svg_page(), "My svgstub")
帶 python 程式碼的影像

入門

[編輯 | 編輯原始碼]

由於它基於 XML，因此 SVG 遵循標準的 XML 約定。每個 SVG 檔案都包含在 <svg> 標籤中，作為其父元素。SVG 可以嵌入到父文件中，也可以獨立使用。例如，以下顯示了一個獨立的 SVG 文件

示例 1：建立 SVG 

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    ...
</svg>

第一行宣告接下來的程式碼是 XML。請注意“standalone”屬性。這表示該特定檔案不包含足夠的處理指令以獨立執行。為了獲得顯示特定影像所需的必要功能，SVG 檔案必須引用外部文件。

第二行提供對文件型別定義 (DTD) 的引用。如第 7 章：XML 模式中所述，DTD 是一種定義 XML 例項文件中包含的資料的備用方法。熟悉 HTML 的開發人員會注意到 DTD 宣告類似於 HTML 文件中的宣告，但它是針對 SVG 的。有關 DTD 的更多資訊，請訪問：https://w3schools.tw/dtd/dtd_intro.asp

提示：許多 IDE（如 NetBeans）沒有內建到工具中的 SVG“模板”。因此，在建立 SVG 文件時，使用簡單的文字編輯器可能更容易。安裝 SVG 檢視器後，您應該可以使用任何瀏覽器開啟並檢視 SVG 文件。在建立 SVG 文件時，請記住

  • 將您的文件宣告為 XML 檔案
  • 確保您的 SVG 文件元素位於 <svg> 元素標籤之間，包括 SVG 名稱空間宣告。
  • 使用 .svg 副檔名儲存您的檔案。
  • 沒有必要包含 DOCTYPE 語句，該語句包含資訊來識別此為 SVG 文件（因為 SVG 1.2 之後不再有這種語句）。[4][5][6]

第二行上的 <svg> 元素定義了 SVG 文件，並且可以指定其他內容，包括使用者座標系以及各種 CSS 單位說明符。與 XHTML 文件一樣，文件元素必須包含名稱空間宣告，以將該元素宣告為相關名稱空間的成員（在本例中為 SVG 名稱空間）。在 <svg> 元素中，可以有三種類型的繪圖元素：文字、形狀和路徑。

文字

[編輯 | 編輯原始碼]

以下是文字元素的示例：示例 2：在 SVG 中使用文字

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="5.5in" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="0.5in">
   <text y="15" fill="red">This is SVG.</text>
</svg>

<svg> 元素指定：1）保留文字元素中的空白，2）SVG 文件的寬度和高度——這對於指定列印輸出尺寸尤其重要。在本例中，文字位於 5.5 英寸寬、0.5 英寸高的影像區域中。第 5 行上的“y”屬性宣告文字元素的基線距離 SVG 文件頂部 15 畫素。文字元素上的省略“x”屬性表示 x 座標為 0。

因為 SVG 文件使用 W3C DTD，所以您可以使用 W3C 驗證器來驗證您的文件。請注意，“style”屬性用於描述文字元素的呈現。可以透過使用呈現屬性 fill="red" 以相同的方式為文字賦予紅色。

形狀

[編輯 | 編輯原始碼]

SVG 包含以下基本形狀元素

  • 矩形
  • 圓形
  • 橢圓
  • 線條
  • 折線
  • 多邊形

這些基本形狀以及本章後面將介紹的“路徑”構成了 SVG 的圖形形狀。在本 SVG 簡介中，我們將僅介紹此處的一些形狀。

矩形

[編輯 | 編輯原始碼]

<rect> 元素定義一個矩形，該矩形與當前使用者座標系對齊，當前使用者座標系是當前活動的座標系，用於定義座標和長度如何在當前畫布上定位和計算。可以透過為 rx 和 ry 屬性設定值來建立圓角矩形。

以下示例將生成一個藍色矩形，其左上角與影像區域的左上角對齊。這使用 x 和 y 屬性的預設值“0”。

示例 3：在 SVG 中建立矩形 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" top="0in" width="5.5in" height="2in">
    <rect fill="blue" width="250" height="200"/>
</svg>

它將產生以下結果

Example of SVG use of rectangle shape

圓形

[編輯 | 編輯原始碼]

圓形元素需要三個屬性：cx、cy 和 r。'cx' 和 'cy' 值指定圓心的位置，而 'r' 值指定半徑。如果未指定 'cx' 和 'cy' 屬性，則圓心點假定為 (0, 0)。如果 'r' 屬性設定為零，則圓形將不會顯示。與 'cx' 和 'cy' 不同，'r' 屬性不是可選的，必須指定。此外，關鍵字 stroke 建立影像的輪廓。寬度和顏色都可以更改。

圖 4：在 SVG 中建立圓形 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="300">
    <circle cx="100" cy="50" r="40" stroke="darkslategrey" stroke-width="2" fill="grey"/>
</svg>

它將產生以下結果

Example of SVG use of circle shape

多邊形

[編輯 | 編輯原始碼]

多邊形是任何由三條或多條邊組成的幾何形狀。'points' 屬性描述指定多邊形角點的 (x,y) 座標。對於此特定示例，存在三個點，表明將生成一個三角形。

圖 5：在 SVG 中建立多邊形 

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <polygon points="220,100 300,210 170,250" style="fill:#blue;stroke:red;stroke-width:2"/>
</svg>

它將產生以下結果

路徑

[編輯 | 編輯原始碼]

路徑用於在 SVG 中繪製您自己的形狀，並使用以下資料屬性進行描述

表 2：SVG 路徑

屬性 命令 引數 功能 描述
移動到 M x y 設定新的當前點 在給定的 (x,y) 座標處開始新的子路徑。
線段 L x y 繪製一條直線

從當前點繪製一條線到給定的 (x,y) 座標，該座標成為新的當前點。

水平線段 H x 繪製水平線

從當前點 (cpx, cpy) 繪製一條水平線到 (x, cpy)。

垂直線段 V y 繪製一條垂直線

從當前點 (cpx, cpy) 繪製一條垂直線到 (cpx, y)。

曲線 C x1 y1 x2 y2 x y 使用三次貝塞爾曲線繪製曲線

使用 (x1,y1) 作為曲線開始處的控制點和 (x2,y2) 作為曲線結束處的控制點，從當前點繪製一條三次貝塞爾曲線到 (x,y)。

平滑曲線 S x2 y2 x y 使用三次貝塞爾曲線繪製簡寫/平滑曲線

從當前點繪製一條三次貝塞爾曲線到 (x,y)。第一個控制點假定為相對於當前點在先前命令的第二個控制點的反射點。(x2,y2) 是第二個控制點（即，曲線結束處的控制點）

二次貝塞爾曲線 Q x1 y1 x y 繪製二次貝塞爾曲線

使用 (x1,y1) 作為控制點，從當前點繪製一條二次貝塞爾曲線到 (x,y)。

平滑二次貝塞爾曲線 T x y 繪製簡寫/平滑二次貝塞爾曲線

從當前點繪製一條二次貝塞爾曲線到 (x,y)。

橢圓弧 A rx ry x-axis-rotation large-arc-flag sweep-flag x y 繪製橢圓或圓弧

從當前點繪製一條橢圓弧到 (x, y)。橢圓的大小和方向由兩個半徑 (rx, ry) 和一個 x 軸旋轉定義，它指示橢圓作為一個整體相對於當前座標系旋轉的方式。橢圓的中心 (cx, cy) 是自動計算的，以滿足其他引數施加的約束。large-arc-flag 和 sweep-flag 有助於自動計算並幫助確定如何繪製弧線。

閉合路徑 Z (無)

透過繪製一條線到最後一個移動到點來關閉當前路徑

透過從當前點繪製一條直線到當前子路徑的初始點來關閉當前子路徑。

以下示例生成三角形的形狀。“M” 表示“移動到”以設定第一個點。“L” 表示“線段”，從“M” 繪製一條線到“L” 座標。“Z” 表示“閉合路徑”，它從最後一組 L 座標繪製一條線回到 M 起始點。

圖 6：在 SVG 中建立路徑 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="5.5in" height="2in">
    <path d="M 50 10 L 350 10 L 200 120 z"/>
</svg>

它生成此結果

Example of SVG use of paths

驗證

[編輯 | 編輯原始碼]

建立檔案後，使用 W3C 驗證器[7]檢查其程式碼

最佳化

[編輯 | 編輯原始碼]

即使沒有錯誤的程式碼也可以改進。例如，對元素進行分組可以使程式碼更短。

在 HTML 中包含 SVG

[編輯 | 編輯原始碼]

在 HTML 文件中包含 SVG 有三種方法。基本上，SVG 文件首先作為獨立檔案建立。然後使用以下命令之一在 HTML 文件中引用它。

表 4：在 HTML 中包含 SVG

命令 優點 缺點
<embed>
  1. 幾乎所有瀏覽器都支援
  2. 允許 html2svg 和 svg2html 指令碼
  3. Adobe 建議在其 SVG 檢視器中使用
  1. 在任何 HTML 規範中都沒有明確的標準化
<object>
  1. HTML4 及更高版本的標準
  2. 在較新的瀏覽器版本中受支援
  1. 在較新的瀏覽器中有效，但沒有 html2svg 和 svg2html 指令碼
<iframe>
  1. 在大多數瀏覽器中有效，但沒有記錄
  1. 生成視窗狀邊框，沒有特定樣式

嵌入

[編輯 | 編輯原始碼]

語法如下：圖 7：使用關鍵字 embed 將 SVG 嵌入 HTML

<embed src="canvas.svg" width="350" height="176" type="image/svg+xml" name="emap">

可以將一個額外的屬性“pluginspage”設定為可以下載外掛的 URL。

pluginspage="http://www.adobe.com/svg/viewer/install/main.html"

物件

[編輯 | 編輯原始碼]

語法如下，符合 HTML 4 Strict 規範：圖 8：使用關鍵字 object 將 SVG 嵌入 HTML

<object type="image/svg+xml" name="omap" data="canvas_norelief.svg" width="350" height="176"></object>

在開始和結束 <object> 標記之間，可以新增不支援物件的瀏覽器的資訊。

<object ...>You should update your browser</object>

不幸的是，一些瀏覽器（如 Netscape Navigator 4）如果 type 屬性設定為 text/html 以外的其他屬性，則不會顯示此替代內容。

內嵌框架

[編輯 | 編輯原始碼]

語法如下，符合 HTML 4 Transitional 規範：圖 9：使用關鍵字 iframe 將 SVG 嵌入 HTML

<iframe src="canvas_norelief.svg" width="350" height="176" name="imap"></iframe>

在開始和結束 <iframe> 標記之間，可以新增不支援內嵌框架的瀏覽器的資訊。

<iframe ...>You should update your browser</iframe>

建立 3D SVG 影像

[編輯 | 編輯原始碼]

由查爾斯·甘提撰寫，佐治亞大學網際網路技術碩士課程，2007 屆

有時我們可能希望以三維方式檢視 SVG 影像。為此，我們需要更改圖形的視角。到目前為止，我們建立了二維圖形，例如圓形和正方形。它們存在於一個簡單的 x, y 平面中。如果我們想以三維方式檢視某些東西，我們必須新增 z 座標平面。z 平面已經存在，但我們正面朝向它，因此如果 z 上的資料發生變化，對檢視者來說不會有任何不同。我們需要在資料檔案中新增另一個引數，即 z 引數。

<?xml version="1.0"?>
  <data>
  <subject x_axis="90" y_axis="118" z_axis="0" color="red" />
  <subject x_axis="113" y_axis="45" z_axis="75" color="purple" />
  <subject x_axis="-30" y_axis="-59" z_axis="110" color="blue" />
  <subject x_axis="60" y_axis="-50" z_axis="-25" color="yellow" />
</data>

獲得資料後，我們將使用 XSLT 建立 SVG 檔案。SVG 樣式表與其他樣式表相同，但我們需要確保在轉換過程中建立了 SVG 檔案。我們在宣告中使用此行呼叫 SVG 名稱空間

 xmlns="http://www.w3.org/2000/svg

與之前的示例相比，我們應該進行的另一個更改是更改 (0, 0) 的原點。我們在這個示例中更改原點是因為我們的一些資料為負數。預設原點位於 SVG 圖形的左上角。負值不會顯示，因為與傳統的座標平面不同，負值位於正值上方。要移動原點，我們只需在樣式表中新增一行程式碼。在講解這行程式碼之前，讓我們先看看 g 元素。容器元素 g 用於對相關的圖形元素進行分組。在這裡，我們將使用 g 將我們的圖形元素組合在一起，然後我們可以應用變換。以下是宣告 g 並將原點更改為右移 300 畫素，向下移動 300 畫素的方法

 <g transform="translate(300,300)">graphical elements</g>

SVG 變換非常簡單，直到要改變視點。SVG 有旋轉和傾斜二維影像的功能，但它無法在三維空間中旋轉座標系。為此，我們需要使用一些數學和少量 Java 程式碼。在三維空間中旋轉時，需要進行兩次旋轉，一次繞 y 軸旋轉，另一次繞 x 軸旋轉。第一次旋轉將繞 y 軸進行，公式如下

Az 是 z 軸旋轉的角度

y 不會改變，因為我們繞 y 軸旋轉

第二次旋轉將繞 x 軸進行。請記住，已經進行了一次旋轉，因此我們不需要使用 x、y 和 z 值，而是需要使用上一次旋轉中得到的 x'、y' 和 z'（x-prime、y-prime 和 z-prime）。公式如下

z" = z'*cos(Ay) – y'*sin(Ay) Ay 是繞 y 軸旋轉的角度

y" = z'*sin(Ay) + y'*cos(Ay)

x" = x' 請記住，我們繞 x 軸旋轉，因此這不會改變

還記得三角函式課上的老式縮寫 SOH CAH TOA 嗎？這意味著

Sin = 對邊/斜邊 Cos = 鄰邊/斜邊 Tan = 對邊/鄰邊

我們使用這些函式來查詢旋轉所需的角。根據前兩個公式，我們可以對 Az 和 Ay 做出以下陳述

tan(Az) = Xv/Zv

sin(Ay) = Yv/sqrt(Xv2 + Yv2 + Zv2)

由於旋轉需要執行很多步驟，因此我們應該將所有這些資訊放入 Java 類中，然後在樣式表中呼叫該類。Java 類應該包含用於執行所有計算的方法，以確定旋轉完成後新的資料點將位於何處。建立該 Java 類超出了本節的範圍，但在本示例中，我將稱之為 ViewCalc.class。

現在我們能夠旋轉影像了，我們需要將該功能整合到變換中。我們將使用引數在變換期間將視點傳遞到樣式表中。預設視點為 (0, 0, 0)，在樣式表中指定如下

示例 10：使用 SVG 的 3D 影像 

     <?xml version="1.0" ?>
     <xsl:stylesheet version="1.0"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <!-- default viewpoint in case they are not specified  -->
        <!-- from the command line -->
        <xsl:param name="viewpoint_x">0</xsl:param>
        <xsl:param name="viewpoint_y">0</xsl:param>
        <xsl:param name="viewpoint_z">0</xsl:param>
     <xsl:template match="/">
      …

現在需要將 Java 新增到樣式表中，以便處理器知道要呼叫哪些方法。在名稱空間宣告中添加了兩行

     <?xml version="1.0" ?>
     <xsl:stylesheet version="1.0"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
         <b>xmlns:java="ViewCalc"
         exclude-result-prefixes="java"</b>>

請注意 exclude-result-prefixes="java" 行。新增該行是為了讓樣式表中以 java: 為字首的內容得到處理，而不是輸出。請確保 ViewCalc 類在 CLASSPATH 中，否則變換將無法執行。

最後一步是從樣式表中呼叫 ViewCalc 類中的方法。例如

   <xsl:template match="square">
        <xsl:for-each select=".">
         <xsl:variable name="locationx" select="@x_axis"/>
         <xsl:variable name="locationy" select="@y_axis"/>
         <xsl:variable name="locationz" select="@z_axis"/>
        <xsl:variable name="thisx" select="java:locationX($locationx,$locationy,
          $locationz, $viewpoint_x, $viewpoint_y,
          $viewpoint_z)"/>
        <xsl:variable name="thisy" select="java:locationY($locationx,
          $locationy, $locationz, $viewpoint_x, $viewpoint_y,
          $viewpoint_z)"/>
       </xsl:for-each>

最後，我們傳遞新引數並執行 XSL 變換，以使用不同的視點建立 SVG 檔案。

摘要

[edit | edit source]
SVG 代表可縮放向量圖形。這意味著它建立的影像在移動或更改大小後不會丟失影像質量。功能類似於 Flash，兩者沒有好壞之分，但它們在特定情況下更出色（其中一些在前面列出）。可以使用 SVG 建立二維和三維影像。由 W3C 支援。

演示

[edit | edit source]

下表提供了一些 SVG 文件示例，這些文件展示了不同程度的功能和複雜性

表 5：SVG 演示

功能 URL 瀏覽器相容性
基本 http://www.carto.net/papers/svg/samples/canvas.svg 全部
填充 http://www.carto.net/papers/svg/samples/fill.svg 全部
HTML、JS、Java Servlet http://www.adobe.com/svg/viewer/install/main.html – 然後轉到 Inspiration，Fluent Solutions/Adobe Theater 演示 在 Mozilla 中無法提供完整的功能
HTML、JS、DOM http://www.adobe.com/svg/viewer/install/main.html – 然後轉到 Inspiration，Chart and Graph 演示 在 Mozilla 中無法提供完整的功能
PHP、MySQL http://www.carto.net/papers/svg/samples/mysql_svg_php.shtml 全部
HTML5、ANGULARJS、PostGreSQL https://vectoriole.com/ – 然後使用任何一個演示登入 全部

基本 演示展示了縮放、平移和抗鋸齒（高質量）的效果。

填充 演示展示了顏色和透明度的效果。黑色圓圈是可以拖動的。只需單擊並拖動方塊內的圓圈，即可檢視更改。

HTML、JS、Java Servlet 演示描述了一個互動式的、基於資料庫的座點陣圖，其中椅子代表演出可用的座位。如果使用者將滑鼠指標移到座位上，座位會改變顏色，並顯示座位詳細資訊（區域、排、座位號）和價格。在應用程式的客戶端，SVG 渲染座點陣圖並與 JavaScript 協作以提供使用者互動性。SVG 應用程式與伺服器端資料庫整合，該資料庫維護票務和活動可用性資訊，並處理購票。Java Servlet 處理表單提交，並使用座位購買更新資料庫。

HTML、JS、DOM 演示展示了 SVG 如何管理和顯示資料，動態地從資料生成 SVG 程式碼。雖然這種應用程式可以使用多種不同的方式編寫，但 SVG 提供了客戶端處理來維護和顯示資料，從而減少了對伺服器的負載以及整體延遲。使用 DOM，開發人員可以構建文件、瀏覽其結構，以及新增、修改或刪除元素和內容。

PHP、MySQL 演示展示了利用 MySQL 進行資料庫驅動的 SVG 生成的使用。它隨機生成歐洲國家的路線圖。每次重新載入頁面時，您都會看到一個不同的國家。

HTML5、ANGULARJS、PostGreSQL 演示展示瞭如何建立一個 SVG，然後將可變資料整合到 SVG 中，並卷取一個可變資料 PDF。

練習

[edit | edit source]
  1. 下載並安裝 Adobe SVG Viewer。安裝 Adobe SVG Viewer 後，訪問此頁面以測試安裝是否成功：http://www.adobe.com/svg/viewer/install/svgtest.html
  2. 建立您自己的獨立 SVG 檔案，以生成包含圓形和矩形的影像。
  3. 建立您自己的獨立 SVG 檔案。使用 3 個圓圈和 1 個路徑元素建立一個帶有黑色眼睛和黑色嘴巴的黃色笑臉。使用文字元素，以便在笑臉下方顯示訊息“Have a nice day！”。
    • 提示：由於 <path> 元素可能難以編寫，因此您可以使用以下示例路徑
    • <path d="M 100, 120 C 100,120 140, 140 180,120" style="fill:none;stroke:black;stroke-width:1"/>

參考

[編輯 | 編輯原始碼]
  1. ↑ libsrsvg – 免費、開源 SVG 渲染庫
  2. ↑ Barry Kauler 部落格
  3. ↑ 由 Guillaume JACQUENOT ł 建立的具有四個相同圓圈的 2D 阿波羅尼斯墊片
  4. ↑ W3C SVG 1.1 建議：SVG 名稱空間、公用識別符號和系統識別符號，另請參閱 W3C SVG 2 編輯草案：SVG 名稱空間和 DTD（2013 年 2 月 6 日）
  5. ↑ SVG 作者和 Web 伺服器配置指南。Jonathan Watt 不要包含 DOCTYPE 宣告
  6. ↑ Mozilla 關於 SVG：名稱空間速成課程，入門
  7. ↑ validator w3.org
檢索自“https://wikibook.tw/w/index.php?title=XML_-_Managing_Data_Exchange/SVG&oldid=3512934”
華夏公益教科書