【SVG】為了前端頁面的美麗，我選擇學習SVG
部落格說明
文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！
說明
SVG在之前自學的過程中，其實一直都是很高深的樣子不敢觸碰，但是想要理解終究都會走到這一步的。?再怎麼看起來難的技術都是由簡單的知識點累計起來的。
什麼是SVG？
-
SVG 意為可縮放向量圖形（Scalable Vector Graphics）。
-
它使用 XML 格式定義影像。
-
SVG 影像在放大或改變尺寸的情況下其圖形質量不會有所損失。
-
SVG 是全球資訊網聯盟的標準。
-
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體。
總的來說，SVG就是一個由XML定義的一個檔案，由於是向量圖形，所以它的圖形質量非常高。
由於SVG是XML檔案，SVG影像可以用任何文字編輯器建立，但是複雜的圖形還是得藉助圖形編輯工具喲
SVG的優勢
- SVG 可被非常多的工具讀取和修改（比如記事本）。
- SVG 與 JPEG 和 GIF 影像比起來，尺寸更小，且可壓縮性更強。
- SVG 是可伸縮的。
- SVG 影像可在任何的解析度下被高質量地列印。
- SVG 可在影像質量不下降的情況下被放大。
- SVG 影像中的文字是可選的，同時也是可搜尋的（很適合製作地圖）。
- SVG 是開放的標準。
- SVG 檔案是純粹的 XML。
SVG 的主要競爭者是 Flash。與 Flash 相比，SVG 最大的優勢是與其他標準（比如 XSL 和 DOM）相相容。而 Flash 則是未開源的私有技術。
一個小小的示例
示例程式碼
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
效果
程式碼解析
<xml>第一行包含了 XML 宣告。- standalone 屬性規定此 SVG 檔案是否是"獨立的"，或含有對外部檔案的引用，standalone="no" 意味著 SVG 文件會引用一個外部檔案 - 在這裡，是 DTD 檔案。
<svg>和</svg>是表示SVG程式碼，相當於開始標籤和結束標籤，這是根元素。- width 和 height 屬性可設定此 SVG 文件的寬度和高度。
- version 屬性可定義所使用的 SVG 版本。
- xmlns 屬性可定義 SVG 名稱空間。
<circle>用來建立一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 座標。如果忽略這兩個屬性，那麼圓點會被設定為 (0, 0)。r 屬性定義圓的半徑。- stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設定為 2px 寬，黑邊框。
- fill 屬性設定形狀內的顏色。我們把填充顏色設定為紅色。
- 關閉標籤的作用是關閉 SVG 元素和文件本身。
注意：所有的開啟標籤必須有關閉標籤！
如何在HTML中使用SVG？
SVG 檔案有5種方法嵌入 HTML 文件：<img>、<embed>、<object> 、 <iframe>、直接嵌入HTML程式碼中。
使用 <img> 標籤
作為圖片、背景被引入
語法:
<img src="circle1.svg" alt=""/>
使用 <embed> 標籤
- 優勢：所有主要瀏覽器都支援，並允許使用指令碼
- 缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法:
<embed src="circle1.svg" type="image/svg+xml" />
使用 <object> 標籤
- 優勢：所有主要瀏覽器都支援，並支援HTML4，XHTML和HTML5標準
- 缺點：不允許使用指令碼。
語法:
<object data="circle1.svg" type="image/svg+xml"></object>
使用<iframe> 標籤
- 優勢：所有主要瀏覽器都支援，並允許使用指令碼
- 缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法:
<iframe src="circle1.svg"></iframe>
直接在HTML嵌入SVG程式碼
- 優勢：操作方便，動態調整
- 缺點：HTML頁面太過冗長，對編碼不友好
語法:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
SVG的基本形狀
矩形 <rect>
示例一：
正常的矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>
效果：
程式碼解析:
- rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
- style 屬性用來定義 CSS 屬性
- CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進位制值）
- CSS 的 stroke-width 屬性定義矩形邊框的寬度
- CSS 的 stroke 屬性定義矩形邊框的顏色
示例二：
填充和邊框的透明度
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5" />
</svg>
效果：
程式碼解析:
- x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器視窗左側的距離是 0px）
- y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器視窗頂端的距離是 0px）
- CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
- CSS 的 stroke-opacity 屬性定義輪廓顏色的透明度（合法的範圍是：0 - 1）
示例三：
整個元素的透明度
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4" />
</svg>
效果：
程式碼解析:
- CSS opacity 屬性用於定義了元素的透明值 (範圍: 0 到 1)。
示例四：
圓角矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<rect x="50" y="20" rx="20" ry="20" width="150" height="160" style="fill:red;stroke:black;stroke-width:1;opacity:0.5" />
</svg>
效果：
程式碼解析:
- rx 和 ry 屬性可使矩形產生圓角。
圓形 <circle>
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
</svg>
效果：
程式碼解析:
- circle 標籤可用來建立一個圓
- cx和cy屬性定義圓點的x和y座標。如果省略cx和cy，圓的中心會被設定為(0, 0)
- r屬性定義圓的半徑
橢圓 <ellipse>
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2" />
</svg>
效果：
程式碼解析:
- ellipse 標籤可用來建立一個橢圓
- CX屬性定義的橢圓中心的x座標
- CY屬性定義的橢圓中心的y座標
- RX屬性定義的水平半徑
- RY屬性定義的垂直半徑
線 <line>
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:5" />
</svg>
效果：
程式碼解析:
- line 標籤可用來建立一條直線
- x1 屬性在 x 軸定義線條的開始
- y1 屬性在 y 軸定義線條的開始
- x2 屬性在 x 軸定義線條的結束
- y2 屬性在 y 軸定義線條的結束
折線 <polyline>
示例一：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,10 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>
效果：
程式碼解析:
- polyline 是用於建立任何只有直線的形狀
- points是點的集合
示例二：
畫一個五角星
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>
效果：
程式碼解析:
利用了填空，因為線段是不閉合的
多邊形 <polygon>
示例一：
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:red;stroke:purple;stroke-width:1"/>
</svg>
效果：
程式碼解析:
- polygon標籤用來建立含有不少於三個邊的圖形
- points是點的集合
示例二：
畫一個五角星
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:5"/>
</svg>
效果：
程式碼解析:
最後一個點會自動閉合，這也是和polyline的一個區別
路徑 <path>
路徑資料：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
示例：
畫一個三角形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L205 270 Z" />
</svg>
效果：
程式碼解析:
定義了一條路徑，它開始於位置150 0，到達位置75 200，然後從那裡開始到205 270，最後在150 0關閉路徑。
總結
SVG的基礎部分已經介紹了，但對於path的運用才剛剛開始，後續會專門細聊一下path，當然還有SVG的一些”高階“屬性。
其實一路操作下來，發現SVG的操作和我們使用PS、AI等繪圖工具的原理大致相像，對於我們來理解此類圖形的繪製也有一定的幫助。
感謝
萬能的網路
公眾號-歸子莫，小程式-小歸部落格