**自：
1、背景
svg是scalable vector graphics的縮寫，意為可縮放向量圖形。2023年，全球資訊網聯盟成立了乙個工作組，研發一種通過xml來表現向量圖形的技術——svg！由於svg也是一種xml檔案，所以svg也繼承了xml的開放性、可移植性和互動性的優點。如今幾乎所有主流的瀏覽器都支援svg，大家可以從這裡得到更多的相容資訊，其中包括：
2、圖形系統
目前在計算機上主要有兩種形式來表現圖形，一種是柵格圖形，另一種是向量圖形。
2.1 柵格圖形
在柵格圖形中，影象用像元或者畫素的矩形陣列來表示，每個畫素代表乙個rgb顏色值或者是乙個指向顏色列表的索引。通常以一種壓縮格式來儲存（如jpeg, gif, png等），由於現在大部分的顯示裝置都是柵格裝置，所以顯示這些圖形只需要做解壓處理就可以了。
2.2 向量圖形
在向量圖形系統中，圖形被描述為一些列的形狀，它是特定座標的集合。顯示向量圖形需要按照特定的命令來繪製這些座標，然後顯示在螢幕上。向量圖形是物件，而不是一系列的畫素。它們可以改變顏色、形狀還有大小，圖形中的文字都是可以被檢索的，這些與柵格圖形都有很大的不同。
2.3 為什麼要使用向量圖形
絕大部分情況下，我們都在使用柵格圖形，而且建立柵格圖形的工具更容易獲得和使用。但是向量圖形有乙個柵格圖形無法替代的優勢：無論如何的縮放，向量圖形都不會失真。這使得當我們需要具有精確測量以及看清圖形細節的放大能力時，向量圖形顯得尤其重要。
3、建立乙個svg圖形
下面首先建立乙個svg圖形，這裡我並不會詳細的講解各個標籤，只是先給乙個感性的認識，隨後的章節會對svg的語法做詳細的介紹。看**：
1 <?xml version="1.0"?>可能大家已經看出來了，這實際上是乙個標準的xml檔案，在瀏覽器中瀏覽，會看到乙隻貓的圖案，如下圖：2 3
另外，由於很多人習慣了html5式的文件模式，即
1將命令空間省略，這裡強烈的建議寫svg的時候保留命名空間，即2 37 8
9 10
xmlns:xlink="" xmlns=""後面你會看到因為忽略命令空間而引發的異常。
4、應用svg圖形
如何才能夠在html文件中引入svg呢？一般有一下幾種方法
這是一種最直接的方法，但是需要瀏覽器支援html5中的27
28 其中demo1.svg是先前建立的svg檔案。
12 37 8 9
10 11
12 37 8
9 10
1所有的方法都產生同樣的結果，如上圖所示。2 314 15
16 17
重要宣告：本文所用的以及示例來自於
HTML5如何使用SVG
幾個svg小例子 我們來看一下第三個分享圖示的 不了解svg的同學現在一定一臉問號，就跟我第一次見他們一樣，別著急，我們從基礎看起。svg 是一種基於 xml 語法的影象格式，全稱是可縮放向量圖 scalable vector graphics 其他影象格式都是基於畫素處理的，svg 則是屬於對影象...
HTML5 基礎 SVG實踐
data 和 type 至少指定一項 在react專案中使用svg,建議使用react svg.react svg即乙個封裝後的react元件。它的目的在於利用svginjector把svg新增到dom中。import react from react import reactdom from re...
html5 基本語法詳解
html頭部標記標記 描述html5標準 定義頁面中所有鏈結的基準url 設定顯示在瀏覽器左上方的標題內容 表明該文件是乙個可用於檢索的閘道器指令碼 不支援設定css層疊樣式表內容 設定外部資源的鏈結 頁面指令碼內容 元資訊標記屬性標記 描述值html5標準 生成乙個http標準域,把content...