SVG 基础知识入门

目录

SVG 基础知识入门

一、SVG 简介

二、SVG 基本结构

三、常见 SVG 标签

1.  - 矩形

2.  - 圆形

3.  - 椭圆形

4.  - 直线

5.  - 折线

6.  - 多边形

7.  - 文本

8.  - 路径

四、SVG 属性

1. transform

2. opacity

五、SVG 在前端中的应用

1. 图标制作

2. 数据可视化

3. 动画制作

六、总结

---

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。它在前端开发中被广泛应用，因为它具有很多优点，比如图像质量不受分辨率影响、文件大小较小以及可交互性等。本文将介绍 SVG 的一些基础知识，包括常见的标签和属性。

一、SVG 简介

SVG 是基于 XML 的，这意味着它的语法结构清晰，易于阅读和编写。与位图图像（如 JPEG 和 PNG）不同，SVG 图形是由数学公式定义的，因此无论如何缩放，都不会出现失真的情况。这使得 SVG 在响应式设计和高分辨率屏幕的应用中非常理想。

二、SVG 基本结构

一个基本的 SVG 文档结构如下：

<svg width="500" height="500" viewBox="0 0 500 500">
  <!-- SVG图形元素将放在这里 -->
</svg>

• width和height属性定义了 SVG 图形在 HTML 页面中显示的宽度和高度。
• viewBox属性定义了 SVG 的视口，它由四个值组成：x、y、width和height。x和y指定了视口的左上角坐标，width和height指定了视口的大小。通过调整viewBox的值，可以对 SVG 图形进行缩放和平移操作。

三、常见 SVG 标签

1. <rect> - 矩形

用于绘制矩形。基本属性包括：

• x和y：矩形左上角的坐标。
• width和height：矩形的宽度和高度。
• fill：矩形的填充颜色。
• stroke：矩形的边框颜色。
• stroke-width：边框的宽度。

示例：

<rect x="50" y="50" width="200" height="100" fill="blue" stroke="black" stroke-width="2"/>

2. <circle> - 圆形

用于绘制圆形。基本属性包括：

• cx和cy：圆心的坐标。
• r：圆的半径。
• fill：圆形的填充颜色。
• stroke：圆形的边框颜色。
• stroke-width：边框的宽度。

示例：

<circle cx="150" cy="150" r="50" fill="red" stroke="white" stroke-width="3"/>

3. <ellipse> - 椭圆形

用于绘制椭圆形。基本属性包括：

• cx和cy：椭圆中心的坐标。
• rx和ry：椭圆的长半轴和短半轴长度。
• fill：椭圆形的填充颜色。
• stroke：椭圆形的边框颜色。
• stroke-width：边框的宽度。

示例：

<ellipse cx="250" cy="100" rx="100" ry="50" fill="green" stroke="black" stroke-width="2"/>

4. <line> - 直线

用于绘制直线。基本属性包括：

• x1和y1：直线起点的坐标。
• x2和y2：直线终点的坐标。
• stroke：直线的颜色。
• stroke-width：直线的宽度。

示例：

<line x1="50" y1="200" x2="300" y2="200" stroke="purple" stroke-width="2"/>

5. <polyline> - 折线

用于绘制由多个线段组成的折线。基本属性包括：

• points：一个由逗号分隔的坐标对列表，表示折线的顶点坐标。
• stroke：折线的颜色。
• stroke-width：折线的宽度。

示例：

<polyline points="50,250 100,300 150,250 200,300" stroke="orange" stroke-width="2"/>

6. <polygon> - 多边形

用于绘制多边形。它与<polyline>类似，但多边形会自动闭合。基本属性包括：

• points：一个由逗号分隔的坐标对列表，表示多边形的顶点坐标。
• fill：多边形的填充颜色。
• stroke：多边形的边框颜色。
• stroke-width：边框的宽度。

示例：

<polygon points="250,250 300,300 350,250" fill="yellow" stroke="black" stroke-width="2"/>

7. <text> - 文本

用于在 SVG 中添加文本。基本属性包括：

• x和y：文本的起始坐标。
• fill：文本的填充颜色。
• font-size：文本的字号。
• font-family：文本的字体。

示例：

<text x="100" y="350" fill="black" font-size="20" font-family="Arial">Hello, SVG!</text>

8. <path> - 路径

这是一个非常强大的标签，可以用来绘制各种复杂的形状。它使用一系列的指令来定义路径，常见的指令包括：

• M：移动到指定点（开始绘制路径）。
• L：直线连接到指定点。
• C：三次贝塞尔曲线连接到指定点。
• Q：二次贝塞尔曲线连接到指定点。
• Z：闭合路径。

示例：

<path d="M50,400 L100,450 C150,420 200,480 250,450 Z" stroke="blue" stroke-width="2" fill="none"/>

四、SVG 属性

除了上述标签各自的属性外，还有一些常见的 SVG 属性可以应用于多个标签：

1. transform

用于对图形进行变换操作，如平移、旋转、缩放和倾斜等。例如：

• translate(x,y)：将图形沿 x 轴和 y 轴平移指定的距离。
• rotate(angle)：将图形绕原点旋转指定的角度。
• scale(sx,sy)：将图形在 x 轴和 y 轴方向上缩放指定的倍数。
• skewX(angle)和skewY(angle)：将图形在 x 轴和 y 轴方向上倾斜指定的角度。

示例：

<rect x="50" y="50" width="200" height="100" fill="blue" transform="translate(50,50) rotate(45)"/>

2. opacity

用于设置图形的透明度，取值范围是 0（完全透明）到 1（完全不透明）。

示例：

<circle cx="150" cy="150" r="50" fill="red" opacity="0.5" stroke="white" stroke-width="3"/>

五、SVG 在前端中的应用

SVG 在前端开发中有很多应用场景，比如：

1. 图标制作

SVG 非常适合制作图标，因为它可以在任何分辨率下保持清晰，并且可以通过 CSS 和 JavaScript 进行动态交互，如改变颜色、大小和形状等。

2. 数据可视化

在数据可视化领域，SVG 可以用来绘制各种图表，如柱状图、折线图、饼图等。通过 JavaScript 可以动态更新 SVG 图形来反映数据的变化。

3. 动画制作

SVG 可以通过 CSS 动画和 JavaScript 动画来实现各种动画效果，如平移、旋转、缩放和变形等。

六、总结

SVG 是一种强大的前端图形技术，它具有很多优点和广泛的应用场景。通过掌握 SVG 的基本结构、常见标签和属性，我们可以在前端开发中创建出高质量的矢量图形，并实现各种复杂的交互和动画效果。希望本文对大家学习 SVG 基础知识有所帮助，让我们一起探索 SVG 的更多可能性吧！