SVG 入門教程：概念、使用與屬性詳解

SVG（Scalable Vector Graphics）是一種基於 XML 的矢量圖形格式，廣泛應用於網頁設計和開發中。本文將詳細介紹 SVG 的基礎概念、使用方法及各個屬性的詳解，並列舉一些在線學習網站和資料，幫助大家快速上手 SVG 開發。

什麼是 SVG？

SVG 是一種用於描述二維矢量圖形的標記語言。與位圖圖像不同，矢量圖形使用數學公式來描述圖形的形狀和位置，因此可以無損縮放。SVG 文件是純文本文件，可以嵌入到 HTML 中，也可以獨立使用。

SVG 的優勢

  1. 無損縮放：SVG 圖像可以在任何分辨率下保持清晰。
  2. 可編輯：SVG 文件是文本文件，可以使用文本編輯器進行編輯。
  3. 交互性：可以通過 JavaScript 和 CSS 對 SVG 圖像進行動態操作和樣式設置。
  4. 輕量級：相比於位圖圖像，SVG 文件通常更小，載入速度更快。

SVG 的基本使用

SVG 圖像可以直接嵌入到 HTML 中，也可以作為外部文件引用。以下是一些基本的使用方法：

直接嵌入 HTML

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>SVG Example</title>
7
  </head>
8
  <body>
9
    <svg width="100" height="100">
10
      <circle
11
        cx="50"
12
        cy="50"
13
        r="40"
14
        stroke="black"
15
        stroke-width="3"
16
        fill="red"
17
      />
18
    </svg>
19
  </body>
20
</html>

引用外部 SVG 文件

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>SVG Example</title>
7
  </head>
8
  <body>
9
    <img src="image.svg" alt="Example SVG Image" />
10
  </body>
11
</html>

SVG 的基本元素和屬性

常用元素

  1. <circle>：定義一個圓形。
  2. <rect>：定義一個矩形。
  3. <line>：定義一條直線。
  4. <polyline>：定義一組連接的直線。
  5. <polygon>：定義一個多邊形。
  6. <path>：定義任意形狀的路徑。
  7. <text>：定義文本。

常用屬性

  1. width 和 height：定義 SVG 圖形的寬度和高度。
  2. x 和 y：定義元素的位置。
  3. cx 和 cy：定義圓形的中心點。
  4. r：定義圓形的半徑。
  5. rx 和 ry：定義橢圓的半徑。
  6. points：定義多邊形和折線的頂點。
  7. d：定義路徑的指令和參數。
  8. fill：定義填充顏色。
  9. stroke：定義邊框顏色。
  10. stroke-width：定義邊框寬度。

元素示例代碼

<circle> 元素

1
<svg width="100" height="100">
2
  <circle cx="50" cy="50" r="40" stroke="white" stroke-width="2" fill="blue" />
3
</svg>

<rect> 元素

1
<svg width="100" height="100">
2
  <rect
3
    x="10"
4
    y="10"
5
    width="80"
6
    height="80"
7
    stroke="white"
8
    stroke-width="3"
9
    fill="blue"
10
  />
11
</svg>

<line> 元素

1
<svg width="100" height="100">
2
  <line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="3" />
3
</svg>

<polyline> 元素

1
<svg width="100" height="100">
2
  <polyline
3
    points="10,10 50,50 90,10"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

<polygon> 元素

1
<svg width="100" height="100">
2
  <polygon
3
    points="10,10 90,10 50,90"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="green"
7
  />
8
</svg>

<text> 元素

1
<svg width="200" height="100">
2
  <text x="10" y="50" font-family="Verdana" font-size="35" fill="black">
3
    Hello, SVG!
4
  </text>
5
</svg>

<path> 元素

<path> 元素是 SVG 中最強大的元素之一，可以用來繪製任意形狀的路徑。它通過 d 屬性定義路徑的數據，包含一系列的命令和參數。

常用命令

  1. M (moveto)：移動到指定位置，不繪製線條。
  2. L (lineto)：從當前點繪製一條直線到指定位置。
  3. H (horizontal lineto)：從當前點繪製一條水平線到指定 x 坐標。
  4. V (vertical lineto)：從當前點繪製一條垂直線到指定 y 坐標。
  5. C (curveto)：繪製三次貝塞爾曲線。
  6. S (smooth curveto)：繪製平滑的三次貝塞爾曲線。
  7. Q (quadratic Bézier curve)：繪製二次貝塞爾曲線。
  8. T (smooth quadratic Bézier curveto)：繪製平滑的二次貝塞爾曲線。
  9. A (elliptical Arc)：繪製橢圓弧。
  10. Z (closepath)：關閉路徑，繪製一條從當前點到起始點的直線。

路徑示例

簡單路徑

1
<svg width="100" height="100">
2
  <path
3
    d="M10 10 H 90 V 90 H 10 Z"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

該路徑從 (10, 10) 開始，繪製一條水平線到 (90, 10)，然後繪製一條垂直線到 (90, 90)，再繪製一條水平線到 (10, 90)，最後關閉路徑。

貝塞爾曲線

1
<svg width="100" height="100">
2
  <path
3
    d="M10 80 C 40 10, 65 10, 95 80"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

該路徑從 (10, 80) 開始，繪製一條三次貝塞爾曲線，控制點為 (40, 10) 和 (65, 10)，終點為 (95, 80)。

橢圓弧

1
<svg width="100" height="100">
2
  <path
3
    d="M10 50 A 30 30 0 0 1 90 50"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

該路徑從 (10, 50) 開始，繪製一個橢圓弧，半徑為 30，終點為 (90, 50)。

各屬性詳解與示例

M (moveto) 命令

1
<svg width="100" height="100">
2
  <path d="M10 10 L90 90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

L (lineto) 命令

1
<svg width="100" height="100">
2
  <path
3
    d="M10 10 L90 10 L90 90 L10 90 Z"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

H (horizontal lineto) 命令

1
<svg width="100" height="100">
2
  <path d="M10 10 H90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

V (vertical lineto) 命令

1
<svg width="100" height="100">
2
  <path d="M10 10 V90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

C (curveto) 命令

1
<svg width="100" height="100">
2
  <path
3
    d="M10 80 C 40 10, 65 10, 95 80"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

S (smooth curveto) 命令

1
<svg width="100" height="100">
2
  <path d="M10 80 S 40 10, 95 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Q (quadratic Bézier curve) 命令

1
<svg width="100" height="100">
2
  <path d="M10 80 Q 50 10, 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

T (smooth quadratic Bézier curveto) 命令

1
<svg width="100" height="100">
2
  <path d="M10 80 T 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

A (elliptical Arc) 命令

1
<svg width="100" height="100">
2
  <path
3
    d="M10 50 A 30 30 0 0 1 90 50"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Z (closepath) 命令

1
<svg width="100" height="100">
2
  <path d="M10 10 H90 V90 H10 Z" stroke="black" stroke-width="3" fill="none" />
3
</svg>

在線學習網站和資料

  1. MDN Web Docs：提供詳細的 SVG 教程和參考資料。

  2. W3Schools：提供簡單易懂的 SVG 教程。

  3. CSS-Tricks：提供 SVG 的高級使用技巧和案例。

  4. SVGOMG：一個在線優化 SVG 文件的工具。

相似的文章

阿里雲伺服器如何安裝和續簽Let’s Encrypt證書

阿里雲伺服器如何安裝和續簽Let’s Encrypt證書

如何搭建博客：全面指南與平台分析

如何搭建博客：全面指南與平台分析