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

歸子莫發表於2021-11-10
SVG前端

【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>
效果

image-20211110141218557

程式碼解析
  • <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>

效果：

image-20211110160850204

程式碼解析:

  • 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>

效果：

image-20211110163102077

程式碼解析:

  • 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>

效果：

image-20211110162824824

程式碼解析:

  • 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>

效果：

image-20211110163832986

程式碼解析:

  • 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>

效果：

image-20211110164224132

程式碼解析:

  • 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>

效果：

image-20211110165550106

程式碼解析:

  • 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>

效果：

image-20211110170518961

程式碼解析:

  • 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>

效果：

image-20211110170934450

程式碼解析:

  • 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>

效果：

image-20211110171931827

程式碼解析:

利用了填空，因為線段是不閉合的

多邊形 <polygon>

示例一：

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:red;stroke:purple;stroke-width:1"/>
</svg>

效果：

image-20211110173241294

程式碼解析:

  • 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>

效果：

image-20211110173634068

程式碼解析:

最後一個點會自動閉合，這也是和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>

效果：

image-20211110174112019

程式碼解析:

定義了一條路徑，它開始於位置150 0，到達位置75 200，然後從那裡開始到205 270，最後在150 0關閉路徑。

總結

SVG的基礎部分已經介紹了，但對於path的運用才剛剛開始，後續會專門細聊一下path，當然還有SVG的一些”高階“屬性。

其實一路操作下來，發現SVG的操作和我們使用PS、AI等繪圖工具的原理大致相像，對於我們來理解此類圖形的繪製也有一定的幫助。

感謝

萬能的網路

菜鳥教程

以及勤勞的自己，個人部落格，GitHub測試，GitHub

公眾號-歸子莫，小程式-小歸部落格

相關文章