HTML5 內(nèi)聯(lián) SVG

HTML5 支持內(nèi)聯(lián) SVG (Scalable Vector Graphics)，看下圖例子，進(jìn)一步了解 SVG ：

SVG

對(duì)不起，您的瀏覽器不支持內(nèi)聯(lián)SVG(Sorry, your browser does not support inline SVG.)。

什么是 SVG？

SVG 意為可縮放矢量圖形(Scalable Vector Graphics)。

SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形

SVG 使用 XML 格式定義圖形

SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失

SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)，用于描述二維矢量圖形的一種圖形格式

SVG 優(yōu)點(diǎn)優(yōu)勢(shì)

與其他圖像格式相比(比如 JPEG 和 GIF)，使用 SVG 的優(yōu)勢(shì)在于：

SVG 可被非常多的工具讀取和修改，圖像可通過文本編輯器來創(chuàng)建和修改

SVG 圖像可被搜索、索引、腳本化或壓縮

SVG 是可伸縮的，可以與 Java 技術(shù)一起運(yùn)行

SVG 圖像可在任何的分辨率下被高質(zhì)量地打印

SVG 可在圖像質(zhì)量不下降的情況下被放大

SVG 文件是純粹的 XML ，是開放的標(biāo)準(zhǔn)

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

把 SVG 直接嵌入 HTML 頁(yè)面

在 HTML5 中，您能夠?qū)?SVG 元素直接嵌入 HTML 頁(yè)面中：

實(shí)例

height="190">

style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;">

嘗試一下 ?

運(yùn)行結(jié)果：

學(xué)習(xí)更多關(guān)于 SVG 教程, 請(qǐng)?jiān)L問 SVG 教程.

SVG 與 Canvas兩者間的區(qū)別

SVG

SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。

SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。

在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

Canvas

Canvas 通過 JavaScript 來繪制 2D 圖形。

Canvas 是逐像素進(jìn)行渲染的。

在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。

Canvas 與 SVG 的比較

下表列出了 canvas 與 SVG 之間的一些不同之處。

Canvas

SVG

依賴分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結(jié)果圖像

最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪不依賴分辨率

支持事件處理器

最適合帶有大型渲染區(qū)域的應(yīng)用程序(如谷歌地圖)

復(fù)雜度高，渲染慢(過多使用 DOM 的應(yīng)用都慢)

不適合用于游戲應(yīng)用

總結(jié)

以上是生活随笔為你收集整理的Html内联定义特点,HTML5的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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