跳轉到內容

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

[編輯 | 編輯原始碼]

在過去的 10 年裡，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？

[編輯 | 編輯原始碼]

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

SVG 檢視器

[編輯 | 編輯原始碼]

Adobe SVG 檢視器

[編輯 | 編輯原始碼]

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

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 中，在“儲存為”對話方塊中添加了將 SVG 儲存為 GZip 壓縮的 SVG（.svgz）選項。

SMIL

[編輯 | 編輯原始碼]

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

注意 Microsoft Windows Mozilla 使用者！

[編輯 | 編輯原始碼]

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

原生 SVG (Firefox)

[編輯 | 編輯原始碼]

Mozilla SVG 實現是原生 SVG 實現。這與 Adobe 檢視器之類的外掛 SVG 檢視器相反（目前是使用最廣泛的 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

[編輯 | 編輯原始碼]

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

示例：rsvg-view-3 name.svg

建立 SVG 檔案

[編輯 | 編輯原始碼]

如何操作

[編輯 | 編輯原始碼]

可以使用 4 組程式

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

SVG 編輯器

[edit | edit source]

正如您在前面的路徑定義示例中看到的，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 開源（免費，含原始碼）

快速向量圖形 WYSIWYG 編輯器。

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

引擎

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

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

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

自己的程式

[edit | edit source]
C
[edit | edit source]

以下是 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
[edit | edit source]

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

JavaScript
[edit | edit source]
帶有 JavaScript 程式碼的 SVG 影像
Matlab
[edit | edit source]

基於 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
[edit | edit source]

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

Maxima
[edit | edit source]
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
[edit | edit source]

可以使用準備好的庫，或將 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 程式碼的影像

入門

[edit | edit source]

由於基於 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> 元素中，可以有三種類型的繪圖元素：文字、形狀和路徑。

文字

[edit | edit source]

以下是一個文字元素的示例：示例 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" 等效地設定為紅色。

形狀

[edit | edit source]

SVG 包含以下基本形狀元素

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

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

矩形

[edit | edit source]

<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

圓形

[edit | edit source]

圓形元素需要三個屬性：cx、cy 和 r。'cx' 和 'cy' 值指定圓心的位置，而 'r' 值指定半徑。如果未指定 'cx' 和 'cy' 屬性，則圓心的預設位置為 (0, 0)。如果 'r' 屬性設定為 0，則圓形將不會出現。與 '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 使用三次貝塞爾曲線繪製曲線

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

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

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

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

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

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

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

橢圓弧 A rx ry x-軸旋轉 大弧標誌 掃描標誌 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：使用關鍵字嵌入將 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 的瀏覽器的資訊

<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 的瀏覽器的資訊

<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)，並在樣式表中指定如下

Exhibit 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 建立 2D 和 3D 影像。受 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，圖表和圖形演示 在 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 演示展示了使用資料庫驅動的 SVG 生成，該生成利用了 MySQL。它隨機生成歐洲國家的地圖。每次重新載入頁面時，您都會看到一個不同的國家。

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"/>

參考文獻

[edit | edit source]
  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"
華夏公益教科書