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免费证书

阿里云与GitHub结合实现Node项目的自动化部署

阿里云与GitHub结合实现Node项目的自动化部署