Html5之svg可縮放矢量圖形_動力節點Java學院整理

2024-08-26 00:19:47

字體：大中小

來源：轉載

供稿：網友

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規范中的網絡矢量圖形標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。

什么是SVG？

　　SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
　　SVG 用來定義用于網絡的基于矢量的圖形
　　SVG 使用 XML 格式定義圖形
　　SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
　　SVG 是萬維網聯盟的標準
　　SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

Canvas 和 SVG 的區別：

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

特點：

不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合游戲應用

Canvas

Canvas 通過 JavaScript 來繪制 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

特點：

依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

簡單例子：

<svg width="100%" height="100%"  >        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" /></svg>

Html5,svg

位圖與矢量圖

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

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

　　HTML體系中，最常用的繪制矢量圖的技術是SVG和HTML5新增加的canvas元素。這兩種技術都支持繪制矢量圖和光柵圖。

SVG概述

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

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

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

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

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

SVG與Flash的比較

　　SVG 的主要競爭者是Flash。與Flash相比，SVG 最大的優勢是它與其他標準(比如XSL和DOM)相兼容，操作方便，而Flash則是未開源的私有技術。其它的比如存儲的格式，動態生成圖形等方面，SVG也占有很大的優勢。

SVG的呈現方式

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

　內聯到HTML

SVG是標準的HTML元素，直接寫到HTML中就可以了，看下面的例子：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html><html><head>  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->  <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"            style="stroke: black; fill: red;"/>  </svg></body></html>

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

　獨立SVG文件

　獨立SVG指的是通過使用svg文件擴展名來提供向量圖形文件格式。在瀏覽器中嵌入這個svg文件就可以使用了。

1.獨立的SVG文件/頁面，定義的模板基本就像下面的一樣：

<svg width="100%" height="100%">     <!-- SVG markup here. -->    </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">    <!-- Implement fallback code here, or display a message: -->    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>  </object>  <img src="sun.svg"  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"      stroke="orange" fill="transparent" stroke-width="5"/>  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"      stroke="green" fill="transparent" stroke-width="5"/>  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/></svg>

Html5,svg