下面的例子是一個簡單的 SVG 文件的例子。 SVG 文件必須使用 .svg 后綴來保存：
然后在瀏覽器中打開
- Opera 、 Google Chrome 和 Safari 支持SVG顯示。
- Microsoft 的 Internet Explorer 8.0 版之前尚未支持SVG，直至由Internet Explorer 9.0 版開始支持SVG。
展示效果如下：
代碼解釋：
第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是否是 “ 獨立的 ” ，或含有對外部文件的引用。
standalone="no" 意味著 SVG 文檔會引用一個外部文件 - 在這里，是 DTD 文件。
第二和第三行引用了這個外部的 SVG DTD 。該 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” 。該 DTD 位于 W3C ，含有所有允許的 SVG 元素。
SVG 代碼以 <svg> 元素開始，包括開啟標簽 <svg> 和關閉標簽 </svg> 。這是根元素。 width 和 height 屬性可設置此 SVG 文檔的寬度和高度。 version 屬性可定義所使用的 SVG 版本， xmlns 屬性可定義 SVG 命名空間。
SVG 的 <circle> 用來創建一個圓。 cx 和 cy 屬性定義圓中心的 x 和 y 坐標。如果忽略這兩個屬性，那么圓點會被設置為 (0, 0) 。 r 屬性定義圓的半徑。
stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設置為 2px 寬，黑邊框。
fill 屬性設置形狀內的顏色。我們把填充顏色設置為紅色。
關閉標簽的作用是關閉 SVG 元素和文檔本身。
注釋： 所有的開啟標簽必須有關閉標簽！
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
