【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等繪圖工具的原理大致相像，對於我們來理解此類圖形的繪製也有一定的幫助。

感謝

萬能的網路
菜鳥教程
以及勤勞的自己，個人部落格，GitHub測試，GitHub
公眾號-歸子莫，小程式-小歸部落格

【SVG】為了前端頁面的美麗，我選擇學習SVG