繪制奧運五環(huán) 提供示例展示了path標簽的強大能力，通過d屬性組合指令創(chuàng)建復(fù)雜圖形在使用SVG時，有兩種方式作為圖像或作為應(yīng)用程序嵌入作為圖像，SVG有局限性，如渲染獨立樣式無效等而作為應(yīng)用程序嵌入，如通過object元素，可提供更好的跨瀏覽器支持和與主頁面的交互性混合SVG與HTML或XML標記，如。

可以用sublime_text打開svg圖，從瀏覽器查看dom元素位置找到你想添加ID的代碼，然后從svg圖中找到該行代碼，手動添加ID 獲取時用var aaa= svgDocumentgetElementByIdquotaaaquot 獲取就可以了。

探索canvas與svg的異同 canvas與svg的起源不同canvas是html5新添的元素，而svg的歷史更為悠久，已有十幾年svg以xml技術(shù)為基礎(chǔ)，描述二維圖形，與html5無專屬性canvas則像一個畫布，其繪圖標量，支持導(dǎo)入jpgpng等格式圖片在大型網(wǎng)絡(luò)游戲和統(tǒng)計圖表如柱狀圖曲線圖餅狀圖等場景中，canvas技術(shù)。

SVG 是一種基于 XML 語法的圖像格式與 HTMLCSS 類似，XML 是一種網(wǎng)絡(luò)標準規(guī)范它是矢量圖像文件，與 PNG，JPG 等像素文件不同為什么用 SVG在 Web 開發(fā)中，通常使用 HTML+CSS 來展示頁面內(nèi)容，但 HTML 是為盒模型設(shè)計，當需要渲染特殊形狀時，就不太方便了SVG 可以看作是 HTML 在瀏覽。

html 直接使用svg圖片不能顯示是設(shè)置錯誤造成的，解決方法為1點擊電腦開始菜單，找到Inscape工具并點擊打開2在Inscape工具編輯界面，繪制兩個圓形，設(shè)置不同半徑和不同顏色填充3設(shè)置完畢后，將其導(dǎo)出成SVG格式，存儲到桌面上4通過快捷方式打開HBuilderX工具，并新建Web項目，將svg圖片復(fù)制到。

SVG 即 Scalable Vector Graphics，是一種用來繪制矢量圖的 HTML5 標簽?zāi)阒恍瓒x好XML屬性，就能獲得一致的圖像元素使用SVG之前先將標簽加入到HTML body中就像其他的HTML標簽一樣，你可以為SVG標簽為之添加ID屬性也可以為之添加css樣式，例如“borderstylesolidborderwidth2px”SVG標簽。

使用ltembed或者ltobject元素來顯示基本的SVG圖形使用ltimg來顯示SVG圖形將SVG圖形應(yīng)用為CSS背景圖直接在HTML文檔中使用ltsvg標簽需要HTML5支持對使用CSS或者外部對象元素的HTML元素使用SVG變換濾鏡等特效對SVG對象使用類似photoshop的效果，包括模糊和色彩處理對SVG圖像使用動畫使用SVG。