網(wǎng)絡前端高薪的誘惑，學習門檻低，不管是學生黨還是工作者，都渴望憑借自己的能力，空閑的時間，去學前端。也許是一種愛好，也許是一種想從事的工作。但它真的那么簡單嗎？現(xiàn)在，初級前端的工作，已接近飽和，并處于供過于求的狀態(tài)，企業(yè)更需要的是具備扎實的基礎(chǔ)，至少具備后端技能的前端開發(fā)工程師。已不像之前所說的美工，美工了。在許多大企業(yè)中，前端開發(fā)崗位是獨立的，需要專業(yè)技能。
HTML5內(nèi)聯(lián)SVG
HTML5支持內(nèi)聯(lián)SVG。
什么是SVG？
SVG指可伸縮矢量圖形(ScalableVectorGraphics)
SVG用于定義用于網(wǎng)絡的基于矢量的圖形
SVG使用XML格式定義圖形
SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失
SVG是萬維網(wǎng)聯(lián)盟的標準
SVG優(yōu)勢
與其他圖像格式相比（比如JPEG和GIF），使用SVG的優(yōu)勢在于：
SVG圖像可通過文本編輯器來創(chuàng)建和修改
SVG圖像可被搜索、索引、腳本化或壓縮
SVG是可伸縮的
SVG圖像可在任何的分辨率下被高質(zhì)量地打印
SVG可在圖像質(zhì)量不下降的情況下被放大
瀏覽器支持
InternetExplorer9+,Firefox,Opera,Chrome,和Safari支持內(nèi)聯(lián)SVG。
把SVG直接嵌入HTML頁面
在HTML5中，您能夠?qū)VG元素直接嵌入HTML頁面中：
<!DOCTYPE html><html><body> <svg xmlns="http://www.w3.org/2000/svg" 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> 結(jié)果：
抱歉,你的瀏覽器不支持內(nèi)聯(lián)SVG.
SVG與Canvas兩者間的區(qū)別
SVG是一種使用XML描述2D圖形的語言。
Canvas通過JavaScript來繪制2D圖形。
SVG基于XML，這意味著SVGDOM中的每個元素都是可用的。您可以為某個元素附加JavaScript事件處理器。
在SVG中，每個被繪制的圖形均被視為對象。如果SVG對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。
Canvas是逐像素進行渲染的。在canvas中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
Canvas與SVG的比較
下表列出了canvas與SVG之間的一些不同之處。
CanvasSVG
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合游戲應用
以上就是進階Web教程：HTML5內(nèi)聯(lián)SVG的全部內(nèi)容，
