當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

1.SVG简介

發(fā)布時間：2024/3/13 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 1.SVG简介小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.Getting Started

計算機中有兩種系統(tǒng)代表圖像信息，分別是網(wǎng)格圖像(raster)和矢量(vector)圖像。

網(wǎng)格圖像 Raster Graphics

在網(wǎng)格圖像中，一個圖片用一個矩形數(shù)組的圖片元素或者像素表示。每個像素的通過它本身的RGB顏色值表示，或者是指向一系列顏色值的索引(index)表示。者一系列的像素, 也稱之為位圖(bitmap), 通常以壓縮格式存儲。由于絕大多數(shù)現(xiàn)代顯示設備都是網(wǎng)格設備，顯示一張圖像要求一個查看程序，除了解壓這個位圖之外，還需要做一些額外的工作，以將圖像傳輸?shù)狡聊簧稀?/p>

矢量圖像 Vector Graphics

在矢量圖像系統(tǒng)中，一個圖像被描述為一系列的集合圖形(geometric shapes)(如圖1-2)。而不是接收一系列已經(jīng)完成了的一組像素集，一個矢量圖查看程序接收命令，在特定的一組坐標系上繪制圖形(shapes)。

你想象一下在一張圖形紙上生成一個圖像，網(wǎng)格圖像的工作方式是：通過描述哪些格子需要填充，需要以什么顏色填充來繪制圖像。矢量圖像的工作方式是：描述一組點位，這些點位用于指導直線或者曲線的繪制位置。一些人描述矢量圖象是一組繪制的指令(instructions), 而位圖(bitmap graphics),也就是網(wǎng)格點(rasters),是特定地方的一組顏色。矢量圖明白它們是什么——一個矩形知道它是一個矩形，一個文本知道它是文本。因為它們是對象，而不是一系列的像素(pixels), 矢量對象(vector objects) 能夠改變它們的形狀(shape)和顏色(color), 而位圖(bitmap graphics)不能。并且，所有的文本都是可以搜尋的，因為它們真的是文本，無論它們看上去像什么樣式，或者它們經(jīng)歷了怎樣的旋轉(zhuǎn)或變換。

另外一種想法認為網(wǎng)格圖像(raster graphics) 就像在畫布打印，而矢量圖是線條和圖形組成的可拉伸的材料，它們可以在背景上任意移動。

使用網(wǎng)格圖像 Use of Raster Graphics

網(wǎng)格圖像最適用于照片，幾乎不是用線條和曲線組成。掃描圖像(Scanned images)通常存儲為位圖(bitmaps);即使原始圖像可能是一幅線條藝術(shù)畫，你想存儲整幅圖像而不關(guān)心它們的獨立成分。例如，一臺傳真機(fax machine),并不關(guān)心你繪制的是什么；它只是簡單的以網(wǎng)格的形式將像素從一個地方傳遞到另一個地方。

以網(wǎng)格格式(raster format)創(chuàng)建圖像的工具得到了廣泛的使用，通常以矢量格式創(chuàng)建圖像的工具更容易使用。有許多不同的方法來壓縮和存儲一張網(wǎng)格圖像，這些格式的內(nèi)部表示是公開的。有大量用于讀取和輸出諸如 JPEG, GIF，和PNG等壓縮格式的程序庫。這些是網(wǎng)絡瀏覽器在 SVG 到來之前一直只支持網(wǎng)格圖像的原因。

使用矢量圖像 Uses of Vector Graphics

矢量圖像在下面的一些領(lǐng)域得到運用：

計算機輔助繪圖(CAD: Computer Assisted Drafting), 其中精確的測量和放大圖像以查看詳細信息的能力至關(guān)重要。
設計圖像的程序，設計出來的圖像將要在高分辨率的打印機上打印(例如：Adobe Illustrator)。
Adobe PostScript 打印和圖像語言；你所打印的每一個字符都是通過一組線條和曲線描述的。
基于矢量的 Macromedia Flash system。用于設計動畫(animations),演示稿(presentations),和網(wǎng)站(websites)。

因為所有的這些文件都是以二進制格式(binary format)編碼的，或作為緊密包裝的位流(bitstreams), 瀏覽器或者其他用戶代理程序很難解析出嵌入的文本，服務器也很難基于外部的數(shù)據(jù)動態(tài)創(chuàng)建矢量圖。因為矢量圖的大部分內(nèi)部表示是專有的，通常無法編碼實現(xiàn)查看或創(chuàng)建它們。

縮放能力 Scalability

雖然沒有像網(wǎng)格圖像那么流行，矢量圖的一個特性使得它們在許多程序中無可替代——它們能夠在不損失圖像質(zhì)量的情況下進行縮放。舉個例子，這里有一只貓的兩種繪制版本。圖1-3使用網(wǎng)格圖像繪制，圖1-4使用矢量圖像繪制。它們都顯示在每英寸 72 像素的屏幕上。

當一個顯示程序放大網(wǎng)格圖像時，它必須尋找一些方法去擴展每個像素。最簡單的方法是放大倍數(shù)是因數(shù)4的倍數(shù)，以使得每個像素擴大四倍。而結(jié)果，如圖1-5所示，不是特別的令人滿意。

即使有可能使用諸如邊緣檢測(edge detection) 和反走樣(anti-aliasing) 的技術(shù)讓放大的圖片變得讓人滿意，這些技術(shù)有時間開銷(time-consuming)。此外，由于網(wǎng)格圖像中的所有像素都是相同的結(jié)構(gòu)，無法保證一個算法能正確無誤第檢測出所有圖形的邊緣。反走樣處理后的結(jié)果有時候像圖1-6：

另一方面，將一個矢量圖像(Vector image)放大四倍，只需要顯示程序?qū)⑺袌D形(shapes)的坐標系乘以4，以顯示設備的全分辨率重新繪制它們。因此，圖1-7，也是從72點/英寸(DPI)屏幕的截圖。顯示清晰，清晰的線條邊緣，顯著地減少了擴展網(wǎng)格圖像的鋸齒效果。

SVG的角色 SVG’s Role

在 1998 年，萬維網(wǎng)聯(lián)盟成立了一個工作組，以開發(fā)矢量圖形的 XML 應用表示。因為 SVG 使一個 XML 應用，圖像的信息得用普通文本(plain text)存儲，它帶來了 XML 開放性，可移植性，互通性的優(yōu)點。

CAD 和圖形設計程序通常以專有的二進制格式存儲繪圖。通過添加繪圖的SVG格式的導入和到處能力，應用程序獲得了交換信息的公共標準格式。

因為它是 XML 的應用， SVG 可以和其他 XML 引用合作。比如，一本數(shù)學文本樹，可以使用 XSL 格式對象來說明文本， MathML 來描述方程， SVG 來生成這個方程的圖像。

SVG 工作組的規(guī)范使一個官方的萬維網(wǎng)協(xié)會推薦。諸如 Adobe Illustrator 和 Inkscape 能夠?qū)牒蛯С?SVG 格式的繪圖。在 Web 中， SVG 得到了許多瀏覽器的原生支持，并且具有許多與 CSS 樣式的 HTML 相同的變換和動畫功能。因為 SVG 文件是 XML, SVG 中顯示的文本對于任何能夠解析 XML 的用戶代理程序是可用的。

創(chuàng)建一個 SVG 圖像 Creating an SVG Graphic

在這節(jié)中，你將看到一個 SVG 文件生成一幅貓的圖像，而這個貓就是你在本章前面看到的那只。這個例子介紹了許多概念，而這些概念你想在剩下的章節(jié)中有更深入的了解。這個文件是一個如何編寫一個樣例文件的好的例子，這并不一定是您編寫將成為完成項目一部分的 SVG 文件的方式。

文檔結(jié)構(gòu) Document Structure

樣例1-1 以標準的 XML 處理指令和 DOCTYPE 聲明開始。根原始定義了最終圖像的以像素位單位的寬度(width)和高度(height)。它也通過 xmlns 屬性定義了 SVG namespace。元素的內(nèi)容對查看程序來說是可用的，可用于標題欄或作為冒泡提示消息， <desc> 元素允許你給出關(guān)于這張圖像的完整描述信息。</desc>

Example 1-1. Basic structure of an SVG document

Basic Shapes

通過添加元素來繪制貓的臉。這個元素的屬性指定了中心點的 x 坐標， y 坐標，和半徑。點(0,0) 是圖像的左上角。x 坐標隨著你往右移動而增長， y 坐標隨著你往下移動而增長。

圓的位置和大小是繪制結(jié)構(gòu)的一部分。它被繪制的顏色是其呈現(xiàn)的一部分。作為 XML 應用程序的一個習慣，你應當將結(jié)構(gòu)(structure)和外觀(presentation)分開，以得到最大的靈活性。外觀信息包含在 style 屬性中。他的只將是一系列外觀屬性和值，就像 Appendix B 中描述的那樣，分析樣式的風格。使用了黑色作為輪廓的顏色，填充色設置為 none,使得貓的臉是透明的。 SVG 的內(nèi)容如圖1-2，它的結(jié)果如圖1-8。

Example 1-2. Basic shapes — circle

將樣式指定為屬性 Specifying Styles as Attributes

如圖1-3所示，現(xiàn)在添加兩個圓作為眼睛。盡管它們的填充和描邊顏色是外觀的一部分， SVG 確實允許將它們指定為單獨的屬性。在這個例子當中，fill 和 stroke 顏色作為兩個分來的屬性，而不是聯(lián)在一起作為 style 屬性的值。你可能不會經(jīng)常使用這個方法；它將在第 5 章中闡述，在外觀屬性(Presentation Attributes)中。我們把他放到這里只是為了證明這樣也可以起作用。結(jié)果如圖 1-9 所示。

Example 1-3. Basic shapes — filled circles

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg"> <title>Cat</title> <desc>Stick Figure of a Cat</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/> <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/ </svg>

分組圖形對象 Grouping Graphic Objects

圖1-4通過兩個元素給貓臉的右邊添加了胡須。你像將這些胡須作為一個單元看待，然后以元素包括它們，并給它一個 id。你通過 x 坐標和 y 坐標執(zhí)行線的開始點(x1 and y1) 和結(jié)束點(x2 and y2)。

Example 1-4. Basic shapes — lines

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg"> <title>Cat</title> <desc>Stick Figure of a Cat</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> <g id="whiskers"> <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> </g> </svg>

變換坐標系 Transforming the Coordinate System

現(xiàn)在你將通過元素使用 whiskers 組，并將它變換為左邊的胡須。樣例1-5 首先通過在 scale 變換中給 x 坐標乘以一個負1。這意味著這個點 (75, 95) 現(xiàn)在所在的位置將會是最初坐標系統(tǒng)中的 (-75, 95)。在新的縮放系統(tǒng)中，由于你往左移動了，所以需要增加坐標值。著意味著你需要將坐標系統(tǒng)向右移動 140 像素。負方向，把它們帶到你想要的地方，如圖1-11所示。

Example 1-5. Transforming the coordinate system

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Cat</title> <desc>Stick Figure of a Cat</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> <g id="whiskers"> <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> </g> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/> </svg>

元素中的 xlink:href 屬性使用了一個不同的命名空間(namespace)(參閱Appendix A 了解更多)。為了確保你的 SVG 文檔在所有的 SVG 查看程序中正常工作，你必須在開發(fā)的標記中添加 xmlns:xlink 屬性。

transform 屬性的值羅列了所有的變換，一個接著另一個，以空白字符分隔。

其他基本圖形 Other Basic Shapes

樣例1-6通過元素構(gòu)造了耳朵和嘴吧，使用了成對的 x 坐標和 y 坐標作為points的屬性。你可以根據(jù)你的喜好通過空格或者逗號分隔數(shù)字，結(jié)果如圖1-12所示。

Example 1-6. Basic shapes — polylines

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Cat</title> <desc>Stick Figure of a Cat</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> <g id="whiskers"> <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> </g> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>  <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" />  <polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" /> </svg>

Paths

所有的基本圖形實際上都是通用的元素的快捷方式，樣例1-7 用于添加貓的鼻子。結(jié)果如圖1-13所示。這個元素的設計是為了使指定的路徑或直線和曲線的序列盡可能緊湊。樣例1-7 中的 path 轉(zhuǎn)化，換句話說， “移動到坐標點(75,90)，繪制一條線到坐標點(65,90)。繪制一個x軸半徑為5， y軸半徑為10的橢圓弧，返回坐標(75,90)。

Example 1-7. Using the element

Text

最后，由于這幅圖畫得太粗糙了，有很大的可能人們不知道它是一只貓。因此，樣例1-8在圖片中添加了一個文本標簽。在元素元素中， x 和 y 屬性指定了文本的位置，作為整體結(jié)構(gòu)的一部分。字體類型和字體大小是外觀的一部分，因此是 style 屬性的一部分。并不像其他你所看到的屬性，是一個容器元素，它的內(nèi)容就是你想顯示的文本。圖1-14 顯示了最終的結(jié)果。

Example 1-8. Adding a label

上面的內(nèi)容總結(jié)了我們對 SVG 的簡要概述；在下面的章節(jié)中。您將深入研究這些概念。

總結(jié)

以上是生活随笔為你收集整理的1.SVG简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

简介
svg

上一篇：引流的最快方法是什么？我是如何实现长期被
下一篇：浏览器越域访问