跳轉到內容

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 複製相同的效果很困難。
  • 如果您想要複雜的動畫或複雜的遊戲（SVG 內建的 SMIL 動畫引擎非常佔用處理器資源），請使用 Flash。
  • 如果您的使用者不是那麼精通電腦，例如兒童網站或面向廣泛受眾的網站，請使用 Flash。
  • 如果聲音很重要，請使用 Flash - SVG/SMIL 支援聲音，但它非常基礎。
  • 如果您喜歡 WYSIWYG 到指令碼，請使用 Flash。

SVG 優勢

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

為什麼要使用 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 Viewer

[edit | edit source]

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

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

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

表 1：Adobe SVG Viewer 的功能

功能 描述
放大

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

縮小

這與“放大”的工作方式相同，只是您同時按下 CTRL-Key 和 SHIFT-Key。

平移

按下 ALT-Key 並移動滑鼠游標，同時顯示一個手形圖示。

複製 SVG

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

檢視原始碼

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

將 SVG 儲存為…

此選項允許透過彈出“將 SVG 儲存為”表單快速將 SVG 內容儲存到您的本地計算機，該表單讓您選擇輸入檔案的名稱和位置。在 Adobe SVG Viewer 版本 3 中，將“儲存為 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 Viewer 外掛可以與 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 編輯器

[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 開源（免費，附帶原始碼）

快速向量圖形所見即所得編輯器。

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

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

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

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

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

（Gnome 插圖應用程式）

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

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

IMS Web

矮人

 Win95/98/ME，WinNT/2000/XP 免費下載 所見即所得編輯器，匯出為 HTML 或 SVG
IMS Web

引擎

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

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

Inkscape Linux、Windows、Mac 免費，附帶原始碼 所見即所得編輯器，但允許直接編輯 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]

Haskel 程式碼：Claude Heiland-Allen 使用 Haskell 和 SVG 輸出的 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。注意“獨立”屬性。這表示此特定檔案不包含足夠的處理指令來單獨執行。為了獲得顯示特定影像所需的必要功能，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

圓形

[編輯 | 編輯原始碼]

圓形元素需要三個屬性：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 嚴格規範：圖 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 之外的其他值，則不會顯示此備用內容。

Iframe

[編輯 | 編輯原始碼]

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

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

在開始和結束 <iframe> 標記之間，可以新增針對不支援 iframes 的瀏覽器的資訊

<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-prime、y-prime 和 z-prime），而不是使用 x、y 和 z 值。公式將如下所示。

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 建立 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 – 然後轉到靈感，流暢解決方案/Adobe 劇院演示 在 Mozilla 中不能提供完整的功能
HTML、JS、DOM http://www.adobe.com/svg/viewer/install/main.html – 然後轉到靈感，圖表和圖形演示 在 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 個路徑元素建立一個黃色的笑臉，帶有黑色的眼睛和黑色的嘴巴。使用文字元素，使訊息“祝您一天愉快！”出現在笑臉下方。
    • 提示：由於 <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. ↑ 驗證器 w3.org
檢索自 "https://wikibook.tw/w/index.php?title=XML_-_Managing_Data_Exchange/SVG&oldid=3512934"
華夏公益教科書