當前位置 : IT培訓網 > Web前端 > Web教程 > HTML5如何內聯SVG

HTML5如何內聯SVG

時間:2016-12-06 16:21:05??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
標簽(Tag):?? html5(196)SVG(4)
雖然Canvas 與 SVG都是html5中處理圖片的,但各自也有區別,所以我們要正確使用這些元素,以便做出更好看的網頁效果圖出來,好了,如果你還沒有學習html5,那就趕緊報名吧,學HTML5將網頁運轉起來。

隨著互聯網的發展,HTML5的功能也是非常強大的,不僅可以內置圖片,還支持內聯SVG,那么什么是SVG呢,今天IT培訓網小編就來給大家詳細介紹一下吧!

HTML5 內聯 SVG

HTML5 支持內聯 SVG。

HTML5如何內聯SVG_www.oalvodamoda.com

什么是SVG

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

SVG 用于定義用于網絡的基于矢量的圖形

SVG 使用 XML 格式定義圖形

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

SVG 是萬維網聯盟的標準

SVG優勢

與其他圖像格式相比(比如 JPEG 和 GIF),使用 SVG 的優勢在于:

SVG 圖像可通過文本編輯器來創建和修改

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

SVG 是可伸縮的

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

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

瀏覽器支持

HTML5如何內聯SVG_www.oalvodamoda.com

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持內聯SVG。

把 SVG 直接嵌入 HTML 頁面

在 HTML5 中,您能夠將 SVG 元素直接嵌入 HTML 頁面中:

實例

<!DOCTYPE html>

<html>

<body>

 <svg xmlns="http://www.oalvodamoda.com/img/1.jpg" version="1.1" height="190">

  <polygon points="100,10 40,180 190,60 10,60 160,180"

  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

</svg>

</body>

</html>

運行結果:

HTML5如何內聯SVG_www.oalvodamoda.com

結果:

抱歉, 你的瀏覽器不支持內聯SVG.

SVG 與 Canvas兩者間的區別

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

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

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

在 SVG 中,每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化,那么瀏覽器能夠自動重現圖形。

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

Canvas 與 SVG 的比較

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

Canvas

SVG

· 依賴分辨率

· 不支持事件處理器

· 弱的文本渲染能力

· 能夠以 .png 或 .jpg 格式保存結果圖像

· 最適合圖像密集型的游戲,其中的許多對象會被頻繁重繪

· 不依賴分辨率

· 支持事件處理器

· 最適合帶有大型渲染區域的應用程序(比如谷歌地圖)

· 復雜度高會減慢渲染速度(任何過度使用 DOM 的應用都不快)

· 不適合游戲應用

 

雖然Canvas 與 SVG都是html5中處理圖片的,但各自也有區別,所以我們要正確使用這些元素,以便做出更好看的網頁效果圖出來,好了,如果你還沒有學習html5,那就趕緊報名吧,學HTML5將網頁運轉起來。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天