當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

1.SVG简介

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

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

1.Getting Started

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

網(wǎng)格圖像 Raster Graphics

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

矢量圖像 Vector Graphics

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

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

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

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

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

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

使用矢量圖像 Uses of Vector Graphics

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

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

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

縮放能力 Scalability

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

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

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

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

SVG的角色 SVG’s Role

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

CAD 和圖形設(shè)計(jì)程序通常以專有的二進(jìn)制格式存儲(chǔ)繪圖。通過添加繪圖的SVG格式的導(dǎo)入和到處能力，應(yīng)用程序獲得了交換信息的公共標(biāo)準(zhǔn)格式。

因?yàn)樗?XML 的應(yīng)用， SVG 可以和其他 XML 引用合作。比如，一本數(shù)學(xué)文本樹，可以使用 XSL 格式對(duì)象來說明文本， MathML 來描述方程， SVG 來生成這個(gè)方程的圖像。

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

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

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

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

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

Example 1-1. Basic structure of an SVG document

Basic Shapes

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

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

Example 1-2. Basic shapes — circle

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

如圖1-3所示，現(xiàn)在添加兩個(gè)圓作為眼睛。盡管它們的填充和描邊顏色是外觀的一部分， SVG 確實(shí)允許將它們指定為單獨(dú)的屬性。在這個(gè)例子當(dāng)中，fill 和 stroke 顏色作為兩個(gè)分來的屬性，而不是聯(lián)在一起作為 style 屬性的值。你可能不會(huì)經(jīng)常使用這個(gè)方法；它將在第 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>

分組圖形對(duì)象 Grouping Graphic Objects

圖1-4通過兩個(gè) 元素給貓臉的右邊添加了胡須。你像將這些胡須作為一個(gè)單元看待，然后以元素包括它們，并給它一個(gè) id。你通過 x 坐標(biāo)和 y 坐標(biāo)執(zhí)行線的開始點(diǎn)(x1 and y1) 和結(jié)束點(diǎn)(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>

變換坐標(biāo)系 Transforming the Coordinate System

現(xiàn)在你將通過元素使用 whiskers 組，并將它變換為左邊的胡須。樣例1-5 首先通過在 scale 變換中給 x 坐標(biāo)乘以一個(gè)負(fù)1。這意味著這個(gè)點(diǎn) (75, 95) 現(xiàn)在所在的位置將會(huì)是最初坐標(biāo)系統(tǒng)中的 (-75, 95)。在新的縮放系統(tǒng)中，由于你往左移動(dòng)了，所以需要增加坐標(biāo)值。著意味著你需要將坐標(biāo)系統(tǒng)向右移動(dòng) 140 像素。負(fù)方向，把它們帶到你想要的地方，如圖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 屬性使用了一個(gè)不同的命名空間(namespace)(參閱Appendix A 了解更多)。為了確保你的 SVG 文檔在所有的 SVG 查看程序中正常工作，你必須在開發(fā)的標(biāo)記中添加 xmlns:xlink 屬性。

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

其他基本圖形 Other Basic Shapes

樣例1-6通過元素構(gòu)造了耳朵和嘴吧，使用了成對(duì)的 x 坐標(biāo)和 y 坐標(biāo)作為points的屬性。你可以根據(jù)你的喜好通過空格或者逗號(hào)分隔數(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

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

Example 1-7. Using the element

Text

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

Example 1-8. Adding a label

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

總結(jié)

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

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

简介
svg

上一篇：引流的最快方法是什么？我是如何实现长期被
下一篇：关于H5中的Canvas API的探索