如何理解HTML5中SVG的可縮放矢量圖形-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何理解HTML5中SVG的可縮放矢量圖形，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

在尚義等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需定制設(shè)計,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站建設(shè),尚義網(wǎng)站建設(shè)費用合理。

位圖與矢量圖
以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是位圖，這些圖像格式是基于光柵的。在光柵圖像中，圖像文件定義了圖像中每個像素的顏色值。瀏覽器需要讀取這些值并做出相應(yīng)行動。這種圖像的再現(xiàn)能力比較強，但是在某些情形下會顯得不足。例如，當(dāng)瀏覽器以不同大小顯示一副圖像時，通常會產(chǎn)生鋸齒邊緣，這時，瀏覽器不得不為那些在原始圖像中不存在的像素插入或猜測數(shù)值；這樣會導(dǎo)致圖像失真。此外，針對位圖進行動畫，最多也僅限于生成“翻動書本”類型的動畫，即快速連續(xù)地顯示單獨圖像。

矢量圖通過指定為確定每個像素的值所需的指令而不是指定這些值本身，克服了這些困難中的一部分。例如，向量圖形不再為一個直徑一英寸的圓提供像素值，而是告訴瀏覽器創(chuàng)建一個直徑一英寸的圓，然后讓瀏覽器（或插件）做其余事情。這消除了光柵圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫一個圓。如果圖像需要以正常大小的三倍來顯示，那么瀏覽器只要按正確的大小畫圓而不必執(zhí)行光柵圖像通常的插入法。類似地，瀏覽器接收的指令可以更容易地與外部信息源（如應(yīng)用程序和數(shù)據(jù)庫）綁定，要對圖像制作動畫，瀏覽器只要接收有關(guān)如何操縱屬性（如半徑或顏色）的指令即可。
HTML體系中，最常用的繪制矢量圖的技術(shù)是SVG和HTML5新增加的canvas元素。這兩種技術(shù)都支持繪制矢量圖和光柵圖。

SVG概述
可縮放矢量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴(yán)格遵從XML語法)。 SVG允許三種類型的圖形對象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本。可以將圖形對象（包括文本）分組、樣式化、轉(zhuǎn)換和組合到以前呈現(xiàn)的對象中。 SVG 功能集包括嵌套轉(zhuǎn)換、剪切路徑、alpha 蒙板和模板對象。

SVG繪圖是交互式和動態(tài)的。例如，可使用腳本來定義和觸發(fā)動畫。這一點與Flash相比很強大。Flash是二進制文件，動態(tài)創(chuàng)建和修改都比較困難。而SVG是文本文件，動態(tài)操作是相當(dāng)容易的。而且，SVG直接提供了完成動畫的相關(guān)元素，操作起來非常方便。

SVG與其他Web標(biāo)準(zhǔn)兼容，并直接支持文檔對象模型DOM。這一點也是與HTML5中的canvas相比很強大的地方(這里注意，SVG內(nèi)部也是用一個類似的canvas這樣的東西來展示SVG圖形，到后面你會發(fā)現(xiàn)很多特性和HTML5的canvas還有點像；文中如果沒明確說明是SVG的canvas的話，都代指HTML5中的canvas元素)。因而，可以很方便的使用腳本實現(xiàn)SVG的很多高級應(yīng)用。而且SVG的圖形元素基本上都支持DOM中的標(biāo)準(zhǔn)事件?？蓪⒋罅渴录幚沓绦?如“onmouseover”和“onclick”)分配給任何SVG圖形對象。雖然SVG的渲染速度比不上canvas元素，但是勝在DOM操作很靈活，這個優(yōu)勢完全可以彌補速度上的劣勢。

SVG既可以說是一種協(xié)議，也可以說是一門語言；既是HTML的一個標(biāo)準(zhǔn)元素，也是一種圖片格式。
SVG并不是HTML5中的東西，但是也算頁面時興的技術(shù)之一，姑且也放到這個專題下了。

SVG與其它圖片格式的比較
SVG與其它的圖片格式相比，有很多優(yōu)點(很多優(yōu)點來源于矢量圖的優(yōu)點)：
• SVG文件是純粹的XML，可被非常多的工具讀取和修改(比如記事本)。
• SVG 與JPEG 和GIF圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的，可在圖像質(zhì)量不下降的情況下被放大，可在任何的分辨率下被高質(zhì)量地打印。
• SVG 圖像中的文本是可選的，同時也是可搜索的(很適合制作地圖)。
• SVG 可以與 Java 技術(shù)一起運行。
• SVG 是開放的標(biāo)準(zhǔn)。

SVG與Flash的比較
SVG 的主要競爭者是Flash。與Flash相比，SVG 較大的優(yōu)勢是它與其他標(biāo)準(zhǔn)(比如XSL和DOM)相兼容，操作方便，而Flash則是未開源的私有技術(shù)。其它的比如存儲的格式，動態(tài)生成圖形等方面，SVG也占有很大的優(yōu)勢。

SVG的呈現(xiàn)方式
關(guān)于支持HTML5與SVG的瀏覽器不是這里討論的重點，基本上裝上新的Chrome或者FireFox瀏覽器就差不多了(IE用戶請裝IE9就對了，至于IE9之前的版本，需要裝SVG的插件，這里就直接略過了)。對于直接支持SVG的瀏覽器，SVG主要采用兩面兩種呈現(xiàn)的方式。

內(nèi)聯(lián)到HTML
SVG是標(biāo)準(zhǔn)的HTML元素，直接寫到HTML中就可以了，看下面的例子：

代碼如下:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>

<title> My First SVG Page</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200px" height="200px">
<rect x="0" y="0" width="100%" height="100%"
fill="none" stroke="black"/>
<circle cx="100" cy="100" r="50"
/>
</svg>
</body>
</html>

請注意開頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮兼容性的問題；這些部分在HTML5中基本都可以不用寫了(寫不寫還是自己瞧著辦吧)。

獨立SVG文件
獨立SVG指的是通過使用svg文件擴展名來提供向量圖形文件格式。在瀏覽器中嵌入這個svg文件就可以使用了。
1.獨立的SVG文件/頁面，定義的模板基本就像下面的一樣：

代碼如下:

把這樣的文本文件保存成以svg為擴展名的文件，例如sun.svg，這樣的文件可以直接用瀏覽器打開瀏覽，也可以作為引用嵌入到別的頁面中。
2.HTML引用外部的SVG文件。
使用object或者img元素嵌入svg圖形就可以了，例如下面的小例子：

代碼如下:

<!DOCTYPE html>
<html>
<head>
<title> My First SVG Page</title>
</head>
<body>
<object data="sun.svg" type="image/svg+xml"
width="300px" height="300px">

<p>Your browser does not support SVG - please upgrade to a modern browser.</p>
</object>
<img src="sun.svg" alt="svg not supported!" />
</body>
</html>

其實SVG也可以放在其他的XML文檔中，也可以像其他的XML文檔一樣，使用XML相關(guān)的技術(shù)格式化和驗證，這個不是重點，此處略去了。

SVG的渲染順序
SVG是嚴(yán)格按照定義元素的順序來渲染的，這個與HTML靠z-index值來控制分層不一樣。在SVG中，寫在前面的元素先被渲染，寫在后面的元素后被渲染。后渲染的元素會覆蓋前面的元素，雖然有時候受透明度影響，看起來不是被覆蓋的，但是SVG確實是嚴(yán)格按照先后順序來渲染的。
注意：SVG是以XML定義的，所以是大小寫敏感的，這點與HTML不一樣。

上述就是小編為大家分享的如何理解HTML5中SVG的可縮放矢量圖形了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：如何理解HTML5中SVG的可縮放矢量圖形-創(chuàng)新互聯(lián)
文章URL：http://www.muchs.cn/article44/dhcche.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、做網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容