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

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

博客說明

文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯繫本人刪除，謝謝！

說明

SVG在之前自學的過程中，其實一直都是很高深的樣子不敢觸碰，但是想要理解終究都會走到這一步的。:blush:再怎麼看起來難的技術都是由簡單的知識點累計起來的。

什麼是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

公衆號-歸子莫，小程序-小歸博客